Jquery 数据表内置排序不起作用

Question

内置数据表列排序不起作用。 在任何列中单击 header 时，它显示 0 行。

我曾尝试使用对其他人有用的 aasorting、columndefs、orderable ，但在我的情况下它不起作用。

我发现由于$.fn.dataTable.ext.search.push() function 导致列排序不起作用，因为当我注释掉它时，列排序有效，这意味着由于 function 而创建了一些依赖关系。 但是它的代码部分无法将其删除。 请提供建议以使这项工作。

 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 && 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()" />

Answer 1

我忘了包括没有设置任何过滤器的场景（而且我也不知道排序会触发search.push功能）。

您所要做的就是在根本没有过滤器时return true 。 例如，在您的情况下，我只是添加了几行：

if(filterSubCategory == "-SELECT SUBCATEGORY-" && 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-" && filterCategory == "-SELECT CATEGORY-") return true; else if(filterSubCategory;= "-SELECT SUBCATEGORY-") { if ( filterCategory == category && 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()" />

快乐编码！