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

Posted 2023-05-09

【中文标题】没有插件的jQuery Easy分页[关闭]

【英文标题】：jQuery Easy pagination without plugin [closed]

【发布时间】：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 网站。至于你的问题的质量......它是那种很快就会被关闭的类型。

为什么当你问一个问题然后问你是否想直接回答......所以......我们不在乎

放松...我只是给你一些有用的建议。

【参考方案1】：

为了后代：

//Easy pagination by bZezzz
//For *** 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>