रिक्त कक्षों को अनदेखा करने के लिए छंटनी (वर्णमाला क्रम): डेटाटेबल

Question

इसलिए सवाल पहले से ही here से पूछा गया है, लेकिन समाधान मेरे लिए काम नहीं करता है (मैं कुछ गलत कर सकता हूं)। मैं वर्णमाला क्रम ("प्रकार": "प्राकृतिक") द्वारा अपनी तालिकाओं को सॉर्ट करना चाहता हूं, लेकिन मैं खाली कोशिकाओं को नीचे (नीचे और एसी के लिए) चाहता हूं। केवल गीत और गायक के वर्गीकरण में | N° | Edit | Song | Singer | Url | की तरह एक मेज के साथ

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

:

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

के साथ:

मैं पिछले समाधान fbas द्वारा दिए गए की कोशिश की।

एम्टी कोशिकाएं नीचे की ओर हैं (अपेक्षित के रूप में) लेकिन अब सॉर्टिंग में कोई तर्क नहीं है (कोई वर्णमाला क्रम नहीं, क्या मुझे डेटाटेबल में किसी अन्य प्रॉपर्टी का उपयोग करना चाहिए?)।

क्या किसी के पास कोई समाधान है?

संपादित करें: यदि हम गतिशील रूप से एक पंक्ति जोड़ते हैं, तो सॉर्टिंग को रीफ्रेश कैसे करें?

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

JsFiddle (use isim's one)

Answer 1

अद्यतन: एंबेडेड ढेर स्निपेट।

मुझे लगता है कि aoColumns डेटाटेबल्स v 1.9 के लिए legacy option है। कहा जा रहा है कि, आपको अपने कस्टम सॉर्ट फ़ंक्शंस को शामिल करने के लिए $.extend का उपयोग करने की आवश्यकता हो सकती है।

कृपया नीचे स्टैक स्निपेट, या jsfiddle पर यह लाइव डेमो देखें। संक्षेप में, मैं तालिका initalization के दौरान कॉलम non-empty-string के रूप में परिभाषित करता हूं। फिर मैंने jQuery.fn.dataTableExt.oSort एपीआई को non-empty-string-asc और non-empty-string-desc सॉर्टिंग फ़ंक्शंस के साथ बढ़ाया। देखें कि यह वही है जो आप खोज रहे हैं।

ढेर स्निपेट:

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

मैं अपने दूसरी समस्या के लिए एक समाधान पाया ठीक है, Here

तो बस अपना ajax अनुरोध से पहले DataTable को नष्ट करने और यह पुनर्निर्माण देखना सफलता पर:

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

उदाहरण: JsFiddle