如何解决jQuery datatables内置排序不起作用
内置数据表列排序不起作用。单击任何列中的标题时,它将显示0行。
我尝试使用排序,columndefs,可排序,该方法对其他人有用,但在我的情况下不起作用。
由于 $。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 && 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()" />
解决方法
我忘了包括没有设置任何过滤器的情况(而且我也不知道排序会触发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()" />
快乐编码!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。