About Me

My photo

I am Ram, a Web Designer and Developer.   More than 4  years of experience in software development. Created complex back-end management systems including content management, e-commerce, customer relations and communication interfaces. The projects based on PHP in conjunction. PHP, SQL, JavaScript, AJAX, XHTML, CSS (Responsive), I help people make beautiful websites, functional applications and seamless user experiences.

Thursday, 1 September 2016

Table Sorting with jQuery Grid using PHP and MySQL


Click here to Download




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

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() {

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



<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.sorted {
background: #d4d4d4;

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;

Click here to Download

No comments:

Post a Comment