jquery Data table sorting - Web Development and Web Design Codes

Latest

Saturday, March 3, 2018

jquery Data table sorting

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
jquery Data table sorting
Below JavaScript Codes are used to sorting a Tables Data..
$(function(){
  $('#sortdata').tablesorter(); 

});
Here sortdata is Table id..

index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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..
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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..
Read more

Subscribe via email

Ads Here
BANNER 728X90
Newer Article Meta Tags Generator Using PHP Older Article add/remove multiple input fields dynamically with jquery
By v�o l�c
Labels:

No comments:

Post a Comment

Thank You for Your Comment

Note: Only a member of this blog may post a comment.

Subscribe to: Post Comments (Atom)