如何留在 jquery DataTable 中的活动页面

Question

我在 jquery dataTable 上列出了几个数据，并且由 DataTable 插件默认完成分页。我想在处理数据时获取数据表的当前页面，并在处理完操作并重新加载数据后将该页面设置为活动状态。

Answer 1

参见 dataTables 文档，其中提供了一个回调函数，您可以从中获取当前页面：

$('#example').dataTable( {
  "drawCallback": function( settings ) {
       var api = new $.fn.dataTable( settings );

        // Output the data for the visible rows to the browser's console
        // You might do something more useful with it!
        console.log( api.rows( {page:'current'} ).data() );
    }
});

Answer 2

看到这个 fiddle。您可以看到如何获取当前页面。在 JSFiddle 中，您可以尝试刷新浏览器。例如，假设当前页面现在是 3。当您刷新浏览器时，您仍在第 3 页。

要解决您在编辑或删除行时想要返回上一页的问题，您必须使用此选项让jquery数据table记住上一页的位置。 Jquery Datatable 将保存 table 的状态（其分页位置、排序状态等）。状态保存方法使用 HTML5 localStorage 和 sessionStorage API 来高效存储数据。请参阅此 link 以阅读有关它的更多详细信息。 State saving

"bStateSave": true

JSFiddle Link

Fiddle Demo

Javascript代码

$(document).ready(function() {
    var table = $('#example').DataTable({
        "sPaginationType": "full_numbers",
        "bStateSave": true
    });

    $("#example").on('page.dt', function () {
    var info = table.page.info();
        $('#pageInfo').html('Currently showing page ' + (info.page + 1) + ' of ' + info.pages + ' pages.');
    });
} );

Answer 3

在初始化数据表的地方添加这个

"drawCallback": function( settings ) {
      alert ( 'You are on ssame page' );
}

对我有用:)

Answer 4

从数据中复制table

var table = $('#example').DataTable( {
    ajax: "data.json"
} );

setInterval( function () {
    table.ajax.reload( null, false ); // user paging is not reset on reload
}, 30000 );

在重新加载函数时传递 null、false 以在重新加载 table 时停留在该页面上。有关详细信息，请参阅 ajax.reload() 文档。

Answer 5

仅使用 stateSave: true

像这样：

$(document).ready(function() {
    $('#tableId').DataTable( {
        stateSave: true
    } );
})

如何留在 jquery DataTable 中的活动页面

How to stay on the active page in jquery DataTable

javascript

jquery

datatables

jquery-datatables