iam在服务器端模式下将Datatables与ColVis扩展和ColumnFilter一起使用。当我隐藏列时,过滤可以正常工作,但只能刷新页面。在刷新页面之后,该列仍然是隐藏的(这是可以的,因为bStateSave = true),但列过滤器都是可见的(包括隐藏的列的过滤器),因此过滤不能正常工作。例如,ID列过滤下一列NAME列。
你能帮助我吗?数据表过滤器
//filtering
oIncidentsTable.columnFilter({
sPlaceHolder: "head:after",
"aoColumns": [
{ "type": "number" },
null,
{ "type": "text" },
{ "type": "text" },
{ "type": "text" },
{ "type": "text" },
{ "type": "select", values: ['Nový', 'Rozpracovaný', 'Vyřešený'] },
{ "type": "text" },
null
],
bUseColVis: true
});
表格HTML
<!--Table HTML-->
<div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
<div class="col-sm-12">
<table id="TableIncident" class="table table-bordered table-hover dataTable table-striped" role="grid" style="cursor:pointer" aria-describedby="example2_info">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th>Id</th>
<th>Registrace</th>
<th>Uživatel Win</th>
<th>Uživatel FE</th>
<th>Stanice</th>
<th>Text</th>
<th>Stav</th>
<th>Řešitel</th>
<th>Urgentni</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
数据表
var oIncidentsTable = $('#TableIncident').dataTable({
"paging": true,
"lengthChange": true,
"iDisplayLength": 10,
"info": true,
"autoWidth": false,
"bServerSide": true,
"bStateSave": true,
"sAjaxSource": "Home/AjaxHandler",
"bProcessing": true,
"ordering": true,
"order": [[0, "desc"]],
"fnServerParams": function (aoData) {
aoData.push(
{ "name": "CHBsolved", "value": $("#CHBSolved").is(":checked") ? "true" : "false" },
{ "name": "CHBMyInc", "value": $("#CHBMyInc").is(":checked") ? "true" : "false" },
{ "name": "CHBNew", "value": $("#CHBNew").is(":checked") ? "true" : "false" });
},
"aoColumns": [
{ "sName": "Id", "mDataProp": "id", "sWidth": "5%" },
{ "sName": "Registrace", "mDataProp": "dateTime", "sWidth": "7%" },
{ "sName": "UzivatelWin", "mDataProp": "UserWindows", "sWidth": "12%" },
{ "sName": "UzivatelFE", "mDataProp": "userFE", "sWidth": "12%" },
{ "sName": "Stanice", "mDataProp": "computer", "sWidth": "8%" },
{ "sName": "Text", "mDataProp": "text", "sWidth": "25%" },
{ "sName": "Stav", "mDataProp": "status", "sWidth": "5%" },
{ "sName": "Resitel", "mDataProp": "solver", "sWidth": "12%" },
{ "sName": "Urgentni", "mDataProp": "importance", "sWidth": "5%" }
],
"createdRow": function (row, data, index) {
if (data[6] == "Nový") {
$('td', row).eq(6).addClass('highlight');
}
},
dom:
"<'#TableControls.row'<'pull-left'l><'pull-right'CBR>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
{
extend: 'print',
text: '<i class="fa fa-print"></i>',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'Excel',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i>',
exportOptions: {
columns: ':visible'
}
}
],
"colVis": {
"buttonText": "Zobrazit sloupce"
//activate: "mouseover"
},
"language": {
"lengthMenu": "Záznamů na stránku _MENU_",
"zeroRecords": "Nebyly nalazeny žádné záznamy",
"info": "Stránka _PAGE_ z _PAGES_",
"infoEmpty": "Tabulka neobsahuje žádné záznamy",
"infoFiltered": "(- vyfiltrovano z _MAX_ záznamů)",
"sSearch": "Prohledat všechny sloupce:",
"processing": "<div class='dataTables_processing'><i class='fa fa-spinner fa-spin fa-2x'></i>NAČÍTÁM...</div>",
"paginate": {
"first": "První",
"last": "Poslední",
"next": "Další",
"previous": "Předchozí"
}
},
//obarveni radku, ktere maji vyssi dulezitosts
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData["importance"] == 'True') {
$(nRow).addClass('danger');
}
}
});