我使用jquery数据表插件来实现分页，单个列过滤器功能。我已添加以下文件：
我的代码如下：
$('#tcExecDetails').DataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
<table id="tcExecDetails" class="display" style= "width:85%;font-size:11px;">
<thead>
<tr class="success">
<th>Execution Id</th>
<th>Test Case Name</th>
<th>Start Time</th>
<th>Actual End Time</th>
<th>Planned End Time</th>
<th>Execution Type</th>
<th class="status">Status</th>
</tr>
</thead>
<tbody id='tcExecDetailsTable' class="alt_content" >
</tbody>
</table>
答案 0 :(得分：0)
以下是使用数据集的DataTable示例代码。您可以查看DataTable Extensions和插件
https://www.datatables.net/extensions/index
https://www.datatables.net/plug-ins/index
http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css“”/＆gt;
$(document).ready(function () {
try {
var mydata = [
{
id: 1,
name: "Test 1",
startTime: '11/01/2013 00.00',
actualEndTime: '11/01/2013 12.00',
plannedEndTime: '11/01/2013 12.30',
executionTime: 5.00,
status: "Success"
},
{
id: 2,
name: "Test 2",
startTime: '11/01/2015 00.00',
actualEndTime: '11/08/2015 12.00',
plannedEndTime: '11/09/2015 12.30',
executionTime: 11.00,
status: "Failed"
},
{
id: 3,
name: "Test 3",
startTime: '11/01/2015 00.00',
actualEndTime: '11/08/2015 12.00',
plannedEndTime: '11/09/2015 12.30',
executionTime: 33.00,
status: "Failed"
},
{
id: 4,
name: "Test 4",
startTime: '11/01/2015 00.00',
actualEndTime: '11/08/2015 12.00',
plannedEndTime: '11/09/2015 12.30',
executionTime: 27.00,
status: "Failed"
},
{
id: 5,
name: "Test 5",
startTime: '11/01/2015 00.00',
actualEndTime: '11/08/2015 12.00',
plannedEndTime: '11/09/2015 12.30',
executionTime: 32.00,
status: "Failed"
},
{
id: 6,
name: "Test 6",
startTime: '11/01/2015 00.00',
actualEndTime: '11/08/2015 12.00',
plannedEndTime: '11/09/2015 12.30',
executionTime: 5.00,
status: "Failed"
}
,
{
id: 7,
name: "Test 7",
startTime: '11/01/2015 00.00',
actualEndTime: '11/08/2015 12.00',
plannedEndTime: '11/09/2015 12.30',
executionTime: 1.00,
status: "Failed"
}
,
{
id: 8,
name: "Test 8",
startTime: '11/01/2015 00.00',
actualEndTime: '11/08/2015 12.00',
plannedEndTime: '11/09/2015 12.30',
executionTime: 2.00,
status: "Failed"
}
,
{
id: 9,
name: "Test 9",
startTime: '11/01/2015 00.00',
actualEndTime: '11/08/2015 12.00',
plannedEndTime: '11/09/2015 12.30',
executionTime: 8.00,
status: "Failed"
}
,
{
id: 10,
name: "Test 10",
startTime: '11/01/2015 00.00',
actualEndTime: '11/08/2015 12.00',
plannedEndTime: '11/09/2015 12.30',
executionTime: 11.00,
status: "Failed"
}
,
{
id: 11,
name: "Test 11",
startTime: '11/01/2015 00.00',
actualEndTime: '11/08/2015 12.00',
plannedEndTime: '11/09/2015 12.30',
executionTime: 7.00,
status: "Failed"
}
,
{
id: 12,
name: "Test 12",
startTime: '11/01/2015 00.00',
actualEndTime: '1/09/2015 12.00',
plannedEndTime: '1/9/2015 12.30',
executionTime: 3.00,
status: "Success"
}
];
$('#tcExecDetails').dataTable(
{
"aaData": mydata,
"aoColumns":
[
{ "mData": 'id', sDefaultContent: "" },
{ "mData": 'name', sDefaultContent: "" },
{ "mData": 'startTime', sDefaultContent: "" },
{ "mData": 'actualEndTime', sDefaultContent: "" },
{ "mData": 'plannedEndTime', sDefaultContent: "" },
{ "mData": 'executionTime', sDefaultContent: "" },
{ "mData": 'status', sDefaultContent: "" }
],
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"bStateSave": false,
"idisplayLength": 2
});
}
catch (err) {
console.log("Error in operation! " + err);
}
});
</script>