我正在尝试使用自定义搜索和列可见性创建数据表。
我所做的是 -
HTML
<div class="container">
<table id="employee-grid" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Employee name</th>
<th>Salary</th>
<th>Position</th>
<th>City</th>
<th>Extension</th>
<th>Joining date</th>
<th>Age</th>
</tr>
</thead>
<thead>
<tr>
<td><input type="text" id="0" class="employee-search-input"></td>
<td><input type="text" id="1" class="employee-search-input"></td>
<td><input type="text" id="2" class="employee-search-input" ></td>
<td><input type="text" id="3" class="employee-search-input" ></td>
<td><input type="text" id="4" class="employee-search-input" ></td>
<td valign="middle"><input readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
<td><input type="text" id="6" class="employee-search-input" ></td>
</tr>
</thead>
</table>
</div>
JS
$(document).ready(function()
{
var dataTable = $('#employee-grid').DataTable(
{
processing: true,
serverSide: true,
//ajax: "employee-grid-data.php", // json datasource for AJAX Data
"ajax":
{
"url": "employee-grid-data.php",
//"type": 'POST',
"data": function ( d ) //Sending Custom Data for manupulating with elements out of the table
{
d.myKey = "myValue";
// d.custom = $('#myInput').val();
// etc
},
},
//"pagingType": "full_numbers", //Adding Last and First in Pagination
stateSave: true,
"language":{ //Custom Message Setting
"lengthMenu": "Display _MENU_ records per page", //Customizing menu Text
"zeroRecords": "Nothing found - sorry", //Customizing zero record text - filtered
"info": "Showing page _PAGE_ of _PAGES_", //Customizing showing record no
"infoEmpty": "No records available", //Customizing zero record message - base
"infoFiltered": "(filtered from _MAX_ total records)" //Customizing filtered message
},
"lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], //For customizing number of data sets per page
dom: 'l<"toolbar"> Bfrtip', //"Bfrtip" is for column visiblity - B F and R become visible
initComplete: function() //Adding Custom button in Tools
{
$("div.toolbar").html('<button type="button" onclick="addNewEntry()">Add a New Record</button>');
},
buttons: [ //Column Visiblity Buttons
{
extend: 'colvis',
collectionLayout: 'fixed three-column',
postfixButtons: [ 'colvisRestore' ]
}
],
});
});
我得到了这个 -
工作正常,但如果我试图用它折叠任何列,问题就出现了。我得到类似的东西 -
因此,当其他项隐藏时,表的列过滤器不会隐藏。
答案 0 :(得分:1)
<强>解强>
您正在使用两个thead
元素,请将其设为两行,如下所示。
<thead>
<tr>
<th>Employee name</th>
<th>Salary</th>
<th>Position</th>
<th>City</th>
<th>Extension</th>
<th>Joining date</th>
<th>Age</th>
</tr>
<tr>
<td><input type="text" id="0" class="employee-search-input"></td>
<td><input type="text" id="1" class="employee-search-input"></td>
<td><input type="text" id="2" class="employee-search-input" ></td>
<td><input type="text" id="3" class="employee-search-input" ></td>
<td><input type="text" id="4" class="employee-search-input" ></td>
<td valign="middle"><input readonly="readonly" type="text" id="5" class="employee-search-input datepicker" ></td>
<td><input type="text" id="6" class="employee-search-input" ></td>
</tr>
</thead>
同样在这种情况下,您需要使用orderCellsTop: true
选项告诉DataTables使用顶行进行排序。
<强>样本强>
请参阅this jsFiddle以获取代码和演示。