We Keep Coding

I'm working on pagination for my project. How do I get the number of records per page through user selection from drop-down option?

I'm working on a project. I have a drop-down option where a user can select any number of rows to display on a table. What I've done so far allows user selection and loads the table correctly but during navigation, the default number on the drop-down returns to "10". The problem now is that I want whatever value the user selects for the number of rows to display to stay selected during the navigation to the remaining rows of the table.(i.e if the user selects "10", the number of rows to display should be 10 through out navigating the page, or if it is "15" or "20" or "25" etc)
Below are what I have done so far... thanks for your help in advance!
<form name="frmCheck" method="post">
<label class="clabel" for="rowno">Number of Rows:</label>
<select class="name" id="rowno" name="rowno">
<option value='all' hidden disabled>All</option>
<option value='10'>10</option>
<option value='15'>15</option>
<option value='20'>20</option>
<option value='25'>25</option>
<option value='30'>30</option>
</select>
<?php
$currentpage = isset($_GET['currentpage']) ? $_GET['currentpage'] : 1;
$rowno = $_POST['rowno'] ?? 10;
$no_of_records_per_page = $rowno;
$startfrom = ($currentpage - 1) * $no_of_records_per_page;
//get total number of records in database
$sqlcount = "SELECT *FROM cusregtbl";
$stmt = $con->prepare($sqlcount);
$stmt->execute();
$result = $stmt->get_result();
$num_rows = $result->num_rows;
$totalpages = ceil($num_rows/$no_of_records_per_page);
//query for pagination
$sqllimit = "SELECT *FROM cusregtbl LIMIT $startfrom, $no_of_records_per_page";
if ($stmt = $con->prepare($sqllimit))
{
$stmt->execute();
$result = $stmt->get_result();
$num_rows = $result->num_rows;
if ($num_rows>0)
{
echo "<table id='t01'' class='viewtbl' width='100%'>
<tr id='tblhead'>
<th class='th'>Account Number</th>
<th class='th'>Customer Name</th>
<th class='th'>Residence Type</th>
<th class='th'>Customer Address</th>
<th class='th'>Email Address</th>
</tr>";
while ($rows = $result->fetch_assoc())
{
$accno = $rows['AccountNo'];
$name = $rows['Fullname'];
$restype = $rows['ResidenceType'];
$adrs = $rows['CustomerAddress'];
$email = $rows['Email'];
// output data of each row
echo "<tr>
<td class='th'>". $accno."</td>
<td class='th'>". $name."</td>
<td class='th'>" . $restype. "</td>
<td class='th'>" . $adrs. " </td>
<td class='th'>". $email. "</td>
</tr>";
}
echo "</table>";
if($currentpage >= 2)
{
echo "<a class='nav_a' href='viewreg.php?currentpage=".($currentpage - 1)."'>-Previous-</a>";
}
for($i = 1; $i <= $totalpages; $i++)
{
if($i == $currentpage)
{
echo '<a class="nav_a" href = "viewreg.php?currentpage='.$i.'">'."| ".$i." ".'</a>';
}
else
{
echo '<a class="nav_a" href = "viewreg.php?currentpage='.$i.'">'."| ".$i." ".'</a>';
}
}
if($currentpage < $totalpages)
{
echo "<a class='nav_a' href='viewreg.php?currentpage=".($currentpage + 1)."'>-Next-</a>";
}
}
else
{
echo "Oops! No records found.";
}
}
}
?>
//javascript code for select option
<script type="text/javascript">
<?php
printf("let rownum='%s'", empty($_POST['rowno']) ? 0 : $_POST['rowno']);
?>
let myForm=document.forms.frmCheck;
let mySelect=myForm.rowno;
let myCheck=myForm.check;
if(rownum)
{
if(rownum=='all') myCheck.checked=true;
Array.from(mySelect.querySelectorAll('option')).some(option=>
{
if(rownum==Number(option.value) || rownum=='all')
{
option.selected=true;
return true;
}
});
}
// listen for changes on the checkbox
myCheck.addEventListener('click',function(e)
{
if(myCheck.checked)
{
var msg = confirm('Do you really want to see all of the \nrows? For a big table this could crash \nthe browser.');
if(!msg)
{
myCheck.checked=false;
return false;
}
}
if(mySelect.firstElementChild.value=='all')
{
mySelect.firstElementChild.selected=this.checked;
mySelect.firstElementChild.disabled=!this.checked;
}
myForm.submit();
});
// listen for changes on the select
mySelect.addEventListener('change',function(e)
{
if(myCheck.checked) myCheck.checked=false;
myForm.submit();
});
</script>
</form>

