Блог

Главная - Вопросы по программированию - Встроенная сортировка таблиц данных Jquery не работает

Встроенная сортировка таблиц данных Jquery не работает

#javascript #jquery #datatable #datatables

#javascript #jquery #datatable #таблицы данных

Вопрос:

Встроенная сортировка столбцов данных не работает. При нажатии на заголовок в любом столбце отображается 0 строк.

Я пытался использовать aasorting, columndefs, orderable, которые работали для других, но в моем случае это не сработало.

Я выяснил, что сортировка по столбцам не работает из-за функции $.fn.DataTable.ext.search.push()$fn.DataTable.ext.search.push(), потому что, когда я ее комментирую, сортировка по столбцам работает, что означает, что из-за этой функции создается некоторая зависимость. Но это часть кода, поэтому я не могу ее удалить. Пожалуйста, предоставьте предложения по улучшению этой работы. 

 var table = $('#example').DataTable({
  "bLengthChange": false,
  //searching: false,
  pageLength: 3,
  dom: 'tip'
});
  
$.fn.dataTable.ext.search.push(function( settings, data, dataIndex ) {
    
    var filterCategory= $("#cato option:selected").text().toUpperCase();
    var filterSubCategory= $("#subo option:selected").text().toUpperCase();
    var subCategory = String(data[2]).toUpperCase();
    var category = String(data[3]).toUpperCase();
    
    if(filterSubCategory != "-SELECT SUBCATEGORY-") {
        if ( filterCategory == category amp;amp; filterSubCategory == subCategory)
             return true;
        }
        else if(filterCategory != "-SELECT CATEGORY-") {
            if ( filterCategory == category)
             return true;
        }        
        return false;
    }
);

$('#cato').on('change', function() {
  $('#subo').val("");
  table.draw();
});

$('#subo').on('change', function() {
  table.draw();
});

function getInfo() {
        var $subCategory = $("#subo option:selected").text()
        $.ajax({
      type:'GET',
      url: "https://my-json-server.typicode.com/SagnalracSO/repo/items?subcategory="   $subCategory,
      dataType: "json",
      beforeSend: function(jqXHR, settings) {   
          if($subCategory.toUpperCase() == '-SELECT SUBCATEGORY-') {
              alert('Select a SubCategory');
                jqXHR.abort();
          }
      },
      success: function(data) {      
        var item = data[0];
        var jRow = $("<tr>").append("<td>"   item.id   "</td><td>"   item.product   "</td><td>"   item.subcategory   "</td><td>"   item.category   "</td>").append("</tr>");
        table.row.add(jRow).draw();
      }
   });
}  
 <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<select id="cato" class="form-control" >
  <option value="" disabled selected="true">-Select Category-</option>
  <option>Electronics</option>
  <option>Sports</option>
</select>

<select id="subo" class="form-control">
   <option value="" disabled selected="true">-Select Subcategory-</option>
   <option>Laptop</option>
   <option>Mobile</option>
</select>

<table id="example" class="table display">
  <thead>
    <tr>
      <th>Id</th>
      <th>Product</th>
      <th>Subcategory</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody id="r">
    <tr>
      <td>1</td>
      <td>Samsung</td>
      <td>Mobile</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Racket</td>
      <td>Tennis</td>
      <td>Sports</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bat</td>
      <td>Cricket</td>
      <td>Sports</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Dell</td>
      <td>Laptop</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Iphone</td>
      <td>Mobile</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Soccer Ball</td>
      <td>Soccer</td>
      <td>Sports</td>
    </tr>
  </tbody>
</table>
<br><br>
<input type="button" value="ADD ROWS" onClick="getInfo()" />

Ответ №1:

Я забыл включить сценарий, в котором не установлен ни один из фильтров (а также я не знал, что сортировка запускает search.push функциональность).

Все, что вам нужно сделать, это return true когда фильтра вообще нет. Например, в вашем случае я просто добавил пару строк:

 if(filterSubCategory == "-SELECT SUBCATEGORY-" amp;amp; filterCategory == "-SELECT CATEGORY-")
        return true;
  

 var table = $('#example').DataTable({
  "bLengthChange": false,
  //searching: false,
  pageLength: 3,
  dom: 'tip'
});
  
$.fn.dataTable.ext.search.push(function( settings, data, dataIndex ) {
    
    var filterCategory= $("#cato option:selected").text().toUpperCase();
    var filterSubCategory= $("#subo option:selected").text().toUpperCase();
    var subCategory = String(data[2]).toUpperCase();
    var category = String(data[3]).toUpperCase();
    
    if(filterSubCategory == "-SELECT SUBCATEGORY-" amp;amp; filterCategory == "-SELECT CATEGORY-")
        return true;
    else if(filterSubCategory != "-SELECT SUBCATEGORY-") {
        if ( filterCategory == category amp;amp; filterSubCategory == subCategory)
             return true;
        }
        else if(filterCategory != "-SELECT CATEGORY-") {
            if ( filterCategory == category)
             return true;
        }        
        return false;
    }
);

$('#cato').on('change', function() {
  $('#subo').val("");
  table.draw();
});

$('#subo').on('change', function() {
  table.draw();
});

function getInfo() {
        var $subCategory = $("#subo option:selected").text()
        $.ajax({
      type:'GET',
      url: "https://my-json-server.typicode.com/SagnalracSO/repo/items?subcategory="   $subCategory,
      dataType: "json",
      beforeSend: function(jqXHR, settings) {   
          if($subCategory.toUpperCase() == '-SELECT SUBCATEGORY-') {
              alert('Select a SubCategory');
                jqXHR.abort();
          }
      },
      success: function(data) {      
        var item = data[0];
        var jRow = $("<tr>").append("<td>"   item.id   "</td><td>"   item.product   "</td><td>"   item.subcategory   "</td><td>"   item.category   "</td>").append("</tr>");
        table.row.add(jRow).draw();
      }
   });
}  
 <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<select id="cato" class="form-control" >
  <option value="" disabled selected="true">-Select Category-</option>
  <option>Electronics</option>
  <option>Sports</option>
</select>

<select id="subo" class="form-control">
   <option value="" disabled selected="true">-Select Subcategory-</option>
   <option>Laptop</option>
   <option>Mobile</option>
</select>

<table id="example" class="table display">
  <thead>
    <tr>
      <th>Id</th>
      <th>Product</th>
      <th>Subcategory</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody id="r">
    <tr>
      <td>1</td>
      <td>Samsung</td>
      <td>Mobile</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Racket</td>
      <td>Tennis</td>
      <td>Sports</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bat</td>
      <td>Cricket</td>
      <td>Sports</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Dell</td>
      <td>Laptop</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Iphone</td>
      <td>Mobile</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Soccer Ball</td>
      <td>Soccer</td>
      <td>Sports</td>
    </tr>
  </tbody>
</table>
<br><br>
<input type="button" value="ADD ROWS" onClick="getInfo()" />