-1

所以，我的问题如下。它遵循以前的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');
        });
    }
});

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

有人有代码或为我解释？？？？

4

1 回答 1

5

为后代：

//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>

于 2012-11-30T23:14:40.787 回答