数据表 - 在回调后更改为单击的页面

时间:2017-02-17 08:22:43

标签: javascript jquery datatables

我有一个需要分页的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()

Please see the screenshot

感谢对此的任何意见。

提前致谢!

1 个答案:

答案 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();即可完成。

相关问题