Sorting Data in Table

Submitted by azalea zenith on Friday, October 14, 2016 - 12:30.
In this tutorial, we are going to create Sorting Data in Table. This simple program is written using HTML and JavaScript jQuery. Using this program, users enable to bit by bit sorting numbers and letters in the existing data table on the web page. To sort data in the table, kindly click the <thead> to sort it whether ascending or descending. Check Live Demo below: Let's Create It In this tutorial, we need this link to finish the program to sort data in the table. Copy and paste to the HEAD tag of your page.
  1. <link rel="stylesheet" href="css/main.css">
  2. <script src="js/jquery-3.1.1.min.js"></script>
  3. <script src="js/plugins.js"></script>
Then, we have to create our simple table on the web page. Note: You must put a <thead> and <tbody> to your table.
  1. <div id="content">
  2.    <h1>Sorting Data in Table</h1>
  3.    <table id="sorting_dataTable">
  4.       <thead>
  5.          <th>Number</th>
  6.          <th>User Name</th>
  7.          <th>Encrypted Password</th>
  8.       </thead>
  9.       <tbody>
  10.          <tr>
  11.             <td>1</td>
  12.             <td>source codester</td>
  13.             <td>40793a24fd71acaacf7ae534d8784fa7</td>
  14.          </tr>
  15.          <tr>
  16.             <td>2</td>
  17.             <td>Jane Meyer</td>
  18.             <td>9a0c75a27f67d0496095d060f28fb8ed</td>
  19.          </tr>
  20.          <tr>
  21.             <td>3</td>
  22.             <td>John Doe</td>
  23.             <td>a0482e670829269e7598d81bf28c13ac</td>
  24.          </tr>
  25.          <tr>
  26.             <td>4</td>
  27.             <td>John Meyer</td>
  28.             <td>a0482e6708292afdsdfsd81bf28c13ac</td>
  29.          </tr>
  30.          <tr>
  31.             <td>5</td>
  32.             <td>Augustus Caesar</td>
  33.             <td>a0482e67xdkjvhfsdkj234241bf28c13ac</td>
  34.          </tr>
  35.       </tbody>
  36.    </table>
  37. </div>
Copy and paste this simple script below to your table. We are going to use this script for totally run the program. Therefore, the user enables to sort data in the table.
  1. <script>
  2.     $(document).ready(function() {
  3.         $('#sorting_dataTable').sortTable();
  4.     });
  5. </script>
This simple jQuery script below used to sort data in the table of the web page. Using this script the <thead> of the table is clickable to sorting data.
  1. var methods = {
  2.     init: function() {
  3.         var $this = this;
  4.         return this.find('thead th').each(function(x) {
  5.             var th = $(this);
  6.             (function(i) {
  7.                 $(th).bind('click', function() {
  8.                     sortListener(i, $this);
  9.                 }).css('cursor', 'pointer');
  10.             })(x);
  11.         });
  12.     },
  13.     destroy: function() {
  14.         return this.find('thead th').each(function() {
  15.             $(this).unbind();
  16.         })
  17.     }
  18. }
Check Live Demo below: Output Data in the table sort as descending. Result
Tags
Sorting Data in Table
Sorting Data Table
Sorting Table
data table

Add new comment

About text formats
  • 55 views