Use selected attribute.
<?php
$rowno = isset($_POST['rowno'])?$_POST['rowno']:10;
if($rowno == 10) $rowno = isset($_GET['limit'])?$_GET['limit']:10;
?>
<select class="name" id="rowno" name="rowno" onchange="window.location='viewreg.php?limit='+this.value+'&currentpage=1'">
<option value='all' hidden disabled>All</option>
<option value='10' <?=$rowno==10?'selected':''?>>10</option>
<option value='15' <?=$rowno==15?'selected':''?>>15</option>
<option value='20' <?=$rowno==20?'selected':''?>>20</option>
<option value='25' <?=$rowno==25?'selected':''?>>25</option>
<option value='30' <?=$rowno==30?'selected':''?>>30</option>
</select>
Add limit parameter:
if($currentpage >= 2)
{
echo "<a class='nav_a' href='viewreg.php?limit=".$rowno."&currentpage=".($currentpage - 1)."'>-Previous-</a>";
}
for($i = 1; $i <= $totalpages; $i++)
{
if($i == $currentpage)
{
echo '<a class="nav_a" href = "viewreg.php?limit='.$rowno.'&currentpage='.$i.'">'."| ".$i." ".'</a>';
}
else
{
echo '<a class="nav_a" href = "viewreg.php?limit='.$rowno.'&currentpage='.$i.'">'."| ".$i." ".'</a>';
}
}
if($currentpage < $totalpages)
{
echo "<a class='nav_a' href='viewreg.php?limit=".$rowno."&currentpage=".($currentpage + 1)."'>-Next-</a>";
}
Summary:
<form name="frmCheck" method="post">
<label class="clabel" for="rowno">Number of Rows:</label>
<?php
$rowno = isset($_POST['rowno'])?$_POST['rowno']:10;
if($rowno == 10) $rowno = isset($_GET['limit'])?$_GET['limit']:10;
?>
<select class="name" id="rowno" name="rowno" onchange="window.location='viewreg.php?limit='+this.value+'&currentpage=1'">
<option value='all' hidden disabled>All</option>
<option value='10' <?=$rowno==10?'selected':''?>>10</option>
<option value='15' <?=$rowno==15?'selected':''?>>15</option>
<option value='20' <?=$rowno==20?'selected':''?>>20</option>
<option value='25' <?=$rowno==25?'selected':''?>>25</option>
<option value='30' <?=$rowno==30?'selected':''?>>30</option>
</select>
<?php
$currentpage = isset($_GET['currentpage']) ? $_GET['currentpage'] : 1;
$no_of_records_per_page = $rowno;
$startfrom = ($currentpage - 1) * $no_of_records_per_page;
//get total number of records in database
$sqlcount = "SELECT *FROM cusregtbl";
$stmt = $con->prepare($sqlcount);
$stmt->execute();
$result = $stmt->get_result();
$num_rows = $result->num_rows;
$totalpages = ceil($num_rows/$no_of_records_per_page);
//query for pagination
$sqllimit = "SELECT *FROM cusregtbl LIMIT $startfrom, $no_of_records_per_page";
if ($stmt = $con->prepare($sqllimit))
{
$stmt->execute();
$result = $stmt->get_result();
$num_rows = $result->num_rows;
if ($num_rows>0)
{
echo "<table id='t01'' class='viewtbl' width='100%'>
<tr id='tblhead'>
<th class='th'>Account Number</th>
<th class='th'>Customer Name</th>
<th class='th'>Residence Type</th>
<th class='th'>Customer Address</th>
<th class='th'>Email Address</th>
</tr>";
while ($rows = $result->fetch_assoc())
{
$accno = $rows['AccountNo'];
$name = $rows['Fullname'];
$restype = $rows['ResidenceType'];
$adrs = $rows['CustomerAddress'];
$email = $rows['Email'];
// output data of each row
echo "<tr>
<td class='th'>". $accno."</td>
<td class='th'>". $name."</td>
<td class='th'>" . $restype. "</td>
<td class='th'>" . $adrs. " </td>
<td class='th'>". $email. "</td>
</tr>";
}
echo "</table>";
if($currentpage >= 2)
{
echo "<a class='nav_a' href='viewreg.php?limit=".$rowno."&currentpage=".($currentpage - 1)."'>-Previous-</a>";
}
for($i = 1; $i <= $totalpages; $i++)
{
if($i == $currentpage)
{
echo '<a class="nav_a" href = "viewreg.php?limit='.$rowno.'&currentpage='.$i.'">'."| ".$i." ".'</a>';
}
else
{
echo '<a class="nav_a" href = "viewreg.php?limit='.$rowno.'&currentpage='.$i.'">'."| ".$i." ".'</a>';
}
}
if($currentpage < $totalpages)
{
echo "<a class='nav_a' href='viewreg.php?limit=".$rowno."&currentpage=".($currentpage + 1)."'>-Next-</a>";
}
}
else
{
echo "Oops! No records found.";
}
}
?>
//javascript code for select option
<script type="text/javascript">
<?php printf("let rownum='%s'", empty($_POST['rowno']) ? 0 : $_POST['rowno']); ?>
let myForm=document.forms.frmCheck;
let mySelect=myForm.rowno;
let myCheck=myForm.check;
if(rownum)
{
if(rownum=='all') myCheck.checked=true;
Array.from(mySelect.querySelectorAll('option')).some(option=>
{
if(rownum==Number(option.value) || rownum=='all')
{
option.selected=true;
return true;
}
});
}
// listen for changes on the checkbox
myCheck.addEventListener('click',function(e)
{
if(myCheck.checked)
{
var msg = confirm('Do you really want to see all of the \nrows? For a big table this could crash \nthe browser.');
if(!msg)
{
myCheck.checked=false;
return false;
}
}
if(mySelect.firstElementChild.value=='all')
{
mySelect.firstElementChild.selected=this.checked;
mySelect.firstElementChild.disabled=!this.checked;
}
myForm.submit();
});
// listen for changes on the select
mySelect.addEventListener('change',function(e)
{
if(myCheck.checked) myCheck.checked=false;
myForm.submit();
});
</script>
</form>

Pagination does not work on page2 in php web page

