i want to code a table with searching sorting and pagination. and all this three operation should connected with each other. i have write a code for search and pagination but i am not able to add sorting logic in that can anybody please guide a easy way to perform this this is my code
<?php
include 'dbconfig.php';
$records_per_page=10;
$name = "";
$email= "";
$queryCondition = "";
if(!empty($_POST["search"])) {
foreach($_POST["search"] as $k=>$v){
if(!empty($v)) {
$queryCases = array("name","email");
if(in_array($k,$queryCases)) {
if(!empty($queryCondition)) {
$queryCondition .= " AND ";
} else {
$queryCondition .= " WHERE ";
}
}
switch($k) {
case "name":
$name = $v;
$queryCondition .= "username LIKE '" . $v . "%'";
break;
case "email":
$email = $v;
$queryCondition .= "user_email LIKE '" . $v . "%'";
break;
}
}
}
}
//if(isset($_POST["order"]))
//{
// $order=$_POST["order"];
//
//}
// else{
// $order="user_id";
//}
//if(isset($_POST["by"])){
// $by=$_POST["by"];
//if($by=="asc" & !isset($_POST["page"])){
// $by="desc";
//
// }else if($by=="desc" & !isset($_POST["page"]))
// {
//
// $by="asc";
//
// }
// else
// {
// $by=$_POST["by"];
// }
//}
//else
//{
// $by="asc";
//}
$orderby = " ORDER BY $order $by";
$sql = "SELECT * FROM tbl_register " . $queryCondition;
$href = 'demo2.php';
$perPage = 10;
$page = 1;
if(isset($_POST['page'])){
$page = $_POST['page'];
}
$start = ($page-1)*$perPage;
if($start < 0) $start = 0;
$query = $sql . $orderby . " limit " . $start . "," . $perPage;
// $result = $db_handle->runQuery($query);
$result = mysql_query($query);
while($row=mysql_fetch_array($result)) {
$resultset[] = $row;
}
if(!empty($resultset)) {
$resultset["perpage"] = showperpage($sql, $perPage, $href,$order,$by);
}
?>
<html>
<head>
</head>
<body>
<div id="user-grid">
<form name="frmSearch" method="post" action="demo2.php">
<div class="search-box">
<p><input type="text" placeholder="Name" name="search[name]" class="demoInputBox" value="<?php echo $name; ?>" /><input type="text" placeholder="Email" name="search[email]" class="demoInputBox" value="<?php echo $email; ?>" /><input type="submit" name="go" class="btnSearch" value="Search"><input type="reset" class="btnSearch" value="Reset" onclick="window.location='demo2.php'"></p>
</div>
<table id="tbl">
<thead>
<tr>
<!-- <th><a href='demo2.php?by=<?php// echo $by; ?>&order=user_id'>Id</a></th>
<th><a href='demo2.php?by=<?php// echo $by; ?>&order=username'>UserName</a></th>
<th><a href='demo2.php?by=<?php// echo $by; ?>&order=user_email'>Email</a></th>
<th><a href='demo2.php?by=<?php// echo $by; ?>&order=user_contact'>Phno.</a></th>-->
<th><input type="submit" name="id" value="user_no" class="btn-link"/></th>
<th><input type="submit" name="username" value="username" class="btn-link"/></th>
<th><input type="submit" name="user_email" value="user_email" class="btn-link"/></th>
<th><input type="submit" name="user_contact" value="user_contact" class="btn-link"/></th>
</tr>
</thead>
<tbody>
<?php
foreach($resultset as $k=>$v) {
if(is_numeric($k)) {
?>
<tr>
<td><?php echo $resultset[$k]["user_no"]; ?></td>
<td><?php echo $resultset[$k]["username"]; ?></td>
<td><?php echo $resultset[$k]["user_email"]; ?></td>
<td><?php echo $resultset[$k]["user_contact"]; ?></td>
</tr>
<?php
}
}
if(isset($resultset["perpage"])) {
?>
<tr>
<td colspan="6" align=right> <?php echo $resultset["perpage"]; ?></td>
</tr>
<?php } ?>
<tbody>
</table>
</form>
</div>
</body>
</html>
<?php
function perpage($count, $per_page = '10',$href) {
$output = '';
if(!isset($_POST["page"])) $_POST["page"] = 1;
if($per_page != 0)
$pages = ceil($count/$per_page);
if($pages>1) {
for($i=1; $i<=$pages; $i++) {
if($_POST["page"] == $i)
$output = $output . '<span id='.$i.' >'.$i.'</span> ';
else
$output = $output . '<input type="submit" name="page" value="' . $i . '" />';
//$output=$output.'<a href="demo2.php?page='.$i.'&by=$by&order=$order">' .$i. ' </a> ';
}
}
return $output;
}
function showperpage($sql, $per_page = 10, $href,$order,$by) {
$result = mysql_query($sql);
$count = mysql_num_rows($result);
$perpage = perpage($count, $per_page,$href);
return $perpage;
}
?>
<style>
#tbl
{
width:500px;
border:1px solid #00a2d1;
margin-top:10px;
}
#tbl tr {
background: #fff
}
#tbl td{
border:1px solid #00a2d1
}
#tbl th
{
background: #00a2d1;
border:1px solid #fff
}
#frmSearch button[type="submit"]{
background-color:#00a2d1;
color:#fff
}
.btn-link{
border:none;
outline:none;
background:none;
cursor:pointer;
color:#0000EE;
padding:0;
text-decoration:underline;
font-family:inherit;
font-size:inherit;
}
</style>
how to add sort logic in this i want when user click on table header it should be switch between asc n desc and in every table header.
Without plugin, you should use your own javascript. I found this fiddle . This might help
function sortTable(table, col, reverse) {
var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
i;
reverse = -((+reverse) || -1);
tr = tr.sort(function (a, b) { // sort rows
return reverse // `-1 *` if want opposite order
* (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
.localeCompare(b.cells[col].textContent.trim())
);
});
for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}
function makeSortable(table) {
var th = table.tHead, i;
th && (th = th.rows[0]) && (th = th.cells);
if (th) i = th.length;
else return; // if no `<thead>` then do nothing
while (--i >= 0) (function (i) {
var dir = 1;
th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
}(i));
}
function makeAllSortable(parent) {
parent = parent || document.body;
var t = parent.getElementsByTagName('table'), i = t.length;
while (--i >= 0) makeSortable(t[i]);
}
window.onload = function () {makeAllSortable();};
Check datatables working example https://datatables.net/examples/basic_init/zero_configuration.html
The Javascript shown below is used to initialise the table shown in this example:
-------------Javascript-----------------------
$(document).ready(function() {
$('#example').DataTable();
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
//code.jquery.com/jquery-1.12.0.min.js
https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js
-------------------HTML---------------------------
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$385,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$198,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$725,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$237,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
</tbody>
</table>
-------------CSS-----------------------
The following CSS library files are loaded for use in this example to provide the styling of the table:
https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css
Hope this will help you
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.