[notice88]

http://www.frequency...ination-script/

I want to limit the rows of this table by 3.. but i cant understand how to apply the above tutorial. what i want to know is what should be the name of the table, and how can i apply the pagenav.

<table id='TableToBePaginated'>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
</table>

<div id='pagenav'></div>

[cupidvogel]

I didn't go through the code you pointed out, but I can give you an idea. Pagination becomes handy when the table has a large number of rows, and to make sure that the user doesn't load more rows than he will actually view, limit the output set to a subset of the total number of rows, with further rows being added to (or in the example you pointed out, replacing) the existing rows with subsequent user requests. The 'unseen' data may either be already be present in the page (in which case simple DOM manipulation is all what's required to display it), or fetched from the server (either through HTTP request, which will trigger a page load to display the fresh set of data, or via AJAX), in which case the data is first fetched and then inserted through DOM manipulation. Usually the second option is preferable, since the whole point of pagination is to prevent excess data consuming user bandwidth, but a quick Firebug inspection for your example showed that the data is already present, only it is manipulated by Javascript to be properly inserted into the DOM. So suppose the table has an id of TableToBePaginated, and it has 10 rows already displaying. The hidden data set consists 50 more rows, with each button click fetching 10 more rows to replace the already existing ones. There are 5 buttons, so it's important which button is clicked, clicking the 3rd button should replace the 10 existing rows with rows numbered from 21 to 30. That is where the jQuery slice() method will come in. You are replacing content, so html() function will come in handy. Suppose the buttons have an attribute serial with value ranging from 1 to 5. The rows are kept in a hidden table element with id hiddenrows, so that its structure is somewhat like this:

<table id = "hiddenrows">
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
<tr><td>18</td></tr>
<tr><td>19</td></tr>
<tr><td>20</td></tr>
.
.
.
<tr><td>50</td></tr>
</div>

When the user clicks a button, you grab the buttons serial attribute:

$("button.nav").click(function() {
serialno = parseInt($(this).attr('serial'));
});

Then you fetch the 10 required rows like this:

$html = "";
$("#hiddenrows").find("tr").slice((serialno-1)*10+1,serialno*10+1).each(function(i,n) {
$html += "<tr><td>"+$(this).find("td").text()+"</td></tr>";
});

So now we have the HTML code needed to be inserted, so we simply change the HTML of the table like this:

$("#TableToBePaginated").html($html);

This post has been edited by cupidvogel: 10 June 2012 - 08:29 AM