Can someone help me on pagination syntax for php webpage. I have a set a pagination code to display 20 records per page. The records are displaying based on 'start date' and 'end date'.
The issue is, it works on page 1 but when I click on page 2 in pagination then it won't work. I assume the values of $_POST['startdate'] and $_POST['enddate] are not forwarding on page2.
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="multitab/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
.inline{
display: inline-block;
float: right;
margin: 20px 0px;
}
input, button{
height: 34px;
}
</style>
</head>
<body>
<form id="form1" name="form1" action="" method="post">
<table>
<tr>
<td><b>Start date:</b></td>
<td><input type="date" id="startdate" name="startdate" size="10"> </td>
<td><b>End date:</b></td>
<td><input type="date" id="enddate" name="enddate" size="10" max=<?php echo date('Y-m-d');?>></td>
<td><input type="submit" value="Search" name="Search" onClick="return check()"></td>
</tr>
</table>
</form>
<?php
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("abc_db",$con);
$limit = 20;
if (isset($_GET["page"])) {
$pn = $_GET["page"];
}
else {
$pn=1;
};
if(isset($_POST['Search'])){
$startdate1 = $_POST['startdate'];
echo "Start date : ".$startdate1", ";
$enddate1 = $_POST['enddate'];
echo "End date : ".$enddate1;
}
$start_from = ($pn-1) * $limit;
$serial = (($pn-1) * $limit) + 1;
$today1= date("Y/m/d");
$days14_ago = date('Y/m/d', mktime(0, 0, 0, date("m") , date("d") - 14, date("Y")));
if ($startdate1 !=Null) {
$sql = "SELECT * FROM hd where datearrival='$startdate1' LIMIT $start_from, $limit";
} else if ($enddate1 !=Null) {
$sql = "SELECT * FROM hd where datearrival='$enddate1' LIMIT $start_from, $limit";
} else {
$sql = "SELECT * FROM hd where datearrival between '$days14_ago' and '$today1' LIMIT $start_from, $limit";
}
if (($startdate !=Null) && ($enddate !=Null)) {
$sql = "SELECT * FROM hd where datearrival between '$startdate1' and '$enddate1' LIMIT $start_from, $limit";
}
$rs_result = mysql_query ($sql);
?>
<div class="container">
<button style="height:25px;width:70px;" onclick="window.location.reload(true);">Refresh</button>
<br>
<div>
<font face='cambria'><p><span style="display:inline-block; margin-left: 650px; ">
</span></p> </font>
<font face="Cambria" size="2"> <table class="table table-striped table-condensed table-bordered">
<thead>
<tr>
<th width="5%" valign="top">Sr#</th>
<th width="10%" valign="top">Date arrival</th>
<th width="10%" valign="top">Pno</th>
<th width="10%" valign="top">First name</th>
<th valign="top"></th>
<th valign="top"></th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysql_fetch_array($rs_result, MYSQL_ASSOC)) {
$pno1=$row['pno'];
$datearrival1=$row['datearrival'];
$sr_num = $serial++;
?>
<tr>
<td><?php echo $sr_num; ?></td>
<td><?php echo date("d/m/Y", strtotime($row['datearrival'])); ?></td>
<td><?php echo $row["pno"]; ?></td>
<td><?php echo $row["first_name"]; ?></td>
<td><p align="center">edit</font></td>
<td><p align="center">delete</font></td>
</tr>
<?php
};
?>
</tbody>
</table>
</font>
<div>
<ul class="pagination">
<?php
$sql = "SELECT COUNT(*) FROM hd where datearrival between '$startdate1' and '$enddate1'";
$rs_result = mysql_query($sql);
$row = mysql_fetch_row($rs_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
$k = (($pn+4>$total_pages)?$total_pages-4:(($pn-4<1)?5:$pn));
$pagLink = "";
if($pn>=2){
echo "<li><a href='qm.php?page=1'> << </a></li>";
echo "<li><a href='qm.php?page=".($pn-1)."'> < </a></li>";
}
for ($i=-4; $i<=4; $i++) {
if($k+$i==$pn)
$pagLink .= "<li class='active'><a href='qm.php?page=".($k+$i)."'>".($k+$i)."</a></li>";
else
$pagLink .= "<li><a href='qm.php?page=".($k+$i)."'>".($k+$i)."</a></li>";
};
echo $pagLink;
if($pn<$total_pages){
echo "<li><a href='qm.php?page=".($pn+1)."'> > </a></li>";
echo "<li><a href='qm.php?page=".$total_pages."'> >> </a></li>";
}
?>
</ul>
<div class="inline">
<input id="pn" type="number" min="1" max="<?php echo $total_pages?>"
placeholder="<?php echo $pn."/".$total_pages; ?>" required>
<button onclick="go2Page();">Go</button>
</div>
</div>
</div>
</div>
<script>
function go2Page()
{
var pn = document.getElementById("pn").value;
pn = ((pn><?php echo $total_pages; ?>)?<?php echo $total_pages; ?>:((pn<1)?1:pn));
window.location.href = 'qm.php?page='+pn;
}
/* start and end date- validation checks */
function check(){
var startdatea=document.getElementById("startdate").value;
var enddatea=document.getElementById("enddate").value;
if(Date.parse(startdatea)>Date.parse(enddatea)){
alert("Please select a different End Date.");
return false;
}
}
</script>
</body>
</html>

$_POST superglobal variable is populated by PHP when a POST HTTP request is processed. This is the case on the request for page 1.
However, your go2page() function is mutating location.href, which generates a GET HTTP request, and so does pagination links.
You should append your startdate and enddate params to the pagination URLs, to forward your params to the next/previous requests :
qm.php?page=<YOUR-PAGE-NUMBER>&startdate=<YOUR-START-DATE>&enddate=<YOUR-END-DATE>';
And use $_GET['startdate'] and $_GET['enddate] to retrieve those when processing GET requests.
More about $_POST https://www.php.net/manual/en/reserved.variables.post.php
More about GET AND POST HTTP requests : https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

There's an error in your isset($_POST['Search'])
your code:
if(isset($_POST['Search'])){
$startdate1 = $_POST['startdate'];
echo "Start date : ".$startdate1", ";
$enddate1 = $_POST['enddate'];
echo "End date : ".$enddate1;
}
possible working solution:
if(isset($_POST['Search'])){
$startdate1 = $_POST['startdate'];
echo "Start date : ".$startdate1.", ";
$enddate1 = $_POST['enddate'];
echo "End date : ".$enddate1;
}
Though I didn't try it yet, but I assume this is the cause, pagination in page2 will not work since the code is not executed after the error which is the pagination for page2.
EDIT: The . fixes things.
echo "Start date : ".$startdate1", ";
is different than
echo "Start date : ".$startdate1.", ";

Add values of your $_POST inside links and use them as $_GET so you would use both.
$startdate1=$enddate1=null; //to hide notice
if(isset($_POST['Search'])){
$startdate1 = $_POST['startdate'];
echo "Start date : ".$startdate1.", ";
$enddate1 = $_POST['enddate'];
echo "End date : ".$enddate1;
} else if (!empty($_GET['startdate']) && !empty($_GET['enddate'])){
$startdate1 = $_GET['startdate'];
echo "Start date : ".$startdate1.", ";
$enddate1 = $_GET['enddate'];
echo "End date : ".$enddate1;
}
$pagLink .= "<li><a href='qm.php?page=".($k+$i)."&startdate=".startdate1."&enddate=".$enddate1."'>".($k+$i)."</a></li>";
For your need:
$pagLink = "";
if($pn>=2){
echo "<li><a href='qm.php?page=1&startdate=".startdate1."&enddate=".$enddate1."'> << </a></li>";
echo "<li><a href='qm.php?page=".($pn-1)."&startdate=".startdate1."&enddate=".$enddate1."'> < </a></li>";
}
for ($i=-4; $i<=4; $i++) {
if($k+$i==$pn)
$pagLink .= "<li class='active'><a href='qm.php?page=".($k+$i)."&startdate=".startdate1."&enddate=".$enddate1."'>".($k+$i)."</a></li>";
else
$pagLink .= "<li><a href='qm.php?page=".($k+$i)."&startdate=".startdate1."&enddate=".$enddate1."'>".($k+$i)."</a></li>";
};
echo $pagLink;
if($pn<$total_pages){
echo "<li><a href='qm.php?page=".($pn+1)."&startdate=".startdate1."&enddate=".$enddate1."'> > </a></li>";
echo "<li><a href='qm.php?page=".$total_pages."&startdate=".startdate1."&enddate=".$enddate1."'> >> </a></li>";
}
That would help you to move dates to next page.
You need to set it to all paging links. Also you can make extra if statement to not pass empty GET
EDIT:
As I already told: You need to set it to all paging links. Also you can make extra if statement to not pass empty GET (that includes javascript)
function go2Page()
{
var pn = document.getElementById("pn").value;
pn = ((pn><?php echo $total_pages; ?>)?<?php echo $total_pages; ?>:((pn<1)?1:pn));
window.location.href = 'teztz.php?page='+pn+'&startdate=<?=startdate1;?>&enddate=<?=$enddate1;?>';
}

How to fix ReferenceError jQuery?

I cant find the error from my code,took me hours trying to figure it out but still cant make it work.
I've checked on the browser console and it shows as ascreenshot below :
Here's my code :
<?php
session_start();
use Phpml\Classification\SVC;
use Phpml\SupportVectorMachine\Kernel;
include "koneksi.php";
include "function.php";
if(!isset($_SESSION['username'])){
header('location:login.php');
}else{
$username = $_SESSION['username'];
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Pelatihan SVM</title>
<link rel="stylesheet" type="text/css" href="styles/2nd.css">
<script src="jquery-3.1.1.min.js"></script>
<?php
cekUser();
?>
</head>
<body>
<div class="tab">
<button class="menuTab" onclick="switchMenu(event, 'useDatabase')" id="admin">Data Mentah</button>
<button class="menuTab" onclick="switchMenu(event, 'term')" id="nonAdmin">Data Feature Selection</button>
</div>
<div id="useDatabase" class="tabContent">
<?php
$start=0;
$limit=100;
if(isset($_GET['id'])){
$id=$_GET['id'];
$start=($id-1)*$limit;
}else{
$id=1;
}
$q = mysqli_query($db, "SELECT * FROM dataset_latih LIMIT $start, $limit")or die(mysqli_error($db));
$no=$start+1;
$q1=mysqli_query($db, "SELECT COUNT('label') AS 'label positif' FROM dataset_latih WHERE label='positif'");
$row=mysqli_fetch_assoc($q1);
$positif=$row['label positif'];
$q2=mysqli_query($db, "SELECT COUNT('label') AS 'label negatif' FROM dataset_latih WHERE label='negatif'");
$row2=mysqli_fetch_assoc($q2);
$negatif=$row2['label negatif'];
?>
<h2 align="center">Dataset Latih</h2>
<h3 style="text-align: center;">Positif : <?php echo $positif; ?> | Negatif : <?php echo $negatif; ?> | Total : <?php echo $positif+$negatif; ?></h3>
<table border=1 align="center" class="h-header">
<thead>
<tr>
<th width="25">No.</th>
<th width="1200">Komentar</th>
<th width="70">Kelas</th>
</tr>
</thead>
<?php
while ( $result = mysqli_fetch_assoc($q) ) {
echo "<tr>";
echo "<td>" . $no . "</td>";
echo "<td class='kiri'>" . $result['komentar'] . "</td>";
echo "<td>" . $result['label'] . "</td>";
echo "</tr>";
$no++;
}
?>
</table>
<div class='wrapper'>
<button class='button' id="prosesData">Proses</button>
</div>
<div class="paging" style="text-align: center;">
<?php
$rows=mysqli_num_rows(mysqli_query($db, "SELECT * FROM dataset_latih"));
$total=ceil($rows/$limit);
if ($id>1) {
echo "<a href='?id=".($id-1)."' class='button' id='table1'>Previous </a>";
}
for ($i=1; $i <=$total ; $i++) {
if ($i==$id) {
echo "<span class='active'>$i</span>";
}else{
echo "<a href='?id=".$i."' id='table1'> ".$i." </a>";
}
}
if ($id!=$total) {
echo "<a href='?id=".($id+1)."' class='button' id='table1'> Next</a>";
}
?>
</div>
</div>
<div id="term" class="tabContent">
<h2 align="center">Term Latih</h2>
<?php
$start=0;
$limit=100;
if(isset($_GET['id1'])){
$id1=$_GET['id1'];
$start=($id1-1)*$limit;
}else{
$id1=1;
}
$q = mysqli_query($db, "SELECT * FROM data_latih_ready LIMIT $start, $limit")or die(mysqli_error($db));
$no=$start+1;
$rowPersentase = mysqli_fetch_assoc(mysqli_query($db, "SELECT * FROM selected_feature"))or die(mysqli_error($db));
$persentase = $rowPersentase['persentase'];
$td1 = '';
$td2 = '';
$td3 = '';
while ($row1 = mysqli_fetch_assoc($q)) {
$td1 .= "<td>$no</td>";
$td2 .= "<td>".$row1['term']."</td>";
$td3 .= "<td>".$row1['tf_idf_normalisasi']."</td>";
$no++;
}
?>
<h3 style="text-align: center;">Feature Selection : <?php echo $persentase; ?>%</h3>
<div class="v-header">
<table border="1" align="center" cellpadding="20">
<thead>
<tr>
<th>No.</th>
<?php echo $td1; ?>
</tr>
<tr>
<th>Term</th>
<?php echo $td2; ?>
</tr>
<tr>
<th>Normalisasi TF.IDF</th>
<?php echo $td3; ?>
</tr>
</thead>
</table>
</div>
<!-- <br> -->
<div class="paging2" style="text-align: center;">
<?php
$rows=mysqli_num_rows(mysqli_query($db, "SELECT * FROM data_latih_ready"));
$total=ceil($rows/$limit);
if ($id1>1) {
echo "<a href='?id1=".($id1-1)."' class='button' id='table2'>Previous </a>";
}
for ($i=1; $i <=$total; $i++) {
if ($i==$id1) {
echo "<span class='active'>$i</span>";
}else{
echo "<a href='?id1=".$i."' id='table2'> ".$i." </a>";
}
}
if ($id1!=$total) {
echo "<a href='?id1=".($id1+1)."' class='button' id='table2'> Next</a>";
}
?>
<div class="btnFeature">
<ul>
<li>
<button class="button" onclick="train();">Latih SVM</button>
</li>
<li>
<button class="button" id="featureSelection">Feature Selection</button>
</li>
</ul>
</div>
</div>
</div>
<div class="info" align="center">
<p>Tabel di atas merupakan tabel term dengan nilai yang telah disesuaikan dengan nilai <strong>Feature Selection</strong><br>
Silahkan menekan tombol <strong>Latih SVM</strong> jika <strong>Feature Selection</strong> sudah sesuai kebutuhan.
</p>
</div>
<?php
$cek = cekTabelToken();
?>
<script type="text/javascript">
// biar otomatis tab aktif waktu halaman svmLatih.php dibuka
document.getElementById("admin").click();
$(".info").hide();
$("#admin").click(function(){
$(".info").hide();
});
$("#nonAdmin").click(function(){
$(".info").show();
});
// var untuk cek tabel term kosong gk
var cek = "<?php echo "$cek"; ?>"
$("#prosesData").click(function(){
// kalau tabel term gk kosong, alert mau proses ulang gk
if (cek > 0) {
var conf = confirm("Preprocessing data latih sudah pernah dilakukan.\nIngin memproses ulang ?");
if (conf == true) {
$.ajax({
url: "action.php",
data:{action: "prosesUlangDataLatih"},
type: "POST",
// kalau berhasil kasih alert lalu redirect
success: function(){
alert("Preprocessing ulang selesai.");
setTimeout(function(){
window.location.href = 'featureSelection.php';
},1000);
}
});
}
}else{
// kalau tabel term kosong ya langsung aja proses
$.ajax({
url: "action.php",
data:{action: "preprocessing"},
type: "POST",
// kalau berhasil kasih alert lalu redirect
success: function(){
alert("Preprocessing selesai.");
setTimeout(function(){
window.location.href = 'featureSelection.php';
},1000);
}
});
}
});
// fungsi untuk switch tab
function switchMenu(evt, selectedMenu){
var i, tabContent, menuTab;
tabContent = document.getElementsByClassName("tabContent");
for (i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
menuTab = document.getElementsByClassName("menuTab");
for(i = 0; i < menuTab.length; i++){
menuTab[i].className = menuTab[i].className.replace(" active", "");
}
document.getElementById(selectedMenu).style.display = "block";
evt.currentTarget.className += " active";
}
// tombol feature selection
$("#featureSelection").click(function(){
window.location = "featureSelection.php";
});
// tombol latih SVM
function train(){
$.ajax({
type: "POST",
url: "action.php",
data:{
action: "trainDatabase"
},
success: function(){
alert("Model SVM sudah dibuat.");
},
error: function(){
alert("Error");
}
});
}
</script>
</body>
</html>
I hope someone can help me to find the error, I've been stuck here for hours. Thank you.

Google Chart Drilldown based on javascript search

I have a javascript search bar. My output gets displayed in the table form and when I do a javascript search, it shows me the result of my search. I need my graph to also show only the result of the search when i do a search in the search bar.
<body>
<?php
$colors = array('#e2431e', '#f1ca3a', '#6f9654', '#1c91c0','#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a','red','blue','yellow','green', 'darkgreen','pink');
//initalizing the query
$id = $_GET['id'];
$query = "SELECT * FROM new_default_reports WHERE id = '$id'";
$result = $conn->query($query);
$row = $result->fetch_assoc();
$row['sql_statement'] = stripslashes($row['sql_statement']);
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
title: "<?php echo $row['graph_title']; echo ' - Update/Delete';?>",
width: 800,
height: 550,
zIndex:'2000000'
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
</script>
<?php
if (isset($_POST['set'])){
$query = "UPDATE new_default_reports SET sql_statement ='{$_POST['sqlst']}', x_axis ='{$_POST['x']}', y_axis = '{$_POST['y']}' where id = $id";
$result = $conn->query($query);
//header("Refresh: 0; url=previewgraphs.php?id=".$id);//not needed
$id = $_GET['id'];
$query = "SELECT * FROM new_default_reports WHERE id = '$id'";
$result = $conn->query($query);
$row = $result->fetch_assoc();
$row['sql_statement'] = stripslashes($row['sql_statement']);
}
?>
<?php
if (isset($_POST['delete'])){
$query = "UPDATE new_default_reports SET deleted = 1 where id = $id";
$result = $conn->query($query);
header('Location: defaultreports.php');
}
?>
<br><input type="button" id="btnShow" class = "form-control" style="margin-top:12%;width:200px;border:2px solid darkgray;font-weight:bold;background-color:lightgray;" value="Edit Default Reports" />
<div id="dialog" align="center">
<form action = "" method="post">
<label> SQL Statement</label>
<textarea name="sqlst" style="width:100%;height:40%;" class = "form-control"><?php echo $row['sql_statement']?></textarea><br>
<label> X axis: </label>
<input type="text" name="x" class = "form-control" value="<?php echo $row['x_axis'] ?>"><br>
<label> Y axis: </label>
<input type="text" name="y" class = "form-control" value="<?php echo $row['y_axis'] ?>"><br>
<input type="submit" name = "set" value="Update" style="background-color:darkred;width:100px;color:white;font-weight:bold" />
<input type="submit" name = "delete" class="classname" value = "DELETE">
</form>
</div>
<br>
<div class="col-md-12">
<?php if(isset($_REQUEST['notify'])){ ?>
<div class="alert alert-success fade in">
×
A New Graph <?php echo $row['graph_title']; ?> has been created.
</div>
<?php } ?>
<?php
$query = stripslashes($row['sql_statement']);
$result = $conn_temp->query($query);
//$row1 = $result->fetch_assoc();
//generating graph now
$x_axis = str_replace('`', '', $row['x_axis']);
$y_axis = str_replace('`', '', $row['y_axis']);
?>
<script type="text/javascript">
google.load('visualization', '1.1', {'packages':['corechart','wordtree','gantt']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
<?php if($row['type_of_graph']==6){ ?>
data.addColumn('string', '<?php echo $x_axis ?>');
data.addColumn('string', '<?php echo $y_axis ?>');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
<?php
$temp = 'null';
$count = 1;
while($row1 = $result->fetch_assoc()){
?>
['<?php echo $row1["$x_axis"] ?>','<?php echo $row1["$y_axis"] ?>', null, new Date(2015, 0, <?php echo $count ?>),daysToMilliseconds(<?php echo $count ?>), <?php echo $count++ ?>, <?php
if($temp=='null') {
?>null
<?php
}else{
echo '"'.$temp.'"';
} ?>],
<?php
$temp = $row1["$x_axis"];
} ?>
]);
<?php }else{ ?>
data.addColumn('string', '<?php echo $x_axis ?>');
data.addColumn('number', '<?php echo $y_axis ?>');
data.addColumn({'type': 'string', 'role': 'style' });
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addRows([
<?php
$count = 1;
while($row1 = $result->fetch_assoc()){
// print_r($row1);
// echo $x_axis.' '.$row1["$x_axis"].' '.$y_axis.' '.$row1["$y_axis"];
if($count > 10)
$count = 1;
?>
['<?php echo $row1["$x_axis"] ?>',<?php echo $row1["$y_axis"] ?>,'<?php echo $colors[$count++] ?>', '<?php $float = floatval($row1["$y_axis"]); if($float && intval($float) != $float && strlen($float) > 3 && strpos($row1["$y_axis"],"-") == false && strpos($key,"sgd") !== false){ echo $row1["$x_axis"]; echo " : " ; $yourval = number_format($row1["$y_axis"],2); echo "$".$yourval;} elseif ($float && intval($float) == $float && strlen($float) > 3){echo $row1["$x_axis"]; echo " : " ; echo number_format($row1["$y_axis"],2);} else{echo $row1["$x_axis"]; echo " : " ; echo number_format($row1["$y_axis"]);}?>' ],
<?php } ?>
]);
<?php } ?>
// Set chart options
var options = {height: 'auto',
backgroundColor: 'transparent',
chartArea: {
backgroundColor: 'transparent'
},
width : 'auto',
title: '<?php echo $row["graph_title"];?>',
tooltip : {trigger: 'selection', isHtml: true},
is3D: true,
legend: 'none',
vAxis: {title: '<?php echo $row ["y_axis"] ?>'}, //yaxis
hAxis: {title: '<?php echo $row ["x_axis"] ?>'}, //xaxis
bar: { groupWidth: '40%' },
vAxis: {format: '#,###.##'}
};
// Instantiate and draw our chart, passing in some options.
<?php if($row['type_of_graph']==1) { ?>
var chart = new google.visualization.LineChart(document.getElementById('container1'));
<?php }elseif($row['type_of_graph']==2){ ?>
var chart = new google.visualization.PieChart(document.getElementById('container1'));
<?php }elseif($row['type_of_graph']==3){ ?>
var chart = new google.visualization.ColumnChart(document.getElementById('container1'));
<?php }elseif($row['type_of_graph']==4){ ?>
var chart = new google.visualization.AreaChart(document.getElementById('container1'));
<?php }elseif($row['type_of_graph']==5){ ?>
var chart = new google.visualization.WordTree(document.getElementById('container1'));
<?php }elseif($row['type_of_graph']==6){ ?>
var chart = new google.visualization.GanttChart(document.getElementById('container1'));
<?php } ?>
chart.draw(data, options);
//set default section for one column
chart.setSelection([{row:0, column:1}]);
}
</script>
<div id="container1" style="width:100%;"></div>
<style>div.google-visualization-tooltip { background-color: #CCCC99; font-weight:bold;border:2px solid darkgray;}</style>
<div class="panel panel-default" style="margin-top:2%;">
<div class="panel-body">
<table border="0" cellpadding="5" cellspacing="5" style="width:100%;">
<tbody>
<tr>
<td>Select Column :</td>
<td>
<select name="select_column" id="select_column" class="form-control">
<option value="">NULL</option>
<?php
//generate query and doing a search
$query = $row['sql_statement'];
$result = $conn_temp->query($query);
while($row1 = $result->fetch_assoc())
{
foreach((array)$row1 as $key=>$val)
{ ?>
<option value="<?php echo $key ?>"><?php echo $key ?></option>
<?php }
break;
}
?>
</select>
</td>
<td>Enter value to search :</td>
<td>
<input type="text" name="select_value" id="select_value" value="" class="form-control">
</td>
</tr>
</tbody>
</table>
<hr>
<table class="table table-striped table-bordered table-hover" id="dataTable_table">
<thead>
<tr>
<?php
//generate query
$query = $row['sql_statement'];
$result = $conn_temp->query($query);
while($row1 = $result->fetch_assoc())
{
foreach((array)$row1 as $key=>$val)
{
?>
<th><?php echo $key ?></th>
<?php
}
break;
}
?>
</tr>
</thead>
<tbody>
<?php
//generate query
$query = $row['sql_statement'];
$result = $conn_temp->query($query);
while($row1 = $result->fetch_assoc())
{ ?>
<tr>
<?php
foreach((array)$row1 as $key=>$val) //generate all the columns
{ ?>
<th><?php
$float = floatval($val);//checking for decimal if it is present
if($float && intval($float) != $float && strlen($float) > 3 ){ //checking for the criteria to place decimalpoints
$yourval = number_format($float,2); //placing it in 2 decimal points
echo $yourval;
}
elseif($float && intval($float) != $float && strlen($float) > 3 && strpos($val,'-') == false){ //checking for the criteria to place decimalpoints
$yourval = number_format($float,2); //placing it in 2 decimal points
echo $yourval;
}
elseif ($float && intval($float) == $float && strlen($float) > 3 && strpos($val,'-') == false){
$yourval = number_format($float,2);
echo $yourval;
}
else{
echo $val; //if does not fit the criteria then place just show the value
}
?></th>
<?php
} ?>
</tr>
<?php
} ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<style>
#dataTable_table thead {
background-color:#D2DCDF;
font-weight:bold;
text-transform:uppercase;
border:2px inset #D2DCDF;
padding:5px;
}
</style>
<link href="scripts/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<script src="scripts/dataTables/jquery.dataTables.js"></script>
<script src="scripts/dataTables/dataTables.bootstrap.js"></script>
<script>
$.fn.dataTable.ext.search.push(//search portion for graphs
function( settings, data, dataIndex ) {
var select_value = $('#select_value').val();
var select_column = $('#select_column').val();
var column_index = '';
//var column = data[1] || 0; // use data for the age column
if ( select_value == '' || select_column == '' )
{
return true;
}
else {
//get the column name of data table
var column = 0;
$('#dataTable_table thead tr th').each(function(){
if( $(this).text() == select_column.toString())
{
return false;
}
column = column + 1;
});
column = data[column] || 0;
if(column!==0 && column.toLowerCase().indexOf(select_value.toString().toLowerCase()) >= 0)
{
return true;
}
}
return false;
}
);
$(document).ready( function () {
$('#dataTable_table').dataTable( {
"bSort": false
} );
} );
$.fn.dataTableExt.sErrMode = 'throw';
$(document).ready(function () {
var table = $('#dataTable_table').DataTable();
$('#select_value').keyup( function() {
table.draw();
});
});
</script>
</body>

Issue in table sorting inside expandable table in codeigniter

I want to sort my table data in expandable table view, so I tried the below code:
Code Link
and my view is as in the below image
When I use this code and put in my site, it is not working in this type of view like expandable table view. The sorting is not being performed in the expandable table view. Any idea how can I make it work?
EDIT
stupidtable.js
// Stupid jQuery table plugin.
(function($) {
$.fn.stupidtable = function(sortFns) {
return this.each(function() {
var $table = $(this);
sortFns = sortFns || {};
sortFns = $.extend({}, $.fn.stupidtable.default_sort_fns, sortFns);
$table.data('sortFns', sortFns);
$table.on("click.stupidtable", "thead th", function() {
$(this).stupidsort();
});
});
};
// Expects $("#mytable").stupidtable() to have already been called.
// Call on a table header.
$.fn.stupidsort = function(force_direction){
var $this_th = $(this);
var th_index = 0; // we'll increment this soon
var dir = $.fn.stupidtable.dir;
var $table = $this_th.closest("table");
var datatype = $this_th.data("sort") || null;
// No datatype? Nothing to do.
if (datatype === null) {
return;
}
// Account for colspans
$this_th.parents("tr").find("th").slice(0, $(this).index()).each(function() {
var cols = $(this).attr("colspan") || 1;
th_index += parseInt(cols,10);
});
var sort_dir;
if(arguments.length == 1){
sort_dir = force_direction;
}
else{
sort_dir = force_direction || $this_th.data("sort-default") || dir.ASC;
if ($this_th.data("sort-dir"))
sort_dir = $this_th.data("sort-dir") === dir.ASC ? dir.DESC : dir.ASC;
}
$table.trigger("beforetablesort", {column: th_index, direction: sort_dir});
// More reliable method of forcing a redraw
$table.css("display");
// Run sorting asynchronously on a timout to force browser redraw after
// `beforetablesort` callback. Also avoids locking up the browser too much.
setTimeout(function() {
// Gather the elements for this column
var column = [];
var sortFns = $table.data('sortFns');
var sortMethod = sortFns[datatype];
var trs = $table.children("tbody").children("tr");
// Extract the data for the column that needs to be sorted and pair it up
// with the TR itself into a tuple. This way sorting the values will
// incidentally sort the trs.
trs.each(function(index,tr) {
var $e = $(tr).children().eq(th_index);
var sort_val = $e.data("sort-value");
// Store and read from the .data cache for display text only sorts
// instead of looking through the DOM every time
if(typeof(sort_val) === "undefined"){
var txt = $e.text();
$e.data('sort-value', txt);
sort_val = txt;
}
column.push([sort_val, tr]);
});
// Sort by the data-order-by value
column.sort(function(a, b) { return sortMethod(a[0], b[0]); });
if (sort_dir != dir.ASC)
column.reverse();
// Replace the content of tbody with the sorted rows. Strangely
// enough, .append accomplishes this for us.
trs = $.map(column, function(kv) { return kv[1]; });
$table.children("tbody").append(trs);
// Reset siblings
$table.find("th").data("sort-dir", null).removeClass("sorting-desc sorting-asc");
$this_th.data("sort-dir", sort_dir).addClass("sorting-"+sort_dir);
$table.trigger("aftertablesort", {column: th_index, direction: sort_dir});
$table.css("display");
}, 10);
return $this_th;
};
// Call on a sortable td to update its value in the sort. This should be the
// only mechanism used to update a cell's sort value. If your display value is
// different from your sort value, use jQuery's .text() or .html() to update
// the td contents, Assumes stupidtable has already been called for the table.
$.fn.updateSortVal = function(new_sort_val){
var $this_td = $(this);
if($this_td.is('[data-sort-value]')){
// For visual consistency with the .data cache
$this_td.attr('data-sort-value', new_sort_val);
}
$this_td.data("sort-value", new_sort_val);
return $this_td;
};
// ------------------------------------------------------------------
// Default settings
// ------------------------------------------------------------------
$.fn.stupidtable.dir = {ASC: "asc", DESC: "desc"};
$.fn.stupidtable.default_sort_fns = {
"int": function(a, b) {
return parseInt(a, 10) - parseInt(b, 10);
},
"float": function(a, b) {
return parseFloat(a) - parseFloat(b);
},
"string": function(a, b) {
return a.localeCompare(b);
},
"string-ins": function(a, b) {
a = a.toLocaleLowerCase();
b = b.toLocaleLowerCase();
return a.localeCompare(b);
}
};
})(jQuery);
my Script code
<script>
$(function(){
// Helper function to convert a string of the form "Mar 15, 1987" into a Date object.
var date_from_string = function(str) {
var months = ["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"];
var pattern = "^([a-zA-Z]{3})\\s*(\\d{1,2}),\\s*(\\d{4})$";
var re = new RegExp(pattern);
var DateParts = re.exec(str).slice(1);
var Year = DateParts[2];
var Month = $.inArray(DateParts[0].toLowerCase(), months);
var Day = DateParts[1];
return new Date(Year, Month, Day);
}
var table = $("table").stupidtable({
"date": function(a,b) {
// Get these into date objects for comparison.
aDate = date_from_string(angel);
bDate = date_from_string(beer);
return aDate - bDate;
}
});
table.on("beforetablesort", function (event, data) {
// Apply a "disabled" look to the table while sorting.
// Using addClass for "testing" as it takes slightly longer to render.
$("#msg").text("Sorting...");
$("table").addClass("disabled");
});
table.on("aftertablesort", function (event, data) {
// Reset loading message.
$("#msg").html(" ");
$("table").removeClass("disabled");
var th = $(this).find("th");
th.find(".arrow").remove();
var dir = $.fn.stupidtable.dir;
var arrow = data.direction === dir.ASC ? "↑" : "↓";
th.eq(data.column).append('<span class="arrow">' + arrow +'</span>');
});
});
</script>
When I run the above code and expand my view, in my stupidtable.js file there is code like
"string": function(a, b) {
return a.localeCompare(b);
},
In this code a.localeCompare(b); is getting null in expandable table view so it is not sorting well, and I also want sorting inside the data which table is expanded. Any idea how I can solve this issue?
html code
<table id="property" class="hometable table-bordered">
<thead>
<tr>
<th >#</th>
<th >Image</th>
<th width="12%" >
<a href="<?php echo base_url();?>property/propertylist?field=p_name&sort_by=<?php echo $sort;?>">
Property Name
<? if($sort == 'ASC' && $_GET['field']=='p_name') echo '<img src='.base_url("assets/plugins/data-tables/images/sort_asc.png").'>'; else if($sort == 'DESC'&& $_GET['field']=='p_name') { echo '<img src='.base_url("assets/plugins/data-tables/images/sort_desc.png").'>'; } else {echo '<img src='.base_url("assets/plugins/data-tables/images/sort_both.png").'>';}?>
</a>
</th>
<th >Address</th>
<th >
<a href="<?php echo base_url();?>property/propertylist?field=p_city&sort_by=<?php echo $sort;?>">
City
<? if($sort == 'ASC' && $_GET['field']=='p_city') echo '<img src='.base_url("assets/plugins/data-tables/images/sort_asc.png").'>'; else if($sort == 'DESC' && $_GET['field']=='p_city') { echo '<img src='.base_url("assets/plugins/data-tables/images/sort_desc.png").'>'; } else {echo '<img src='.base_url("assets/plugins/data-tables/images/sort_both.png").'>';}?>
</a>
</th>
<th >
<a href="<?php echo base_url();?>property/propertylist?field=p_state&sort_by=<?php echo $sort;?>">
State
<? if($sort == 'ASC' && $_GET['field']=='p_state') echo '<img src='.base_url("assets/plugins/data-tables/images/sort_asc.png").'>'; else if($sort == 'DESC' && $_GET['field']=='p_state') { echo '<img src='.base_url("assets/plugins/data-tables/images/sort_desc.png").'>'; } else {echo '<img src='.base_url("assets/plugins/data-tables/images/sort_both.png").'>';}?>
</a>
</th>
<th width="9%" >
<a href="<?php echo base_url();?>property/propertylist?field=p_country&sort_by=<?php echo $sort;?>">
Country
<? if($sort == 'ASC' && $_GET['field']=='p_country') echo '<img src='.base_url("assets/plugins/data-tables/images/sort_asc.png").'>'; else if($sort == 'DESC' && $_GET['field']=='p_country') { echo '<img src='.base_url("assets/plugins/data-tables/images/sort_desc.png").'>'; } else {echo '<img src='.base_url("assets/plugins/data-tables/images/sort_both.png").'>';}?>
</a>
</th>
<th >Zipcode</th>
<th colspan="2" >
<a href="<?php echo base_url();?>property/propertylist?field=unit_type&sort_by=<?php echo $sort;?>">
Property Type
<? if($sort == 'ASC' && $_GET['field']=='unit_type') echo '<img src='.base_url("assets/plugins/data-tables/images/sort_asc.png").'>'; else if($sort == 'DESC' && $_GET['field']=='unit_type') { echo '<img src='.base_url("assets/plugins/data-tables/images/sort_desc.png").'>'; } else {echo '<img src='.base_url("assets/plugins/data-tables/images/sort_both.png").'>';}?>
</a>
</th>
<th >Tenants</th>
<? if(!empty($query1)){?>
<th >Edit </th>
<th >Copy </th>
<th >Delete </th>
<? } else {?>
<th >Edit </th>
<th >Copy</th>
<th >Delete</th>
<? } ?>
</tr>
</thead>
<? if(empty($detail)) { ?>
<tr>
<td colspan="14">
<div class="tblalert alert-danger"><!--<button class="close" data-close="alert"></button>--><span>No property available.</span></div>
</td>
</tr>
<?php }else {
$i = 0;
foreach($detail as $pro) {
$i++;
?>
<tr id="trarrow<? echo $i;?>">
<? $admindata = $this->session->userdata('id');
$query = $this->db->query('SELECT r_country,amt_format FROM register where id="'.$admindata.'"');
foreach ($query->result() as $row)
{ $currency = $row->r_country ;
$amt_format = $row->amt_format ;
}
$curren = $this->db->query('SELECT * FROM country where id="'.$currency.'"');
foreach ($curren->result() as $row)
{ $curr = $row->currency ;
}
$unit = $this->db->query("SELECT * FROM property_unit WHERE p_id = '".$pro['p_id']."'");
$unitid = count($unit->result_array());
?>
<?php /*?><?php if($pro['unit_type'] == '0'){ ?>
<td align="center" style="cursor:pointer"><div class="arrow" id="arimg<?php echo $i?>"></div></td>
<? } else {?>
<td align="center" id="arrow<?php echo $i?>" onClick="trshow(<?php echo $i?>);" style="cursor:pointer"><div class="arrow" id="arimg<?php echo $i?>"></div></td>
<? } ?><?php */?>
<td><?php echo $i; ?></td>
<td align="center">
<? if(!empty($pro['p_path'])) { ?>
<a class="fancybox fancyboxiframe" href="<?php echo base_url('property/popup/'.$pro['p_id']);?>">
<img class="img-polaroid" src="http://worldofrental.s3.amazonaws.com/<? echo $pro['p_path'];?>" alt="Please Upload Image" width="50" height="50">
<? } else {?>
<img class="img-polaroid" src=<? echo base_url('upload/tenants/app_logo.png');?> alt="Upload Image" width="50" height="50">
<? }
?>
</a>
</td>
<td >
<a href="<? echo base_url('property/propertyedit/'.$pro['p_id']);?>">
<?php echo $pro['p_name']; ?>
</a>
</td>
<td ><?php echo $pro['p_address']; ?></td>
<td><?php echo $pro['p_city']; ?></td>
<td>
<?php $statename = $this->db->query("SELECT state_name FROM state WHERE state_id = '".$pro['p_state']."'"); $state_name = $statename->result_array(); echo $state_name[0]['state_name']; ?>
</td>
<td ><?php echo $pro['name']; ?></td>
<td><?php echo $pro['p_zipcode']; ?></td>
<?php if($pro['unit_type'] == '0'){ ?>
<td style="border-right:solid 0px !important; "></td>
<td align="right" style="border-left:solid 0px !important; "><?php echo 'Single Unit'; ?></td>
<? } else {?>
<td style="border-right:solid 0px !important; cursor:pointer; " id="arrow<?php echo $i?>" onClick="trshow(<?php echo $i?>);" >
<div class="arrow" id="arimg<?php echo $i?>"></div>
</td>
<td align="right" style="cursor:pointer; border-left:solid 0px !important; " id="arrow<?php echo $i?>" onClick="trshow(<?php echo $i?>);" >
<div id="arimg<?php echo $i?>"></div>
<a class="btn default btn-xs blue" >
<? echo 'Multi Unit' .' '.'('.$unitid.')';?>
</a>
<? } ?>
</a>
</td>
<td>
<a class="btn default btn-xs yellow" data-toggle="modal" onClick="Viewtenants(<? echo $pro['p_id'];?>); return false;" title="View Tenants" href="#myproperty-<? echo $pro['p_id'];?>">
View Tenants
</a>
</td>
<div id="myproperty-<? echo $pro['p_id'];?>" class="modal fade"></div>
<? if(!empty($query1)){?>
<td>
<a class="btn blue disabled" title="your service has been canceled" href="<?php echo base_url('property/propertyedit/'.$pro['p_id']);?>">
<i class="fa fa-edit"></i> Edit
</a>
</td>
<div id="myModal-<? //echo $pro->pid;?>" class="modal fade"></div>
<td>
<a class="btn green disabled" title="your service has been canceled" href="<?php echo base_url('property/copydata/'.$pro['p_id']);?>">
<i class="fa fa-copy"></i> Copy
</a>
</td>
<!--<td class="status" align="center"><a style="cursor:pointer" title="Trash" onClick="CheckUsername(<? echo $pro['p_id'];?>); return false;" id="status">
<div id="status-<? echo $pro['p_id'];?>">
</div> <i class="fa fa-trash-o"></i> Trash</a></td>-->
<td>
<a class="delete btn red disabled btn-xs black delete-confirm" delete-url="<?php echo base_url('property/status_change/'.$pro['p_id']);?>" data-confirm="Are you sure you want to trash this property?" title="your service has been canceled">
<i class="fa fa-trash-o"></i> Delete
</a>
</td>
<? } else {?>
<td>
<a class="btn default btn-xs blue" title="Edit/View" href="<?php echo base_url('property/propertyedit/'.$pro['p_id']);?>">
<i class="fa fa-edit"></i> Edit
</a>
</td>
<div id="myModal-<? //echo $pro->pid;?>" class="modal fade"></div>
<td align="center">
<a class="btn default btn-xs green" title="Edit/View" href="<?php echo base_url('property/copydata/'.$pro['p_id']);?>">
<i class="fa fa-copy"></i> Copy
</a>
</td>
<td>
<a class="btn red" data-toggle="modal" onClick="ViewStore(<? echo $pro['p_id'];?>); return false;" title="Delete" href="#myModal-<? echo $pro['p_id'];?>">
<i class="fa fa-trash-o"></i>
<font size="-1"> Delete</font>
</a>
</td>
<div id="myModal-<? echo $pro['p_id'];?>" class="modal fade"></div>
<? } ?>
</tr>
<tr id="subtr<?php echo $i; ?>">
<td colspan="14">
<? $unit_info = $this->db->query("SELECT * FROM unit_info WHERE p_id = '".$pro['p_id']."' AND isactive = '0' AND unit_id <> '0'");
$result = $unit_info->result_array();
?>
<? if(empty($result)) {?>
<? }else{ ?>
<div class="propertyreport-box">
<div class="title">Property Units</div>
<ul class="finacial-list">
<li><strong>Unit Name</strong></li>
<? foreach($unit_info->result() as $unit){?>
<li><span>
<? $unitname = $this->db->query("SELECT unit_name FROM property_unit WHERE unit_id = '".$unit->unit_id."'"); $unit_name = $unitname->result_array(); echo $unit_name[0]['unit_name'] ;?>
</span></li>
<? } ?>
</ul>
<ul class="finacial-list">
<li><strong>Rent </strong></li>
<? foreach($unit_info->result() as $unit){?>
<li><span>
<? if(!empty($unit->p_rent)){ echo $curr.' '.$unit->p_rent;}else { echo $curr.' '.'0.00';}?>
</span></li>
<? } ?>
</ul>
<ul class="finacial-list">
<li><strong>Bedrooms</strong></li>
<? foreach($unit_info->result() as $unit){?>
<li><span>
<? if(!empty($unit->p_bedroom)){ echo $unit->p_bedroom; }else { echo '0.0';}?>
</span></li>
<? } ?>
</ul>
<ul class="finacial-list">
<li><strong>Bathrooms</strong></li>
<? foreach($unit_info->result() as $unit){?>
<li><span>
<? if(!empty($unit->p_bathroom)){ echo $unit->p_bathroom; }else { echo '0.0';}?>
</span></li>
<? } ?>
</ul>
<ul class="finacial-list">
<li><strong>Sq. Ft</strong></li>
<? foreach($unit_info->result() as $unit){?>
<li><span>
<? if(!empty($unit->p_size)){ echo $unit->p_size; }else { echo '0.00';}?>
</span></li>
<? } ?>
</ul>
<ul class="finacial-list">
<li><strong>Rented</strong></li>
<? foreach($unit_info->result() as $unit){?>
<li><span><? echo $unit->p_isrent;?></span></li>
<? } ?>
</ul>
<ul class="finacial-list">
<li><strong>Tenants</strong></li>
<? foreach($unit_info->result() as $unit){?>
<li><span>
<a class="btn btn-xs yellow" data-toggle="modal" onClick="viewunittenants(<? echo $unit->unit_info_id;?>); return false;" title="Delete" href="#myproperty-<? echo $unit->unit_info_id;?>">
<font size="-2"> View Tenants</font>
</a>
</span></li>
<div id="myproperty-<? echo $unit->unit_info_id;?>" class="modal fade "></div>
<? } ?>
</ul>
<ul class="finacial-list">
<li><strong>Edit</strong></li>
<? foreach($unit_info->result() as $unit){?>
<li><span>
<a class="btn btn-xs yellow" title="Edit/View" href="<?php echo base_url('unit/unitedit/'.$unit->unit_info_id);?>">
<i class="fa fa-edit"></i>
<font size="-2"> Edit</font>
</a>
</span></li>
<? } ?>
</ul>
<ul class="finacial-list">
<li><strong>Delete</strong></li>
<? foreach($unit_info->result() as $unit){?>
<li><span>
<a class="btn btn-xs dark" data-toggle="modal" onClick="ViewStore1(<? echo $unit->unit_info_id;?>); return false;" title="Delete" href="#myModal1-<? echo $unit->unit_info_id;?>">
<i class="fa fa-trash-o"></i>
<font size="-2"> Delete</font>
</a>
</span></li>
<div id="myModal1-<? echo $unit->unit_info_id;?>" class="modal fade "></div>
<? } ?>
</ul>
</div>
<? } ?>
</td>
</tr>
<?php
} }
?>
</table>

You Just try Bootstrap datatables
Click the link