Как применить раскрывающийся фильтр к сгенерированной таблице, используя PHP, JSON или AJAX?

Question

Я работаю над проектом, в котором есть главная таблица интересов со значениями строк и столбцов, как в таблице MYSQL. Я хочу добавить фильтр на основе значений, используя раскрывающийся список, чтобы применить его к таблице, чтобы можно было минимизировать представление большого количества строк в таблице.

Но я не совсем понимаю, как генерировать таблицу каждый раз, когда Я применяю фильтр.

Пожалуйста, направьте меня и прокомментируйте, если требуется какая-либо часть кода. Его скриншот прилагается.

Ниже приведена часть моего кода в виде скриншота прикреплен выше и находится внутри HTML тела.

Dashboard.html

 <!-- View Main Lead Table with Filters  -->
            <section class="operation" id="view_lead_info" style="display: none;">

                <!-- Filters -->

                <div class="row">                

                            <div class="col">
                                <label><p><b>Select Filter</b></p></label>                    
                            </div>          

                </div>

                <div class="row">

                    <div class="col span-1-of-4">
                        <div class="row">
                            <div class="col span-1-of-4">
                                Lead Status:
                            </div>
                            <div class="col span-2-of-4">
                                <select><option>Select</option>
                                    <?php                                                
                                        echo "<option value='Active'>Active Leads</option>";
                                        echo "<option value='Paused'>Paused Leads</option>";
                                        echo "<option value='Expired'>Expired Leads</option>";
                                        echo "<option value='Unsubscribed'>Unsubscribed</option>";
                                    ?>                            
                                </select>
                            </div>
                        </div>                         
                    </div>

                    <div class="col span-1-of-3">
                        <div class="row">
                            <div class="col span-1-of-4">
                                Campaign Status:
                            </div>
                            <div class="col span-2-of-4">
                                <select><option>Select</option>
                                    <?php                                                
                                        echo "<option value='Active'>Active</option>";
                                        echo "<option value='Paused'>Paused</option>";
                                        echo "<option value='Expired'>Expired</option>";
                                        echo "<option value='Unsubscribed'>Unsubscribed</option>";
                                    ?>                            
                                </select>
                            </div>
                        </div>                        
                    </div>

                    <div class="col span-1-of-3">
                        <div class="row">
                            <div class="col span-1-of-3">
                                Company Name:
                            </div>
                            <div class="col span-2-of-3">                                       

                                    <?php                                            

                                        include('./server/connection.php');

                                        $sqlSelect="SELECT * FROM tbl_main_lead_info ORDER By Company ASC";
                                        $result = $conn -> query ($sqlSelect);                                                                                                                                  
                                        echo "<select>";
                                        echo "<option>select</option>";                                            
                                        while ($row = mysqli_fetch_array($result)) {
                                            echo "<option value='$row[Company]'> $row[Company] </option>";
                                        }
                                        echo "</select>";

                                    ?>                          

                            </div>
                        </div>                        
                    </div>

                </div>

                <div class="row">

                    <div class="col span-1-of-4">
                        <div class="row">
                            <div class="col span-1-of-4">
                                State:
                            </div>
                            <div class="col span-2-of-4">                                       

                                    <?php                                            

                                        include('./server/connection.php');

                                        $sqlSelect="SELECT * FROM tbl_state_info ORDER By StateName ASC";
                                        $result = $conn -> query ($sqlSelect);                                           

                                        $result = $conn -> query ($sqlSelect);                                          

                                        echo "<select name='StateName'>";
                                        echo "<option>select</option>";                                            
                                        while ($row = mysqli_fetch_array($result)) {
                                            echo "<option value='$row[StateName]'> $row[StateName] </option>";
                                        }
                                        echo "</select>";

                                    ?>                          

                            </div>
                        </div>

                    </div>

                    <div class="col span-1-of-3">
                        <div class="row">
                            <div class="col span-1-of-4">
                                Country:
                            </div>
                            <div class="col span-2-of-4">
                                <?php 

                                    include('./server/connection.php');

                                    $sqlSelect="SELECT * FROM tbl_country_info ORDER By CountryName ASC";
                                    $result = $conn -> query ($sqlSelect);                                         


                                    $result = $conn -> query ($sqlSelect);                                          


                                    echo "<select name='CountryName'>";
                                    echo "<option>select</option>";
                                    while ($row = mysqli_fetch_array($result)) {
                                        echo "<option value='$row[CountryName]'> $row[CountryName] </option>";
                                    }
                                    echo "</select>";

                                ?>
                            </div>
                        </div>                      
                    </div>

                    <div class="col span-1-of-3">
                        <div class="row">
                            <div class="col span-1-of-3">
                                Firm Type:
                            </div>
                            <div class="col span-2-of-3">
                                <?php 

                                    include('./server/connection.php');

                                    $sqlSelect="SELECT * FROM tbl_firm_type_info ORDER By FirmType_Value ASC";
                                    $result = $conn -> query ($sqlSelect);                                         


                                    $result = $conn -> query ($sqlSelect);                                          


                                    echo "<select name='FirmType'>";
                                    echo "<option>select</option>";
                                    while ($row = mysqli_fetch_array($result)) {
                                        echo "<option value='$row[FirmType_Value]'> $row[FirmType_Value] </option>";
                                    }
                                    echo "</select>";

                                ?>       
                            </div>
                        </div>                         
                    </div>

                </div>

                <div class="row">

                    <div class="col span-1-of-4">
                        <div class="row">
                            <div class="col span-1-of-4">
                                Firm Size:
                            </div>
                            <div class="col span-2-of-4">

                                <?php 

                                    include('./server/connection.php');

                                    $sqlSelect="SELECT * FROM tbl_firm_size_info ORDER By FirmSize_Id ASC";
                                    $result = $conn -> query ($sqlSelect);                                         


                                    $result = $conn -> query ($sqlSelect);                                          


                                    echo "<select name='FirmSize'>";
                                    echo "<option>select</option>";
                                    while ($row = mysqli_fetch_array($result)) {
                                        echo "<option value='$row[FirmSize_Value]'> $row[FirmSize_Value] </option>";
                                    }
                                    echo "</select>";

                                ?>

                            </div>
                        </div> 

                    </div>

                    <div class="col span-1-of-4">
                         <div class="row">
                            <div class="col span-1-of-3">
                                Tech Area:
                            </div>
                            <div class="col span-2-of-3">
                                <?php 

                                    include('./server/connection.php');

                                    $sqlSelect="SELECT * FROM tbl_tech_area_info ORDER By TechAreaName ASC";
                                    $result = $conn -> query ($sqlSelect);                                         


                                    $result = $conn -> query ($sqlSelect);                                          


                                    echo "<select name='TechAreaName'>";
                                    echo "<option>select</option>";
                                    while ($row = mysqli_fetch_array($result)) {
                                        echo "<option value='$row[TechAreaName]'> $row[TechAreaName] </option>";
                                    }
                                    echo "</select>";

                                ?> 
                            </div>
                        </div>                          
                    </div>                

                    <div class="col span-1-of-4">
                        <div class="row">
                            <div class="col span-1-of-4">
                                Start Date:
                            </div>
                            <div class="col span-3-of-4">                          
                                    <?php 

                                    echo "<input type='date' name='startdate'>";

                                    ?>                                    
                            </div>
                        </div> 
                    </div>

                    <div class="col span-1-of-4">
                        <div class="row">
                            <div class="col span-1-of-4">
                                End Date:
                            </div>
                            <div class="col span-3-of-4">                            
                                    <?php 

                                    echo "<input type='date' name='enddate'>";

                                    ?>                                     
                            </div>
                        </div>                         
                    </div>

                </div>

                <div class="row">               

                    <div class="col span-1-of-3">
                        <div class="row">
                            <div class="col span-3-of-4">

                            </div>               
                        </div> 
                    </div>    
                    <div class="col span-1-of-3">
                        <div class="row">
                            <div class="col span-3-of-4">
                                <div class="row">
                                    <div class="col span-1-of-3">
                                        <label></label>
                                    </div>
                                    <div class="col span-2-of-3">
                                        <input type="submit" value="Search">
                                    </div>
                                </div>
                            </div>                        
                        </div>
                    </div>
                </div>  

                <!-- Main Tables Campaign and Lead Table                        -->

                <div class="row">

                    <!-- MAIN TABLE-->

                    <div class="col" >



                        <button class="viewMainTable" onclick="viewMainTable();" name="viewMainTable">Lead Table</button>
                        <button class="viewCampaignTable" onclick="viewCampaignTable();" name="viewCampaignTable">Campaign Table</button>

                        <div class="row">
                            <div class="col span-4-of-4">

                                <table class="display_table" id='main_lead_table' style="display: none;">                                    

                                    <th>Sr.No.</th>
                                    <th>LeadID - Name</th>
                                    <th>Company</th>
                                    <th>Location</th>
                                    <th>Communication</th>                                                         
                                    <th>Last Contact Date</th>
                                    <th>Next Contact Date</th>
                                    <th>Lead Status</th> 
                                    <th>Details</th>                            

                                    <?php

                                    include('./server/connection.php');                                    

                                    $selectSQL = "SELECT * FROM `tbl_main_lead_info`";

                                    $result = $conn -> query ($selectSQL);

                                    $i = 1;

                                    while ($row = mysqli_fetch_array($result)) {                                   


                                                  printf( "<tr>
                                                                <td>%s</td>
                                                                <td>%s</td>                                                                
                                                                <td>%s</td>
                                                                <td>%s</td>
                                                                <td>%s</td>
                                                                <td>%s</td>
                                                                <td>%s</td>
                                                                <td>%s</td>
                                                                <td>%s</td>   
                                                            </tr>",

                                                            $i,
                                                            $row['Lead_Id']." - ".$row['FirstName']." ".$row['LastName'],
                                                            $row['Company'],
                                                            $row['State']."<br>".$row['Country'],
                                                            $row['Phone']."<br>".$row['Email'],
                                                            date('d-m-Y', strtotime($row['LastContactDate'])),
                                                            date('d-m-Y', strtotime($row['NextContactDate'])),                                                          
                                                            $row['LeadStatus'],
                                                            "Click Here"

                                                            );

                                                    $i = $i+1;

                                                }

                                    ?>


                                </table> 

                                <table class = "display_table" id = 'campaign_table' style = "display: none; ">                                    

                                    <th>Sr.No.</th>
                                    <th>Lead Id</th>
                                    <th>Campaign Name</th>
                                    <th>Description</th>
                                    <th>Start Date</th>
                                    <th>End Date</th>
                                    <th>Status</th>
                                    <th>Details</th>

                                    <?php

                                    function getleadname($leadid){

                                        include('./server/connection.php'); 

                                        $selectSQL = "SELECT * FROM `tbl_main_lead_info` WHERE Lead_Id = $leadid";

                                        $result = $conn -> query ($selectSQL);

                                        $i = 1;

                                        while ($row = mysqli_fetch_array($result)){

                                            $leadidandname = $row['Lead_Id']." - ".$row['FirstName']." ".$row['LastName'];

                                        } 

                                        return $leadidandname;

                                    }

                                    include('./server/connection.php');                                    

                                    $selectSQL = "SELECT * FROM `tbl_campaign_info`";

                                    $result = $conn -> query ($selectSQL);

                                    $i = 1;

                                    while ($row = mysqli_fetch_array($result)) {                                   


                                                  printf( "<tr>
                                                                <td>%s</td>
                                                                <td>%s</td>
                                                                <td>%s</td>                                                                
                                                                <td>%s</td>
                                                                <td>%s</td>
                                                                <td>%s</td>
                                                                <td>%s</td>
                                                                <td>%s</td>

                                                            </tr>",

                                                            $i,
                                                            getleadname($row['CampaignLead_Id']),
                                                            $row['CampaignName'],
                                                            $row['CampaignDescription'],
                                                            date('d-m-Y', strtotime($row['CampaignStartDate'])),
                                                        date('d-m-Y', strtotime($row['CampaignEndDate'])),                              
                                                            $row['CampaignStatus'],                                                        
                                                            "Click Here"

                                                            );

                                                    $i = $i+1;



                                                }

                                    ?>
                                </table>                                                             

                            </div>                       
                        </div> 

                    </div>                              

                </div>  

            </section>

Скрипт используется для изменения стиля отображения таблицы и находится внутри dashboard.html.

<script>
                 function viewMainTable(){

                        var x = document.getElementById('main_lead_table');

                        var y = document.getElementById('campaign_table');

                        if (!x.style.display || x.style.display === "none")
                        {
                            x.style.display = "block";
                            y.style.display = "none";      

                        }
                        else{
                            x.style.display = "none";
                        }     


                    }


                    function viewCampaignTable(){

                        var x = document.getElementById('campaign_table');

                        var y = document.getElementById('main_lead_table');

                        if (!x.style.display || x.style.display === "none")
                        {
                            x.style.display = "block";
                            y.style.display = "none";      

                        }
                        else{
                            x.style.display = "none";
                        }       

                    }

             </script>