我有一个需要分页的jquery数据表。我已经使用<style>
div.dt-buttons {
float: right;
margin-left:10px;
}
</style>
<script>
$(document).ready(function() {
var buttonCommon = {
exportOptions: {
format: {
body: function(data, row, column, node) {
return column === 5 ? data.replace(/[$,]/g, '') : data;
}
}
}
};
var table = $('#detailsDataTable').DataTable({
"scrollY": 500,
"scrollX": true,
"paging": false,
"info": false,
"searching": false,
dom: 'Bfrtip',
lengthChange: false,
buttons: [
$.extend(true,
{},
buttonCommon,
{
extend: 'excelHtml5',
text: 'Export to Excel'
})
]
});
table.buttons().container().appendTo('#detailsDataTable_wrapper .col-sm-6:eq(0)');
});
</script>
事件来触发一个函数,当单击页码时,该函数从服务器端加载数据。然后我使用page-dt
将新检索的数据附加到表中。这成功了。我的问题是,即使数据被附加到表中,它仍然保留在第一页上,尽管点击事件。我尝试使用$('#table').dataTable().fnAddData(recordsArray);
和table.rows.add(recordsArray).draw();
事件,但仍然没有成功。
fnDrawCallback
这是 $(document).ready(function() {
table = $('#table').DataTable({
"filter": true,
"paging":true,
"pagingType": "full_numbers",
"pageLength": 5,
scrollCollapse: true,
scrollY:'70vh',
"dom": '<"dataTablesTop"' +
'f' +
'<"dataTables_toolbar">' +
'>' +
'rt' +
'<"dataTablesBottom"' +
'lip' +
'>',
"info":true
});
$('#table').on('page.dt', function (e, settings) {
// console.log(JSON.stringify(settings));
update(settings);
});
});
方法。
update()
感谢对此的任何意见。
提前致谢!
答案 0 :(得分:0)
我只需将<div id="tabs-container">
<div class="tabs-menu">
<div><a href="#tab-1">One</a></div>
<div><a href="#tab-2">Two</a></div>
<div><a href="#tab-3">Three</a></div>
<div><a href="#tab-4">Four</a></div>
</div>
<div class="tab">
<div id="tab-1" class="tab-content">
Hello
</div>
<div id="tab-2" class="tab-content">
Number Two
</div>
<div id="tab-3" class="tab-content">
Tab 3
</div>
<div id="tab-4" class="tab-content">
Bye
</div>
</div>
</div>
改为table.rows.add(recordsArray).draw();
即可完成。