Ordinamento (in ordine alfabetico) per ignorare le celle vuote: dataTables

Question

Quindi la domanda è già stata richiesta here, ma la soluzione non funziona per me (potrei fare qualcosa di sbagliato). Voglio ordinare le mie tabelle in ordine alfabetico ("tipo": "naturale"), ma voglio che le celle vuote siano in fondo (per desc e asc).

Ho provato la precedente soluzione proposta dal 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 == " ") retVal= 1; 
    else if (y == "" || y == " ") 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; 
} 

Con:

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

Con una tabella come | N° | Edit | Song | Singer | Url | Ordinando solo su Song e Singer.

Le celle emty sono in fondo (come previsto) ma ora l'ordinamento non ha logica (nessun ordine alfabetico, dovrei usare un'altra proprietà in dataTable?).

Qualcuno ha una soluzione?

Modifica: Se aggiungiamo una linea dinamicamente, come aggiornare l'ordinamento?

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

JsFiddle (use isim's one)

Answer 1

UPDATE: incorporata Pila Snippet.

Penso che il aoColumns sia un legacy option per DataTables v 1.9. Detto questo, potresti anche aver bisogno di usare $.extend per includere le tue funzioni di ordinamento personalizzate.

Si prega di dare un'occhiata allo Stack Snippet qui sotto, o questa demo dal vivo su jsfiddle. In poche parole, definisco la colonna name come il tipo non-empty-string durante l'inizializzazione della tabella. Quindi ho esteso l'API jQuery.fn.dataTableExt.oSort con le funzioni di ordinamento non-empty-string-asc e non-empty-string-desc. Vedi se questo è quello che stai cercando.

Stack Snippet:

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 ho trovato una soluzione per il mio secondo problema, vedere Here

Così distruggono il dataTable poco prima che la mia richiesta Ajax e ricostruirlo in caso di successo:

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 
        ] 
       }); 
      } 
     }); 
    } 

Esempio: JsFiddle