jQuery डेटाटेबल्स में दो पंक्तियां: पहली पंक्ति कॉलम नाम और सॉर्टिंग, दूसरी पंक्ति फ़िल्टरिंग

Question

datatables (1.7।?) के पुराने संस्करणों में, मैं दो पंक्ति कॉलम हेडर के साथ एक टेबल प्राप्त करने में सक्षम था, जहां क्रमबद्ध शीर्ष पंक्ति में किया गया था, और कॉलम नाम शामिल था, और इनपुट के साथ फ़िल्टरिंग और चयन दूसरी पंक्ति में किया गया था।

<table> 
    <thead> 
    <tr> 
     <th>Col 1</th> 
     <th>Col 2</th> 
     <th>Col 3</th> 
    </tr> 
    <tr> 
     <td><input type="text" /></td> 
     <td><select><option ....></select></td> 
     <td><input type="text" /></td>   
    </tr> 
    </thead> 
    <tbody>... 

नवीनतम (1.9.0) सहित उच्च संस्करणों के साथ,

, इस नहीं रह गया है, काम करता है क्योंकि sortable हेडर के बजाय दूसरी पंक्ति पहली पंक्ति के लिए लागू किया जा रहा है। क्या http://code.google.com/p/jquery-datatables-column-filter/ जैसे अतिरिक्त प्लग-इन का उपयोग किए बिना यह काम करने का कोई तरीका है?

Answer 1

jQuery डेटाटेबल्स ऑथर एलन जार्डिन ने यह करने के लिए एक आसान तरीका बताया: संस्करण 1.8 के बाद उपलब्ध bSortCellsTop विकल्प का उपयोग करें।

http://datatables.net/ref#bSortCellsTop

(http://datatables.net/ref)

http://datatables.net/forums/discussion/9046/two-rows-in-thead-first-row-for-sorting-second-row-for-column-filtering

jQuery DataTables के लिए +1!

Answer 2

मैं बेहतर समाधान के लिए इसके बारे में बहुत कुछ खोजता हूं और नीचे कोड बना देता हूं। यहां आप अपने टेबल हेडर सेल में संबंधित क्लास नामों का उपयोग कर कॉम्बो और सर्च बॉक्स के बीच निर्णय ले सकते हैं। सॉर्टिंग बटन और कॉलम नाम पहली पंक्ति में हैं, फ़िल्टरिंग विकल्प दूसरी पंक्ति में हैं।

<table id="example" width="100%"> 
    <thead> 
     <tr> 
      <th>Sıra</th> 
      <th>SKU</th> 
      <th>Stok Adı</th> 
      <th>Ana Kategori</th> 
      <th>Alt Kategori</th> 
      <th>Stok Adedi</th> 
      <th>Alt Limit</th> 
      <th>Son Giriş Tarihi</th> 
      <th>Son Giriş Adedi</th> 
      <th>Stok Yaşı</th> 
     </tr> 
     <tr class="filter"> 
      <th class="combo"></th> 
      <th class="combo"></th> 
      <th class="combo"></th> 
      <th class="search"></th> 
      <th class="search"></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>S49996</td> 
      <td>A4-Tech Q Klavye Siyah Ps2 (KM720)</td> 
      <td>Ofis Elektroniği</td> 
      <td>Klavye - Mouse</td> 
      <td>25</td> 
      <td>10</td> 
      <td>10-10-2015</td> 
      <td>78</td> 
      <td>89</td> 
     </tr> 
    </tbody> 
</table> 

<script type="text/javascript"> 
$(document).ready(function() { 

    var table = $('#example').DataTable({ 
    "bPaginate": false, 
    "bLengthChange": false, 
    "bFilter": true, 
    "bInfo": false, 
    "bAutoWidth": false, 
    "bSortCellsTop": true, 
     "scrollY": "300px", 
     "scrollCollapse": true, 
     initComplete: function() { 
      this.api().columns().every(function() { 
       var column = this; 
       var columnIndex = this.index(); 
       switch ($(".filter th:eq("+columnIndex+")").attr('class')) { 
            case 'combo': 
             var select = $('<select style="width:100%;"><option value=""></option></select>') 
              .appendTo($(".filter th:eq("+columnIndex+")").empty()) 
              .on('change', function() { 
               var val = $.fn.dataTable.util.escapeRegex(
                $(this).val() 
               ); 
               column 
                .search(val ? '^'+val+'$' : '', true, false) 
                .draw(); 
              }); 

             column.data().unique().sort().each(function (d, j) { 
              select.append('<option value="'+d+'">'+d+'</option>') 
             }); 
             break; 
            case 'search': 
             $(".filter th:eq("+columnIndex+")").html('<input type="text" />'); 

             $('input', $(".filter th:eq("+columnIndex+")")).on('keyup change', function() { 
              if (column.search() !== this.value) { 
               column 
                .search(this.value) 
                .draw(); 
              } 
             }); 
             break; 
       } 
      }); 
     }  
    }); 
}); 
</script>