Alex Alex - 3 months ago 14
Javascript Question

How do I implement search on tables in php

I am populating tables by extracting data from websites using DOM
These are the tables

<div class="col-xs-6 col-sm-3" id="divPakdukaan" style="width:330px;">

<h3 style="color:white;">PakDukaan</h3>
<form action="abc.php" id="formPakdukaan" method="POST">
<input type="text" name="searchIn" placeholder="Search.." id="custom_search" class="form-control">
<input type="submit" class="hidden">
</form>
<?php foreach($pakdukaan_optimized as $a => $pd){ ?>
<div class="row row-list well" style="height:130px;">
<table id="pakdukaanTable">
<tr><td><font size="2"><?php echo $pd['name'] ?></font></td></tr>
<tr>
<td><font size="2"><?php echo $pd['price'] ?></font></td>
<td align="right"><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#pakdukaanModal<?php echo $a ?>">Details</button></td>
</tr>
</table>
<div class="container">
<div id="pakdukaanModal<?php echo $a ?>" class="reveal-modal modal fade" role="dialog" data-reveal>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Detail</h4>
</div>
<div class="modal-body">
<table class='table table-hover table-responsive' width='21'>
<tr>
<td><img src="<?php echo preg_replace('/\s+/', '%20',$pd['image'])?>" class="img-thumbnail" alt="Cinque Terre" width="200" height="100" /></td>
<td class="parent">
<h3>PakDukaan</h3>
<table>
<tr>
<td class="child"><a target="_blank" class="btn btn-primary" href="<?php echo $pd['link']?>">Buy</a></td>
<td class="child"><a target="_blank" class="btn btn-primary" href="http://www.pakdukaan.com/">Visit Site</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><font size="2">Name: <?php echo $pd['name']?></font></td>
</tr>
<tr>
<td><font size="2">Price: <?php echo $pd['price']?></font></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
<div class="row">
<div class="container" id="rowContainer">
<div class="col-xs-6 col-sm-3" id="divCzone" style="width:330px;">
<form action="abc.php" id="formCzone" method="POST">
<input type="text" name="searchIn" placeholder="Search.." id="custom_search" class="form-control">
<h3 style="color:white;">Computer Zone</h3>
<?php foreach($czone as $b => $cz){ ?>
<div class="row row-list well" style="height:130px;">
<table id="czoneTable">
<tr><td><font size="2"><?php echo $cz['name'] ?></font></td> </tr>
<tr>
<td><font size="2"><?php echo $cz['price'] ?></font></td>
<td align="right"><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#czoneModal<?php echo $b ?>">Details</button></td>
</tr>
</table>
<div class="container">
<div id="czoneModal<?php echo $b ?>" class="reveal-modal modal fade" role="dialog" data-reveal>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Detail</h4>
</div>
<div class="modal-body">
<table class='table table-hover table-responsive' width='21'>
<tr>
<td><img src="<?php echo preg_replace('/\s+/', '%20',$cz['image'])?>" class="img-thumbnail" alt="Cinque Terre" width="200" height="100" /></td>
<td class="parent">
<h3>Computer Zone</h3>
<table>
<tr>
<td class="child"><a target="_blank" class="btn btn-primary" href="<?php echo $cz['link']?>">Buy</a></td>
<td class="child"><a target="_blank" class="btn btn-primary" href="http://www.czone.com.pk/">Visit Site</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><font size="2">Name: <?php echo $cz['name']?></font></td>
</tr>
<tr>
<td><font size="2">Price: <?php echo $cz['price']?></font></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>


And the functions which I have created for data extractions are these

function czoneExtractor($czoneSearch)
{
$czoneHtml = file_get_contents('http://www.czone.com.pk/SearchResult.aspx?kw='.$czoneSearch);
$czoneDoc = new DOMDocument();
libxml_use_internal_errors(TRUE);
if(!empty($czoneHtml)){
$czoneDoc->loadHTML($czoneHtml);
libxml_clear_errors();
$czoneXPath = new DOMXPath($czoneDoc);

//ComputerZone
$czrow = $czoneXPath->query('//a[@class="lnkBlue txt14"]');
$czrow2 = $czoneXPath->query('//span[@class="txtGray txt11"]');
$czrow3 = $czoneXPath->query('(//a[@class="lnkBlue txt14"])//@href');
$czrow4 = $czoneXPath->query('//table[@id="tblListView"]//table[@class="txtGray gob"]//td[@class="gob"]//img[@class="thumbnail"]//@src');

//Computer Zone
if($czrow->length > 0){
$rowcz = array();
foreach($czrow as $rcz){
$rowcz[]= $rcz->nodeValue;
//echo $rcz->nodeValue . "<br/>";
}
}
if($czrow2->length > 0){
$row2cz = array();
foreach($czrow2 as $rcz2){
$row2cz[]=$rcz2->nodeValue;
//echo $rcz2->nodeValue . "<br/>";
}
}
if($czrow3->length > 0){
$row3cz = array();
foreach($czrow3 as $rcz3){
$row3cz[]="http://www.czone.com.pk/".$rcz3->nodeValue;
//echo $rcz3->nodeValue . "<br/>";
}
}
if($czrow4->length > 0){
$row4cz = array();
foreach($czrow4 as $rcz4){
$row4cz[]="http://www.czone.com.pk/".$rcz4->nodeValue;
//echo "www.czone.com.pk/".$rcz4->nodeValue . "<br/>";
}
}
$czchecker = count($rowcz);
if($czchecker != 0) {
$czone = array();
for($i=0; $i < count($rowcz); $i++){
$czone[$i] = [
'name'=>$rowcz[$i],
'price'=>$row2cz[$i],
'link'=>$row3cz[$i],
'image'=>$row4cz[$i]
];
}
}
else{
echo "no result found at czone";
}
}
return $czone;
}

function pakdukaanExtractor($pakdukaanSearch){
$pakdukaanHtml = file_get_contents('http://www.pakdukaan.com/index.php?fc=module&module=leoproductsearch&controller=productsearch&orderby=position&orderway=desc&cate=&search_query='.$pakdukaanSearch);
$pakdukaanDoc = new DOMDocument();
libxml_use_internal_errors(TRUE);
if(!empty($pakdukaanHtml)){
$pakdukaanDoc->loadHTML($pakdukaanHtml);
libxml_clear_errors();
$pakdukaanXPath = new DOMXPath($pakdukaanDoc);

//PakDukaan
$pdrow = $pakdukaanXPath->query('//h5[@class="name"]');
$pdrow2 = $pakdukaanXPath->query('(//span[@class="price product-price"])');
$pdrow3 = $pakdukaanXPath->query('(//div[@class="product-container product-block"]//div[@class="left-block"]//div[@class="product-image-container image"]//a[@class="product_img_link"])//@href');
$pdrow4 = $pakdukaanXPath->query('//div[@class="product-container product-block"]//div[@class="left-block"]//div[@class="product-image-container image"]//img[@class="replace-2x img-responsive"]//@src');

//PakDukaan
if($pdrow->length > 0){
$rowpd = array();
foreach($pdrow as $rpd){
$rowpd[]= $rpd->nodeValue;
//echo $rpd->nodeValue . "<br/>";
}
}
if($pdrow2->length > 0){
$row2pd_not = $row2pd_optimized = $row2even = array();
foreach($pdrow2 as $rpd2_not){
$row2pd_not[]= $rpd2_not->nodeValue;
//echo $rpd2_not->nodeValue . "<br/>";
}
$count=1;
foreach($row2pd_not as $val)
{
if($count%2==1)
{
$row2pd_optimized[]=$val;
}
else
{
$row2even[]=$val;
}
$count++;
}
}
if($pdrow3->length > 0){
$row3pd = array();
foreach($pdrow3 as $rpd3){
$row3pd[]=$rpd3->nodeValue;
//echo $rpd3->nodeValue . "<br/>";
}
}
if($pdrow4->length > 0){
$row4pd = array();
foreach($pdrow4 as $rpd4){
$row4pd[]=$rpd4->nodeValue;
//echo $rpd4->nodeValue . "<br/>";
}
}
$pdchecker = count($rowpd);
if($pdchecker != 0) {
$pakdukaan = array();
for($i=0; $i < count($rowpd); $i++){
$pakdukaan[$i] = [
'name'=>$rowpd[$i],
'price'=>$row2pd_optimized[$i],
'link'=>$row3pd[$i],
'image'=>$row4pd[$i]
];
}
}
else{
echo "no result found at pakdukaan";
}
}
return $pakdukaan;
}


This is how I fill arrays

$czoneQuery = "GTX+980"
$pakdukaanQuery = "GTX+980"
$czone = czoneExtractor($czoneQuery);
$pakdukaan = pakdukaanExtractor($pakdukaanQuery);


Now once the page is loaded with results I want to type in czone table input text bar and it should recall function and populate rows with new result without affecting pakdukaan table rows.

Is there any way to accomplish using Jquery AJAX?

I thought of this but it doesn't do anything

$(document).on('submit','#formPakdukaan',function(e) {


$.ajax({
url: 'czoneExtractor.php',
type: 'post',
data: { "searchIn"},
success: function(response) { }
});
});

Answer

If only you want to use datatable search feature:

1. Add these links: (you may also download)

<link rel="stylesheet" type="text/css"  href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">  
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>

2. Add this little jquery code:

$('#pakdukaanTable').dataTable();

that's it.