【问题标题】:How to do automoving from one page to another page and back to first page where pagination is there in table in html如何从一个页面自动移动到另一个页面并返回到html表格中存在分页的第一页
【发布时间】:2016-04-22 13:30:02
【问题描述】:

我正在尝试为 HTML 中的表格添加带有分页的自动移动功能。 例如,我有一个有 100 行的表,然后我在一页上用 10 条记录对其进行分页。所以将有 10 页,每页有 10 条记录。 我需要自动完成,这样用户就不必专门点击页面查看。

我使用了 paging.js

下面的代码

  <style type="text/css">
  .paging-nav {
  text-align: right;
  padding-top: 2px;
  }
  .paging-nav a {
  margin: auto 1px;
  text-decoration: none;
  display: inline-block;
  padding: 1px 7px;
  background: #91b9e6;
  color: white;
  border-radius: 3px;
  }
  .paging-nav .selected-page {
  background: #187ed5;
  font-weight: bold;
  }
  .paging-nav,
  #tableData {
  'width: 400px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  }
  </style>

  $(document).ready(function() {
  $('#file').paging({limit:10});
  });

这里的文件是要分页的表的id。如何自动更改表格页面?欢迎所有答案。

【问题讨论】:

    标签: javascript jquery html pagination


    【解决方案1】:

    这是一个如何开始的示例.. 请注意,这只是一个示例,请勿复制!为了您自己的保护

    //create
    el = $("<table></table>");
    for (var i = 1; i !== 100; i++) {
      el.append("<tr><td>" + i + "</td><td>buuurp</td></tr>");
    }
    el.data("intStart", 1);
    el.appendTo("body");
    
    
    //fuction
    function showRow(j = 10) { //default var j = 10; you can call showRow(50) for 50 as example
      var i = $("table").data().intStart; //grabs data that hold the number of currect first element to view
      $("tr").hide();
      // hides all
      $("tr").filter(function(index) {
        return index >= i - 1 && index < i + j - 1; //jquery has 0-9 we count in 1-10 so -1
      }).show(); //shows the one needed
      $("table").data().intStart += j; //addes 'j' to the counter
      if ($("table").data().intStart > $("table").children("tr").lenght) {
        clearInterval(timer); //if we reach the end we can kill this
      }
    }
    
    showRow();
    var timer = setInterval(function() {
      showRow();
    }, 3000);
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

    【讨论】:

    • 谢谢,我知道该怎么做
    猜你喜欢
    • 2019-12-03
    • 1970-01-01
    • 1970-01-01
    • 2022-10-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-12-03
    相关资源
    最近更新 更多