没有插件的jQuery Easy分页[关闭]答案

【问题标题】：jQuery Easy pagination without plugin [closed]没有插件的jQuery Easy分页[关闭]
【发布时间】：2012-11-19 05:24:39
【问题描述】：

所以，我的问题如下。是跟之前的HERE & HERE

我使用以下代码从 XML 动态添加表：

$.ajax({
    type: "GET",
    url: "../datas/_pizzas",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('row').each(function() {
            var getNom = $(this).find('nomp').text();
            var Prix1 = $(this).find('petit').text();
            var Prix2 = $(this).find('moyen').text();
            var Prix3 = $(this).find('grand').text();
            $('<table id="item"></table>').html('<tr><td id="test" onclick="afficher(\''+getNom +'\','+Prix1+','+Prix2+','+Prix3+');"><b>' + getNom + '</b></td></tr>').appendTo('#pizzas');
        });
    }
});

我需要限制页面上的数量。如果可能的话，有一个索引导航。我搜索了一个可以解决问题的分页插件，但我没有找到任何适合我的插件，太多无用的配置，或者对我来说不可读。

有人有代码或解释给我吗？？？？

【问题讨论】：

“明确地说，不仅可以提出和回答自己的问题，而且明确鼓励这样做。”
我的问题是......我怎样才能更清楚？
当然没关系！我不是说别的。我只是告诉你，在回答之前稍等片刻，会得到更多答案。更多答案 => 更好的 SO 网站。至于你的问题的质量......它是那种很快就会被关闭的类型。
为什么当你问一个问题然后问你是否想直接回答......所以......我们不在乎
放松...我只是给你一些有用的建议。

标签： jquery jquery-plugins pagination jquery-pagination

【解决方案1】：

为了后代：

//Easy pagination by bZezzz
//For Stackoverflow Community
//Fork Fork Fork Fork !
item = $('table'); //Any element you want
itemL = item.length; //Get the Item count
itNbr = 5; //Set the Item per page
pgNbr = 0; //Set the page count to 0


//Hide unwanted row
function start() {
  if (itemL > itNbr) { //If Items Count greater than Item per page
    item.hide(); //Hide All Items
    item.slice(0, itNbr).show(); //Show only the 0 to 'X'. X = Item per page
    pgNbr = Math.ceil(itemL / itNbr); //Get the page Number Item Count / Item per Page round to Greater
    thisPage = 1; //Set the Start Page
  }
}


//Get the pages Index
function indexer() {
  $('textarea').val(thisPage + ' / ' + pgNbr); //Sipmply set val.
}
//Bind the action
$('.pager').click(function() {
  //Create loop
  if (thisPage == pgNbr) { //If last page 
    start(); //Go 1st
    indexer(); //Get Index
  } else {
    var first = itNbr * thisPage; //Define the first visible item 'X'
    var last = (itNbr * thisPage) + itNbr; //Define the last visible item 'Y'
    item.hide(); //Hide All
    item.slice(first, last).show(); //Show only 'X' to 'Y'
    thisPage++; //Increment page number
    indexer(); //And get the index
  }

});

//Let's GO !
start();
indexer();

body {
  background-color: #00AAFF;
}

.container {
  width: 200px;
  margin: 0 auto;
  background-color: #fff;
  padding: 5px;
  text-align: center;
  margin-top: 50px;
}

.pager {
  width: 100%;
  height: 25px;
  background-color: #ddd;
  color: #999;
  padding-top: 5px;
}

table {
  width: 100%;
  text-align: center;
  margin: 5px 0 0 0;
  background-color: #eee;
  color: #999;
}

textarea {
  text-align: center;
  margin: 10px 0 0 0;
  resize: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="pager"><b>Click ME !</b></div>
  <table>
    <tr>
      <td>1</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>2</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>3</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>4</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>5</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>6</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>7</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>8</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>9</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>10</td>
    </tr>
  </table>
  <table>
    <tr>
      <td>11</td>
    </tr>
  </table>
  <textarea rows="1"></textarea>
</div>

【讨论】：