当前位置： 文江博客话题详情

JavaScript 分页

发布于 2024-09-17 01:09:36 字数 1984 浏览 3 评论 0原文

有人可以帮我吗？我对 JS 知之甚少......我尝试了 这个例子，brianpeiris 写的。效果很好，但我需要在同一页面中使用两个不同的寻呼机。我怎样才能做到这一点？

这段代码不起作用，但这就是我所得到的..

 <script type="text/javascript">
                    var pagination_options = {
                      num_edge_entries: 1,
                      num_display_entries: 8,
                      callback: pageselectCallback,
                      items_per_page:1
                    }
                    function pageselectCallback(page_index, jq){
                      var items_per_page = pagination_options.items_per_page;
                      var offset = page_index * items_per_page;
                      var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
                      $('#Searchresult').empty().append(new_content);


                      var items_per_page = pagination_options.items_per_page;
                      var offset = page_index * items_per_page;
                      var new_content = $('#hiddenresult2 div.result2').slice(offset, offset + items_per_page).clone();
                      $('#Searchresult2').empty().append(new_content);
                      return false;

                    }


                    function initPagination() {
                      var num_entries = $('#hiddenresult div.result').length;
                      // Create pagination element
                      $("#Pagination").pagination(num_entries, pagination_options);

                      num_entries = $('#hiddenresult2 div.result2').length;
                      // Create pagination element
                      $("#Pagination2").pagination(num_entries, pagination_options);                          
                    }


                    $(document).ready(function(){      
                      initPagination();
                    });

原文

Can someone help me please? I have little knowledge of JS... I tried this example, that brianpeiris wrote.. It worked nicely, but I need two different pagers in the same page. How can I accomplish this?

This code doesn't work, but this is how far I got..

 <script type="text/javascript">
                    var pagination_options = {
                      num_edge_entries: 1,
                      num_display_entries: 8,
                      callback: pageselectCallback,
                      items_per_page:1
                    }
                    function pageselectCallback(page_index, jq){
                      var items_per_page = pagination_options.items_per_page;
                      var offset = page_index * items_per_page;
                      var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
                      $('#Searchresult').empty().append(new_content);


                      var items_per_page = pagination_options.items_per_page;
                      var offset = page_index * items_per_page;
                      var new_content = $('#hiddenresult2 div.result2').slice(offset, offset + items_per_page).clone();
                      $('#Searchresult2').empty().append(new_content);
                      return false;

                    }


                    function initPagination() {
                      var num_entries = $('#hiddenresult div.result').length;
                      // Create pagination element
                      $("#Pagination").pagination(num_entries, pagination_options);

                      num_entries = $('#hiddenresult2 div.result2').length;
                      // Create pagination element
                      $("#Pagination2").pagination(num_entries, pagination_options);                          
                    }


                    $(document).ready(function(){      
                      initPagination();
                    });

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

凉城凉梦凉人心 2024-09-24 01:09:36

试试这个：

var pagination_options = {
  num_edge_entries: 2,
  num_display_entries: 8,
  callback: pageselectCallback,
  items_per_page:3
};
var pagination_options2 = {
  num_edge_entries: 2,
  num_display_entries: 8,
  callback: pageselectCallback2,
  items_per_page:3
};
function pageselectCallback(page_index, jq){
  var items_per_page = pagination_options.items_per_page;
  var offset = page_index * items_per_page;
  var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
  $('#Searchresult').empty().append(new_content);
  return false;
}
function pageselectCallback2(page_index, jq){
  var items_per_page = pagination_options2.items_per_page;
  var offset = page_index * items_per_page;
  var new_content = $('#hiddenresult2 div.result').slice(offset, offset + items_per_page).clone();
  $('#Searchresult2').empty().append(new_content);
  return false;
}

function initPagination() {
  var num_entries = $('#hiddenresult div.result').length;
  // Create pagination element
  $("#Pagination").pagination(num_entries, pagination_options);

  num_entries = $('#hiddenresult2 div.result').length;
  // Create pagination element
  $("#Pagination2").pagination(num_entries, pagination_options2)
}

  $(document).ready(function(){      
         initPagination();
  });

