jQuery Easy pagination without plugin

Question

So, my problem was the following. It's follow the previous HERE & HERE

I got dynamycaly added table from XML with this code:

$.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');
        });
    }
});

and i need to limit the number of them on the page. And if possible have a index navigation. I search for a pagination plugin that would do the trick but I have not found any that suited me, too much useless config, or unreadable for me.

Someone have code or explain for me ????

"To be crystal clear, it is not merely OK to ask and answer your own question, it is explicitly encouraged." — bZezzz, Nov 30 '12 at 23:47
Of course it's OK! I'm not saying otherwise. I'm merely telling you that waiting a bit before answering, gets more answers. More answers => better SO website. As far as the quality of your question... it's of the type that gets closed quickly. — Sparky, Nov 30 '12 at 23:50
Why when you ask a question then ask you if you want to answer directly... So... We dont care — bZezzz, Nov 30 '12 at 23:58

bZezzz · Answer 1 · 2021-10-23T16:01:44.323

For posterity:

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

jQuery Easy pagination without plugin

1 Answers1