Jquery/PHP Loadless Pagination

[Xonos]

So I've began building a reloadless pagination system that uses php to sort results in chunks and adding enumerated pg classes for JQuery to handle.

http://jsfiddle.net/Xonos/fn4b5/17/

I wrote this static data to give you an idea of what I am doing.

The php works like this:

 

- Right after the query, I set these variables before my while loop.

    $rows = $result; //returns row count from query.
    $i = 0; //Row # (during loop)
    $rp = 0; //Row Page
    $limit = 50; //50 rows per page

    $pages = round(($rows / $limit));

while ($r = $result->fetch()) {

echo "<div class='tablerow pg".$rp."' id='".$ri."'><table><tr><td> Test Data #".$i."</td><td>".$r['data']." </td><td> example".$i."@example.com </td></tr></table></div>"

if (($ri / $limit) == $rp) {
$rp++;
}
$i++;
}

PS: This is purely example code that I wrote up real quick to give you the idea. If I pasted the entire contents, it'd be overwhelming. Do you guys have any idea why the last page (works fine with static data) would cutt off at 350 results versus 380 results? In orderwords, my paginated data (when using php) would display 8 pages cutting off at row 350 versus 380 which is what it should go to. I'm missing a last page.

[Xonos]

Also, I'd like to add a second question to this. Will there be severe consequences to hiding thousands of rows of data on one page versus the reload by posting to php method? I don't want to break my rule of page refreshing. I really want a seamless experience as if the user were using an actual local application. A lot of Google's "best methods" involve using <table> for the entire container which I'd prefer not to do because of the styling and control I have over each row although, I do use <table> for data arrangement within the div.

Edited June 7, 2013 by Xonos

[Christian F.]

I'm pretty sure that is because you're using round instead of ceil, as you would be stripping the last page off if you have less than 50% of the available rows for the last page.

 

Loading all of the data in one go will have an effect on loading times, server load, initial download size, and possibly memory usage. If you can section it up like you've done above, I would recommend doing so.

 

As for the use of tables: If you have tabular data, like your test data seem to suggest, then using a table is the proper course of action. It is a question about semantics, not style, after all.

Also, I'm not convinced the DIV around the table is necessary. As you can apply the styling to the table directly. At least in most instances, so I would look into that first. After all, the less code you have, the less probability for problems.

Edited June 7, 2013 by Christian F.

[nogray]

If you want your script to work like a native app without any loading, you would need to load the data into a javascript variable (e.g. array of arrays) and let javascript create the table with the page data on demand. You can store thousands of rows as data in an array without any performance lag put do not try to create the table for all of them as the same time. Just create the rows for the current page.

 

You can also search about sorting etc in javascript.