try this:

var pagination_options = {
  num_edge_entries: 2,
  num_display_entries: 8,
  callback: pageselectCallback,
  items_per_page:3
};
var pagination_options2 = {
  num_edge_entries: 2,
  num_display_entries: 8,
  callback: pageselectCallback2,
  items_per_page:3
};
function pageselectCallback(page_index, jq){
  var items_per_page = pagination_options.items_per_page;
  var offset = page_index * items_per_page;
  var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
  $('#Searchresult').empty().append(new_content);
  return false;
}
function pageselectCallback2(page_index, jq){
  var items_per_page = pagination_options2.items_per_page;
  var offset = page_index * items_per_page;
  var new_content = $('#hiddenresult2 div.result').slice(offset, offset + items_per_page).clone();
  $('#Searchresult2').empty().append(new_content);
  return false;
}

function initPagination() {
  var num_entries = $('#hiddenresult div.result').length;
  // Create pagination element
  $("#Pagination").pagination(num_entries, pagination_options);

  num_entries = $('#hiddenresult2 div.result').length;
  // Create pagination element
  $("#Pagination2").pagination(num_entries, pagination_options2)
}

  $(document).ready(function(){      
         initPagination();
  });

​

回复 原文
各自安好 2024-09-24 01:09:36

https://plnkr.co/edit/XFqbVuIa0Sn4rRvE7d0J?p=preview

  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <style>
      #footer{

      height: 19px;
      color: light-green;
      color: blueviolet;
      background-color: darkcyan;
      padding: 16px;
      }
      .inputboxwidth{
        width:16px;
      }
      #blackColr{
        color:black;
      }
      #alignRight{
           text-align: right;
           margin-right:36px;
      }
      td{
            border: 0px;
            padding: 6px;    
            width: 10%;
      }
    </style>
  </head>

  <body>
    <table border="1" padding="36px">
      <thead>
        <tr>
          <td>Sno</td>
          <td>Name</td>
          <td>RollNO</td>
          <td>Class</td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <div id="footer">
      <div id="alignRight">
      <input type="text" class="inputboxwidth" id="pageNo" name="pageNo" value=""/>
      <span id="blackColr">/</span>
      <input type="text" class="inputboxwidth" id="TotalPageno" name="TotalPageno"  disabled=disabled value=""/>
      </div>
    </div>

    <script>

      $( "input#pageNo" ).change(function() {
        //console.log("innnnnnnn")

        var pageno=$(this).val();

          var isnum = /^\d+$/.test(pageno);

        if(pageno>countRecor ||  !isnum){
         $( "input#pageNo" ).val(previousPage);
         pageno=previousPage
        }
        var gotorecor=dispRecor*pageno-5;
        var body1=$("tbody");
        $("tbody").text("")
        var temp=[];
        for(i=gotorecor;i<=gotorecor+4;i++){
          temp.push(data[i]);
        }
        makeData(gotorecor,gotorecor+4,temp);
      });

      function makeData(startingRecordNumber,dispRecor,data){
       previousPage=$( "input#pageNo" ).val();
          var body=$("tbody");
          var count=0;
          EndingRecordNumber=dispRecor
          $.each(data, function(rowIndex, r) {
            count++;
            if(count==6){
              return false;
            }
        var row = $("<tr/>");
        $.each(r, function(colIndex, c) { 
            row.append($("<td/>").text(c));
        });
        body.append(row);
        });
      }

      $(document).ready(function() {
        $("#pageNo").val("1");
           data = [ 
                ["1","New York", "LA", "Seattle"], 
                ["2","Paris", "Milan", "Rome"], 
                ["3","Pittsburg", "Wichita", "Boise"],
                        ["4","New York", "LA", "Seattle"], 
                        ["5","New York", "LA", "Seattle"], 
                        ["6","New York", "LA", "Seattle"], 
                        ["7","New York", "LA", "Seattle"], 
                        ["8","New York", "LA", "Seattle"], 
                        ["9","New York", "LA", "Seattle"], 
                        ["10","New York", "LA", "Seattle"], 
                        ["11","New York", "LA", "Seattle"], 
                        ["12","New York", "LA", "Seattle"], 
                        ["13","New York", "LA", "Seattle"], 
                        ["14","New York", "LA", "Seattle"], 
                        ["15","New York", "LA", "Seattle"],
                            ["16","New York", "LA", "Seattle"]]
         countRecor=Math.ceil(data.length/5);
        dispRecor=5;
        $("#TotalPageno").val(countRecor);

        makeData(0,dispRecor,data);
      });
    </script>
  </body>

