1
我需要过滤数据表。我已经写代码和它的工作，但是当我通过点击按钮来改变状态，那么它不工作。我需要过滤引导jQuery数据表
即：如果有启用按钮我点击它，那么它将被改为禁用按钮。然后，如果我过滤表，它不工作。
同样的方法，如果有禁用按钮，我点击它，然后它会更改为启用按钮，但没有对过滤数据表的影响。
尽管我正在更改过滤器值，但过滤保持不变。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<!-- HTML -->
<table id="data-table" class="table table-hover table-bordered table-stripped">
<thead>
<tr>
<th class="text-center">#</th>
<th>Category Name</th>
<th class="text-center filterable customFilterColumn">Status</th>
</tr>
<thead>
<tbody>
<tr>
<td class="text-center"><input type="checkbox" class="minimal" /></td>
<td>Shoes</td>
<td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled">Disabled</button></td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" class="minimal" /></td>
<td>Shoes</td>
<td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled">Disabled</button></td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" class="minimal" /></td>
<td>Shoes</td>
<td class="text-center" data-filter="Enabled"><button class="btn btn-default btn-xs btn-status status-enabled">Enabled</button></td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" class="minimal" /></td>
<td>Shoes</td>
<td class="text-center" data-filter="Disabled"><button class="btn btn-default btn-xs btn-status status-disabled">Disabled</button></td>
</tr>
<tr>
<td class="text-center"><input type="checkbox" class="minimal" /></td>
<td>Shoes</td>
<td class="text-center" data-filter="Enabled"><button class="btn btn-default btn-xs btn-status status-enabled">Enabled</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var table = $('#data-table').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"aaSorting": [
['1', 'asc']
],
/* "order": [], */
"columnDefs": [{
/* "targets": [0,-1], */
"targets": [0,-1],
"orderable": false
}]
});
function filter(source,customFilterColumn){
var count = 0;
var tableid = source.split(' ')[0];
$(source).each(function (k) {
if ($(this).text() !== '') {
if(++count==1){
$(tableid).parents("div.row:first").before('<div class="row"><div id="filtercontent"></div></div>');
}
var i = $(this).index();
var select = $('<select id="filer_'+i+'" class="form-control"><option value="">All</option></select>')
.insertBefore('#filtercontent')
.on('change', function() {
var val = $(this).val();
table.column(i)
.search(val ? '^'+$(this).val()+'$' : val, true, false)
.draw();
});
// Get the Status values a specific way since the status is a anchor/image
if ($(this).hasClass(customFilterColumn)) {
var dataFilterColumn = [];
/* ### IS THERE A BETTER/SIMPLER WAY TO GET A UNIQUE ARRAY OF <TD> data-filter ATTRIBUTES? ### */
table.column(i).nodes().to$().each(function(d, j){
var thisStatus = $(j).attr("data-filter");
if($.inArray(thisStatus, dataFilterColumn) === -1) dataFilterColumn.push(thisStatus);
});
dataFilterColumn.sort();
$.each(dataFilterColumn, function(i, item){
select.append('<option value="'+item+'">'+item+'</option>');
});
}
// All other non-Status columns (like the example)
else {
table.column(i).data().unique().sort().each(function (d, j) {
select.append('<option value="'+d+'">'+d+'</option>');
});
}
$('#filer_'+i).wrapAll('<div class="col-sm-2 form-group"></div>');
$('<label>'+$(this).text()+'</label>').insertBefore('#filer_'+i);
}
});
$(tableid+'_wrapper').removeClass('form-inline');
}
filter('#data-table thead th.filterable','customFilterColumn');
$('.btn-status').click(function(){
var id = $(this).val();
var status = parseInt($(this).attr('status'));
$(this).toggleClass('status-enabled');
$(this).toggleClass('status-disabled');
if(status==0){
$(this).html('Enabled');
$(this).attr('status','1');
$(this).parent().attr('data-filter','Enabled');
}
else{
$(this).html('Disabled');
$(this).attr('status','0');
$(this).parent().attr('data-filter','Disabled');
}
});
});
</script>
检查我的答案。它工作正常。 –