Sorting Tables and Paging with jQuery

Our latest webapplications called for client-sided table sorting and paging. Not just any boring numerical or alphabetical sorting, but also funky “define-our-own” sorting with only parts of the data displayed in the table cells. After testing various jQuery (a library we were already using on the project) table sorting plugins, we decided to stick with the very simple but extendable tablesorter and paging plugin (http://tablesorter.com/docs/).

Here are some of the difficulties and solutions we encountered along the way:

1. Sorting empty cells
   Empty cells should always come in last in the sorting. For us there was no point in having cells with no data in them ever come out on top while sorting ascending or descendingly.
   Solution: We defined our own parser (tablesorter.addParser) and changed the parsing value for empty cells to Number.NEGATIVE_INFINITY. We also needed to alter the original jquery.tablesorter.js so that this number would always come out on the bottom.

   jquery.tablesorter.js, line 474:

   function sortNumeric(a,b) {
     // if Number.NEGATIVE_INFINITY (empty cell), always move to bottom
     if ( a === Number.NEGATIVE_INFINITY )
       return 1;
     else if ( b === Number.NEGATIVE_INFINITY )
       return -1; // force to bottom
   
     return a-b;
   };

   Our own parser:

   // empty cells marked (so that they will always be last in the sorting)
   if ((returnValue == undefined) || (returnValue.indexOf(" ") != -1) || (returnValue == "")) {
     return Number.NEGATIVE_INFINITY; //Number.POSITIVE_INFINITY;
   }
   

2. Sorting our own numbers
   The numbers in our data are formatted every which way, we simply decided to strip all “.” and “,” from them and to then enable generic number sorting.

   // number sorter
   $.tablesorter.addParser({
       // set a unique id
       id: 'number_with_dot',
       is: function(s) {
       // return false so this parser is not auto detected
       return false;
     },
     format: function(s) {
   
       // remove "." and "," from string
       var returnValue = s.replace(/[\ ,\.,\,,\%]/g, '').split("<")[0];
   
       // empty cells marked (so that they will always be last in the sorting)
       if ((returnValue == undefined) || (returnValue.indexOf(" ") != -1) || (returnValue == "")) {
         return Number.NEGATIVE_INFINITY; //Number.POSITIVE_INFINITY;
       }
   
       return returnValue;
     },
     // set type, either numeric or text
     type: 'numeric'
   });
   

3. Sorting our dates
   We needed to split up our date Strings and reduce them to numbers to make them sortable.

   // message date sorter dd/mm/yyy or maybe dd.mm.yyyy
   $.tablesorter.addParser({
     id: 'msg_date',
     is: function(s) {
       return false; // return false so this parser is not auto detected
     },
     format: function(s) {
   
       var splitChar = "."; // dd.mm.yyyy
   
       if (s.indexOf("/") != -1) {
         splitChar = "/"; // dd/mm/yyyy
       }
   
       // reverse number to yyyymmdd
       var splitArray = s.split(splitChar);
       if (splitArray.length = 3) {
         return Number(splitArray[2] + "" + splitArray[1] + splitArray[0]);
       }
   
       return -1;
     },
     type: 'numeric'
   });
   

After all this sorting of data, we were glad to get the Paging plugin working without much adjustment. Yay for jQuery and it’s plugings!

Related Posts

No related posts.