</html>

https://plnkr.co/edit/XFqbVuIa0Sn4rRvE7d0J?p=preview

  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <style>
      #footer{

      height: 19px;
      color: light-green;
      color: blueviolet;
      background-color: darkcyan;
      padding: 16px;
      }
      .inputboxwidth{
        width:16px;
      }
      #blackColr{
        color:black;
      }
      #alignRight{
           text-align: right;
           margin-right:36px;
      }
      td{
            border: 0px;
            padding: 6px;    
            width: 10%;
      }
    </style>
  </head>

  <body>
    <table border="1" padding="36px">
      <thead>
        <tr>
          <td>Sno</td>
          <td>Name</td>
          <td>RollNO</td>
          <td>Class</td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <div id="footer">
      <div id="alignRight">
      <input type="text" class="inputboxwidth" id="pageNo" name="pageNo" value=""/>
      <span id="blackColr">/</span>
      <input type="text" class="inputboxwidth" id="TotalPageno" name="TotalPageno"  disabled=disabled value=""/>
      </div>
    </div>

    <script>

      $( "input#pageNo" ).change(function() {
        //console.log("innnnnnnn")

        var pageno=$(this).val();

          var isnum = /^\d+$/.test(pageno);

        if(pageno>countRecor ||  !isnum){
         $( "input#pageNo" ).val(previousPage);
         pageno=previousPage
        }
        var gotorecor=dispRecor*pageno-5;
        var body1=$("tbody");
        $("tbody").text("")
        var temp=[];
        for(i=gotorecor;i<=gotorecor+4;i++){
          temp.push(data[i]);
        }
        makeData(gotorecor,gotorecor+4,temp);
      });

      function makeData(startingRecordNumber,dispRecor,data){
       previousPage=$( "input#pageNo" ).val();
          var body=$("tbody");
          var count=0;
          EndingRecordNumber=dispRecor
          $.each(data, function(rowIndex, r) {
            count++;
            if(count==6){
              return false;
            }
        var row = $("<tr/>");
        $.each(r, function(colIndex, c) { 
            row.append($("<td/>").text(c));
        });
        body.append(row);
        });
      }

      $(document).ready(function() {
        $("#pageNo").val("1");
           data = [ 
                ["1","New York", "LA", "Seattle"], 
                ["2","Paris", "Milan", "Rome"], 
                ["3","Pittsburg", "Wichita", "Boise"],
                        ["4","New York", "LA", "Seattle"], 
                        ["5","New York", "LA", "Seattle"], 
                        ["6","New York", "LA", "Seattle"], 
                        ["7","New York", "LA", "Seattle"], 
                        ["8","New York", "LA", "Seattle"], 
                        ["9","New York", "LA", "Seattle"], 
                        ["10","New York", "LA", "Seattle"], 
                        ["11","New York", "LA", "Seattle"], 
                        ["12","New York", "LA", "Seattle"], 
                        ["13","New York", "LA", "Seattle"], 
                        ["14","New York", "LA", "Seattle"], 
                        ["15","New York", "LA", "Seattle"],
                            ["16","New York", "LA", "Seattle"]]
         countRecor=Math.ceil(data.length/5);
        dispRecor=5;
        $("#TotalPageno").val(countRecor);

        makeData(0,dispRecor,data);
      });
    </script>
  </body>

</html>
回复 原文
~没有更多了~

关于作者

萌能量女王

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lioqio

文章 0 评论 0

Single

文章 0 评论 0

禾厶谷欠

文章 0 评论 0

alipaysp_2zg8elfGgC

文章 0 评论 0

qq_N6d4X7

文章 0 评论 0

放低过去

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文