Sort (alphabetically) to ignore empty cells: dataTables

Question

So, the question has already been asked here , but the solution does not work for me (I can do something wrong). I want to sort the tables alphabetically ("type": "natural"), but I want the empty cells to be at the bottom (for desc and asc).

I tried the previous solution given by fbas:

jQuery.fn.dataTableExt.oSort['mystring-asc'] = function(x,y) { var retVal; x = $.trim(x); y = $.trim(y); if (x==y) retVal= 0; else if (x == "" || x == "&nbsp;") retVal= 1; else if (y == "" || y == "&nbsp;") retVal= -1; else if (x > y) retVal= 1; else retVal = -1; // <- this was missing in version 1 return retVal; } jQuery.fn.dataTableExt.oSort['mystring-desc'] = function(y,x) { var retVal; x = $.trim(x); y = $.trim(y); if (x==y) retVal= 0; else if (x == "" || x == "&nbsp;") retVal= -1; else if (y == "" || y == "&nbsp;") retVal= 1; else if (x > y) retVal= 1; else retVal = -1; // <- this was missing in version 1 return retVal; } 

Via:

 $(document).ready(function() { $('#classement').dataTable({ "aoColumns": [ null, null, { "type" : "mystring" }, { "type" : "mystring" }, null ] } ); } ); 

With a table like | N° | Edit | Song | Singer | Url | | N° | Edit | Song | Singer | Url | Sort only for song and artist.

The emty cells are at the bottom (as expected), but now the sorting has no logic (no alphabetical order, should I use another property in the dataTable?).

Anyone have a solution?

Edit: If we add a row dynamically, how to update the sort?

 $("#example").find('tbody') .append($('<tr>') .append($('<td>') .text('Boro') ) ); 

JsFiddle (use isim one)

Answer 1

UPDATE: inline fragment of the stack.

I think aoColumns is an obsolete option for DataTables version 1.9. However, you may need to use $. Extend to enable your custom sorting features.

Please take a look at the below fragment of the stack or this live jsfiddle demo . In a nutshell, I define the name column as a non-empty-string during table initialization. Then I extended the jQuery.fn.dataTableExt.oSort API with the sort functions non-empty-string-asc and non-empty-string-desc . See if this is really what you are looking for.

Stack Fragment:

 jQuery.extend( jQuery.fn.dataTableExt.oSort, { "non-empty-string-asc": function (str1, str2) { if(str1 == "") return 1; if(str2 == "") return -1; return ((str1 < str2) ? -1 : ((str1 > str2) ? 1 : 0)); }, "non-empty-string-desc": function (str1, str2) { if(str1 == "") return 1; if(str2 == "") return -1; return ((str1 < str2) ? 1 : ((str1 > str2) ? -1 : 0)); } } ); var dataTable = $('#example').dataTable({ columnDefs: [ {type: 'non-empty-string', targets: 0} // define 'name' column as non-empty-string type ] }); dataTable.api().row.add(['John Smith', 'Intern', 'San Francisco', 19, 2011/05/25, 62000]).draw(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> <link href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" rel="stylesheet"/> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td></td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td></td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> </tbody> </table> 

Answer 2

Ok, I found a solution for my second problem, see here

So destroy the dataTable just before my ajax request and rebuild it for success:

  else{ // Destroy dataTable $('#classement').dataTable().fnDestroy(); $.ajax({ type: "POST", url: "ajax.php", data: {}, success: function(msg){ // Reload dataTable with sorting $('#classement').dataTable({ columnDefs: [ {type: 'non-empty-string', targets: [2,3]} // define 'name' column as non-empty-string type ] }); } }); } 

Example: JsFiddle