我需要過濾數據表。我已經寫代碼和它的工作,但是當我通過點擊按鈕來改變狀態,那麼它不工作。我需要過濾引導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>
檢查我的答案。它工作正常。 –