Javascript 如何在重新编码页面后使用分页保存jQuery表的状态

我有一个具有动态行数的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);


    }

函数LoadData（）{
变量选项卡=$（''）；
变量thead=$（''）；
变量tbody=$（''）
thead.append（'FSE'+“”+“”）；
thead.append（'星期一'+''）；
thead.append（'星期二'+''）；
thead.append（'星期三'+''）；
thead.append（'星期四'+''）；
thead.append（'Friday'+“”+“”）；
thead.append（'Saturday'+“”+“”）；
thead.append（'Sunday'+“”+“”）；
附页（thead）；
对于（变量i=1；i<51；i++）{
var trow=$（''）.data（“id”，i）；
trow.append（'FSE'+i+''）；
trow.append（'星期一'+i+''）；
trow.append（'星期二'+i+''）；
trow.append（'星期三'+i+''）；
trow.append（'星期四'+i+''）；
trow.append（'Friday'+i+''）；
trow.append（'Saturday'+i+''）；
trow.append（'Sunday'+i+''）；
tbody.append（trow）；
}
$（'#calendar'）。数据表（{stateSave:true}）
tab.追加（tbody）；
$（“#Tabledta”）.html（制表符）；
}

我的页码：

  $(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();
          });


      });

$（文档）.ready（函数（）{
LoadData（）；
//页数和项目长度
var显示每页的值=10；
var number_of_items=$（“#分页tr”）。长度；
//导航栏
var navigation_html=''+''；
无功电流_链路=1；
对于（变量i=0；i<项目数；i=i+每页显示）{
导航html+='''+''；
当前链接++；
}
导航_html+=''；
$（'page_navigation'）.html（navigation_html）；
行显示（0，每页显示）；
//激活第一页
函数行显示（开始索引、结束索引）{
$（'#paginate tr'）.hide（）.slice（startIndex，endIndex.show（）；
}
//分页功能
$（'.page_link'）。单击（函数（e）{
e、 预防默认值（）；
$（'.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
var IndexData=$（this.data（）；
行显示（IndexData.start、IndexData.end）；
}).first（）.addClass（'active'）；
//“下一个”和“上一个”功能
$（'.上一个链接，.下一个链接'）。单击（函数（e）{
e、 预防默认值（）；
变量遍历=$（this）.is（'.previous_link'）？'prev'：'next'；
$（'.page_link.active'）[遍历]（'.page_link'）。单击（）；
});
});

您可以执行类似操作来设置活动页面

// 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，以便更轻松地访问它 在你的功能中

希望能有帮助

编辑：

---

这里有一个实现

您可以使用cookie或localStorage保存页码，并在下次创建表时设置页码。是的，我希望它能起作用，您有一个例子吗？是的，当然，我会提供一个，但目前我已经准备好了，所以大约需要一个小时左右：）没问题，我很高兴得到每一个帮助，因为我不知道怎么解决它，看起来不错。我会尝试一下，让你知道它是否有效…谢谢！不知何故，它在我的应用程序中不起作用：（这是我的Feedle，也许它会有帮助…works perfectley！谢谢。我没有太多经验…你能解释一下为什么使用：localStorage.setItem（tableId，pageId）；它是什么，是我的合作伙伴吗？它是如何工作的？不客气。Localstorage不是cookies，它是一种在浏览器中以键值对的形式本地存储数据的方法。阅读更多内容也许你可以看看这个vode，我现在正试图将它与Ajax集成到一个表中，但不知何故，它不再工作了：