jquery Data table sorting
Hi friends Toady we will learn about jquery TableSorter Plugin..and how to use TableSorter Plugin to sorting table row (ASC or DESC) dynamically.. |
| jquery Data table sorting |
$(function(){
$('#sortdata').tablesorter();
});
Here sortdata is Table id..
index.html
<html lang="en-US">
<head>
<title>Table Sorting In JQuery--codenair.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="https://bowercdn.net/c/jquery.tablesorter-2.1.4/js/jquery.tablesorter.min.js"></script>
</head>
<body>
<h1>Table Sorting In JQuery--codenair.com</h1>
<script type="text/javascript">
$(function(){
$('#sortdata').tablesorter();
});
</script>
<table id="sortdata" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Views</th>
<th>CTR</th>
</tr>
</thead>
<tbody>
<tr>
<td class="product">ASUS Vivobook</td>
<td>$800</td>
<td>5600</td>
<td>2.6%</td>
</tr>
<tr>
<td class="product">Apple X</td>
<td>$1200</td>
<td>24300</td>
<td>3.4%</td>
</tr>
<tr>
<td class="product">Sony HandyCam</td>
<td>$340</td>
<td>2900</td>
<td>4.5%</td>
</tr>
<tr>
<td class="product">Nokia 1020</td>
<td>$650</td>
<td>4350</td>
<td>4.4%</td>
</tr>
</tbody>
</table>
</body>
</html>
Now use some css codes to prettify table..
table {
border-collapse: collapse;
width: 40%;
}
th, td {
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
cursor:pointer;
background-color: #4CAF50;
color: white;
}
.product{
color:red;
font-style:italic;
font-weight:bold;
}
That's it Friends how to sort datatables in jquery..Thank You..
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.