DataTables

DataTables Examples

by LeGEC

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css">
<table id="example">
   <thead>
      <tr>
         <th>ID</th>
         <th>Name</th>
     </tr>
   </thead>
   <tbody>
     <tr><td><a>5.2.18</a></td><td>John</td></tr>
     <tr><td><a>5.2.1</a></td><td>Janet</td></tr>
     <tr><td><a>5.2.2</a></td><td>Jack</td></tr>
     <tr><td><a>5.1.3</a></td><td>Jack</td></tr>
     <tr><td><a>5.1</a></td><td>Jack</td></tr>
     <tr><td><a>5.0.10</a></td><td>Jack</td></tr>
     <tr><td><a>5.0.10.2</a></td><td>Jack</td></tr>
     <tr><td><a>foobar</a></td><td>Jill</td></tr>
     <tr><td><a>unknown</a></td><td>Jill</td></tr>
     <tr><td><a>foobar</a></td><td>Jill</td></tr>
  </tbody>
</table>

JavaScript

(function($){
  let version = {
     extract: function(str)  {
       let chunks = str.split('.');

       let isInts = chunks.length > 0
                 && chunks.every( (itm) => itm.match(/^[0-9]+$/) );
       if (!isInts) {
           return str;
       }
			
       return chunks.map( (s) => +s );
     },
     compare: function (a,b) {
          let isArrA = $.isArray(a), isArrB = $.isArray(b);
          if ( isArrA != isArrB ) {
             return isArrA ? -1 : 1;
          }

          if (!isArrA) {
              return ((a < b) ? -1 : ((a > b) ? 1 : 0));
          }

          for (i in a) {
            // if a is longer than b,
            if (i >= b.length) {
              return 1;
            }
            if (a[i] != b[i]) {
              return (a[i] < b[i]) ? -1 : 1;
            }
          }

	        // if reached here after above loop : all cells up to (a.length-1) have same values
          // if both arrays have same length, this means both values are equal
          if (a.length === b.length) {
             return 0;
          }
          
          // otherwise : a is shorter than b, and starts with same items :
          // a is smaller
          return -1;        
     }
  };

  $.extend( $.fn.dataTableExt.oSort, {
      "version-pre": function ( a ) {
          return version.extract( $(a).text() );
      },

      "version-asc": function ( a, b ) {
          return version.compare(a, b);
      },

      "version-desc": function ( a, b ) {
          return -version.compare(a, b);
      }
  } );
}(jQuery));


var table = $('#example').DataTable({
   columnDefs : [
     { type: 'version', targets: 0 }
  ]
})