Tips and Tricks

Jquery table sorter with Ajax update panel:
jQuery’s plugin Tablesorter to implement client side sorting in ASP.Net Gridview

• download and include the jQuery and TableSorter js files as follows


• Add the downloaded Js scripts script tag


• Include downloaded script in the page [type=“text/javascript” src=“scripts/jquery-latest.js"]


• Include downloaded script in the page [type=“text/javascript” src=“scripts/jquery.tablesorter.js”]
  
  

  Important:
  If you are using update panel, you need to consider using pageLoad function(javascript)
  

  
  function pageLoad(sender, args)
  {
     jQuery.fn.fixGridView = function()
     {
      if (jQuery(this).is('table') && this.find('thead').length == 0)
      {
       // No 'thead' section
       // add thead 
       //this.prepend("<thead></thead>");
       // remove first row from tbody, add it to thead
       this.find('tbody tr:first').remove().appendTo(this.find('thead'));
      }
     return this;
    };
  
     $(document).ready(function()
     {
       $("#<%= gvGridID.ClientID %>").fixGridView().tablesorter({
       widthFixed: true,
       widgets: ['zebra'],
       headers: {
       //Set the the column no(Stats with 0) with appropriate flag 
       //where you do not want the sorter functionality 
       //in the below sampale it is set to 4th column
       4: { sorter: false }
                     }
                })
             });
     }
  }
  

  
  
  

  The above code will set you to run the Jquery sorter method with in update panel, keep in mind the page load metjod of javascript is a must.

  Gridview:
  add this class in your grid view CssClass="tablesorter "

  
  

  In the above css class the style contains sorting image. Place the below code in your CSS file.
  table.tablesorter
  {
  border-style:none;
  border-color: #d0d0d0;
  font-size: 11px;
  font-family:arial;
  background-color: #CDCDCD;
  margin:10px 0pt 5px;
  width: 100%;
  text-align: left;
  float: left;
  }
  table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  background-color: #FDF299;
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  font-size: 8pt;
  padding: 4px;
  }
  table.tablesorter thead tr .header {
  background-image: url(bg.gif); /*(relative path)*/
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
  }

  that's all, you are ready to run the grid sorter :).