重新加载页面后如何使用分页保存 jQuery 表的状态

Question

我有一个动态行数的 jQuery 表。我已经进行了分页并且效果很好，但是在每次重新加载后它都会从第 1 页开始，我想要做的是保存我的表格的状态并获取我在重新加载之前所拥有的当前页面。我听说过 $('#example').DtaTable({saveState:true}); 但就我而言，它并没有真正起作用，因为我正在使用自己的分页。也许有人知道如何将它集成到我的代码中。提前致谢。

我的代码：

创建表：

     function LoadData() {




      var tab = $('<table  id=calendar class=MyTable border=1 ></table>');
      var thead = $('<thead><tr></tr></thead>');
      var tbody = $('<tbody id="paginate"></tbody>')
      thead.append('<th style="padding:5px">FSE' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Monday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Tuesday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Wednesday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Thursday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Friday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Saturday' + "&nbsp;" + '</th>');
      thead.append('<th style="padding:5px">Sunday' + "&nbsp;" + '</th>');
      tab.append(thead);


      for (var i = 1; i < 51; i++) {
      var trow = $('<tr/>').data("id",i);

    trow.append('<td>FSE' + i + '</td>');
    trow.append('<td>Monday' + i + '</td>');
    trow.append('<td>Tuesday' + i + '</td>');
    trow.append('<td>Wednesday' + i + '</td>');
    trow.append('<td> Thursday' + i + '</td>');
    trow.append(' <td>Friday' + i + '</td>');
    trow.append('<td>Saturday' + i + '</td>');
    trow.append('<td>Sunday' + i + '</td>');
    tbody.append(trow);


       }
        $('#calendar').dataTable({ stateSave: true })
        tab.append(tbody);
        $("#Tabledta").html(tab);


    }

和我的分页：

  $(document).ready(function () {

      LoadData(); 
//number of pages and items length
var show_per_page = 10;
var number_of_items = $('#paginate tr').length;

//navigation bar
var navigation_html = '<a class="previous_link" href="">Prev</a>' + '&nbsp';
var current_link = 1;
for (var i = 0; i < number_of_items; i = i + show_per_page) {
    navigation_html += '<a class="page_link" href="" data-start="' + i + '" data-end="' + (i + show_per_page) + '">' + (current_link) + '</a>' + '&nbsp';
    current_link++;
}
navigation_html += '<a class="next_link" href="">Next</a>';
$('#page_navigation').html(navigation_html);
rowDisplay(0, show_per_page);

//Activating of the first page
function rowDisplay(startIndex, endIndex) {
    $('#paginate tr').hide().slice(startIndex, endIndex).show();
}

//Pagination functionylity
     $('.page_link').click(function (e) {
          e.preventDefault();
          $('.active').removeClass('active');
          $(this).addClass('active');
          var IndexData = $(this).data();
          rowDisplay(IndexData.start, IndexData.end);
       }).first().addClass('active');

                 //"Next" & "Previous" functionality
              $('.previous_link, .next_link').click(function (e) {
              e.preventDefault();
              var traverse = $(this).is('.previous_link') ? 'prev' : 'next';
              $('.page_link.active')[traverse]('.page_link').click();
          });


      });

Answer 1

你可以这样做来设置活动页面

// use the id of the table, in case multiple tables present
function savePage(tableId, pageId) {
    localStorage.setItem(tableId, pageId);
}

function loadPage(tableId) {
    return localStorage.getItem(tableId);
}

然后在你的代码中一切都初始化后

function setPageId(tableId) {
    var pageId = loadPage(tableId);

    if(!pageId) {
        return;
    }

    $('.active').removeClass('active');
    var $pageButton = $('div:contains("' + pageId + '")');

    if(!pageButton) {
        return;
    }

    var pageData = $pageButton.data();
    rowDisplay(pageData .start, pageData .end);
}

关于保存页面数据

$('.page_link').click(function(e) {
        e.preventDefault();
        $('.active').removeClass('active');
        $(this).addClass('active');
        var IndexData = $(this).data();
        var pageNumber = $(this).text().trim();
        savePage(tableId, pageNumber)
        rowDisplay(IndexData.start, IndexData.end);
    })
    .first()
    .addClass('active');

您可以设置tableId，可能在页面顶部，这样您就可以更轻松地访问它 在你的函数中。

希望对你有帮助

编辑：

这是一个带有实现的codepen