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

Question

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

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

Answer 1

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

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

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

Answer 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

Answer 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

Answer 4

这是在v1.10.7中的操作方法：

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