Table Sorting with jQuery Grid using PHP and MySQL

 

Click here to Download

Demo

Demo

Index.php

<div class="example ex-1">
<table>
<thead>
<tr>
<th>Name</th>
<th>Post</th>
<th>Date of Birth</th>
<th class="number">Age</th>
<th class="no-sort">Photo</th>
</tr>
</thead>
<tbody>
<tr>
<td>Libero Ram</td>
<td>Software Developer</td>
<td data-sort-value="2">Aug 15, 1991</td>
<td>26</td>
<td><img src="http://img.scoop.it/VPAC30TM-Tk_tmRBHKqlLTl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9" width="50"></td>
</tr>
<tr>
<td>Ram Kumar</td>
<td>Designer</td>
<td data-sort-value="4">may 01, 1992</td>
<td>28</td>
<th><img src="https://s-media-cache-ak0.pinimg.com/564x/1f/4b/ef/1f4bef480d10f159c1a8f317a432da0b.jpg" width="50"></td>
</tr>
<tr>
<td>Libero</td>
<td>Php Developer</td>
<td data-sort-value="1">June 18, 1942</td>
<td>24</td>
<td><img src="http://d13pix9kaak6wt.cloudfront.net/background/users/l/i/b/liberoram_1409038556_33.jpg" width="50"></td>
</tr>
<tr>
<td>Ram</td>
<td>Testing</td>
<td data-sort-value="3">July 26, 1974</td>
<td>22</td>
<td><img src="https://liberoram.files.wordpress.com/2014/12/liberoram.png" width="50"></td>
</tr>
</tbody>
</table></div>
 
</div>

Java Script

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="jquery.tablesort.min.js"></ script>
<script type="text/javascript">

$(function() {
$('table').tablesort().data('tablesort');

$('thead th.number').data('sortBy', function(th, td, sorter) {
return parseInt(td.text(), 10);
});

});
</script>

Style.css

<style type="text/css">
body {
font: normal 14px/21px Arial, serif;
}
.example {
float: left;
width: 40%;
margin: 5%;
}
table {
font-size: 1em;
border-collapse: collapse;
margin: 0 auto;
}
table, th, td {
border: 1px solid #999;
padding: 8px 16px;
text-align: left;
}

th {
background: #f4f4f4;
cursor: pointer;
}

th:hover,
th.sorted {
background: #d4d4d4;
}

th.no-sort,
th.no-sort:hover {
background: #f4f4f4;
cursor: not-allowed;
}

th.sorted.ascending:after {
content: "  \2191";
}

th.sorted.descending:after {
content: " \2193";
}

.disabled {
opacity: 0.5;
}
</style>

Click here to Download