I am working on a project in which there is a main lead table with rows and column values as in MYSQL table. I want to add some value based filter using drop-down to applied over the table so that view of large number of rows in table can be minimized.
But i am confused to how to generate the table each time when i apply filter.
Please guide me and comment if any code part is needed. Its screenshot is attached.
Below is a part of my code as screenshot attached above and is inside HTML body.
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>
Script is used to change table display style and is inside 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>
