Sorting HTML table using jQuery Table Sorter plugin

Pritty June 4, 2016 CSS, HTML, jQuery, PHP, Web Development Leave a comment 634 Views

Good Morning,
Today we discuss one different topic related to Sorting HTML table using jQuery Table Sorter plugin. I got a request from one of my reader about how to sort table data based on columns.
Their are two types of sorting are available. They are:

Server Side
Client Side

In here,the client side sorting are used for sorting table columns using table sorter. This technique is developed in a responsive bootstrap table.

Page Structure

HTML
CSS
jQuery

The HTML

		<div id="mhead">
		<h2>Sorting HTML table using jQuery </h2>
	</div>
	<table id="tbl" cellspacing="0" cellpadding="0">
    <thead>
      <tr>
        <th class="header"><span>Language</span></th>
        <th class="header"><span>Proficiency</span></th>
        <th class="header"><span>Mark</span></th>
       </tr>
    </thead>
    <tbody>
      <tr>
        <td>English</td>
        <td>Advance</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Malayalam</td>
        <td>Expert</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Hindi</td>
        <td>Advance</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Tamil</td>
        <td>Advance</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Kannada</td>
        <td>Advance</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Spanish</td>
        <td>Intermediate</td>
        <td>1</td>
      </tr>
    </tbody>
	</table>

<h2>Sorting HTML table using jQuery </h2>

</div>

<thead>

<tr>

<th class="header"><span>Language</span></th>

<th class="header"><span>Proficiency</span></th>

</tr>

</thead>

<tbody>

<tr>

<td>English</td>

<td>Advance</td>

</tr>

<tr>

<td>Malayalam</td>

<td>Expert</td>

</tr>

<tr>

<td>Hindi</td>

<td>Advance</td>

</tr>

<tr>

<td>Tamil</td>

<td>Advance</td>

</tr>

<tr>

<td>Kannada</td>

<td>Advance</td>

</tr>

<tr>

<td>Spanish</td>

<td>Intermediate</td>

</tr>

</tbody>

</table>

The CSS

In here, using responsive table structure is used for performing this operations.

<style>
table, th, td
{
border: 1px solid black;
}

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

td
{
padding:15px;
}

table 
{
width:100%;
}
th
{
height:50px;
}
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
#tbl thead tr th.headerSortUp span {
  background-image: url('up-arrow.png');
  background-repeat:no-repeat;
}
#tbl thead tr th.headerSortDown span {
  background-image: url('down-arrow.png');
background-repeat:no-repeat;
  }
#tbl thead tr th{
cursor: pointer;}  

#tbl thead tr th span { 
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
}

#mhead{
  min-height: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
		  text-align: center;
		  
}
#myad{
width: 728px;
position: relative;
margin : auto;
}
</style>

<style>

table, th, td

{

border: 1px solid black;

}

table

{

border-collapse:collapse;

}

table,th, td

{

border: 1px solid black;

}

{

padding:15px;

}

table

{

width:100%;

}

{

height:50px;

}

table, td, th

{

border:1px solid green;

}

{

background-color:green;

color:white;

}

#tbl thead tr th.headerSortUp span {

background-image: url('up-arrow.png');

background-repeat:no-repeat;

}

#tbl thead tr th.headerSortDown span {

background-image: url('down-arrow.png');

background-repeat:no-repeat;

}

#tbl thead tr th{

cursor: pointer;}

#tbl thead tr th span {

padding-right: 20px;

background-repeat: no-repeat;

background-position: 100% 100%;

}

#mhead{

min-height: 20px;

margin-bottom: 20px;

background-color: #f5f5f5;

border: 1px solid #e3e3e3;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);

-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);

box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);

text-align: center;

}

#myad{

width: 728px;

position: relative;

margin : auto;

}

</style>

The jQuery

For sorting table content first include table_sort plugin into our web page.

	<script src="my_script.js"></script>
	<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="table_sort.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#tbl').tablesorter(); 
		});
	</script>

$(function(){

$('#tbl').tablesorter();

});

</script>

The tablesorter helps you to dynamically sort the information.

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.