如何在 jQuery Datatables 分页中返回特定页面？答案

【问题标题】：How to return the specific page in jQuery Datatables paging?如何在 jQuery Datatables 分页中返回特定页面？
【发布时间】：2015-11-06 00:51:02
【问题描述】：

我在每一行都有一个数据和“编辑”按钮。当我单击该按钮时， /edit/ url 打开。到目前为止一切都很好。但如果我需要返回数据表，它从第一页开始。我能做些什么呢？

 $('#table').dataTable({
        "sDom" : 'rtFip>',
        'fnDrawCallback' : function() {
            $('input:checkbox, input:radio').checkbox();
        },
        'sPaginationType' : 'full_numbers',
        "bServerSide" : true,
        "sAjaxSource" : "{% url 'get_menu_list' %}"
  });

【问题讨论】：

多么模糊的问题。我们应该发挥想象力吗？
贴出按钮的代码和dataTable的初始化。您是否也尝试过在 dataTables 论坛中提问？ datatables.net/forums
是的，我也在那里问过。

标签： jquery

【解决方案1】：

DataTables 可以选择将状态存储在 cookie 中。

$(document).ready(function() {
    $('#example').dataTable( {
        "stateSave": true
    } );
} );

http://datatables.net/examples/basic_init/state_save.html

【讨论】：

是的，Chrome 不走运。有人知道这是否已在以后的版本中修复？我在 1.10.9。
可能与您使用的 Chrome 版本有关。我在 LInux openSUSE 13.2 上使用 Chrome 版本 45.0.2454.93（64 位），它正在工作。虽然我没有尝试过使用 dataTables 1.10.9 版；我仍在使用 dataTable 1.10.7 版
如果我想返回页面上的特定行怎么办？怎么可能
太棒了！但这不是所有人，这会将数据存储在本地存储中，如果您希望它存储在会话存储或数据库中，这里有来自其他用户 stackoverflow.com/a/38442163/2914407 的更多信息，对我来说，本地存储在 reactjs 中搞砸了

【解决方案2】：

对于大型表，将状态存储在 cookie 中失败。这种本地存储解决方案适用于大型表。

$(document).ready(function() {
    $('#example').dataTable( {
        "bStateSave": true,
        "fnStateSave": function (oSettings, oData) {
            localStorage.setItem( 'DataTables', JSON.stringify(oData) );
        },
        "fnStateLoad": function (oSettings) {
            return JSON.parse( localStorage.getItem('DataTables') );
        }
    } );
} );

来源：http://datatables.net/blog/localStorage_for_state_saving

【讨论】：

【解决方案3】：

如何在jQuery Datatables分页中返回特定页面？

使用fnPagingInfo

获取有关 DataTables 当前用于显示每个页面的分页设置的信息，包括显示的记录数、数据集中的起点和终点等。

      $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
      {
        return {
          "iStart":         oSettings._iDisplayStart,
          "iEnd":           oSettings.fnDisplayEnd(),
          "iLength":        oSettings._iDisplayLength,
          "iTotal":         oSettings.fnRecordsTotal(),
          "iFilteredTotal": oSettings.fnRecordsDisplay(),
          "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
          "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
        };
      };


      $(document).ready(function() {
      $('#example').dataTable( {
      "fnDrawCallback": function () {
      alert( 'Now on page'+ this.fnPagingInfo().iPage );
      }
      } );
      } );

来源：http://datatables.net/plug-ins/api

【讨论】：

【解决方案4】：

这里是 v1.10.7 中的how to do it：

$(document).ready(function() {
    $('#example').dataTable( {
        stateSave: true
     } );
} );

【讨论】：