Can someone please share a extremely simple version of JQuery Ajax with pagination??
views:
72answers:
2
+2
A:
I would suggest using the server to take care of pagination, as in it should respond with the correct output based on the received pageNo parameter:
$(document).ready(function() {
$("a").click(function() {
$("#results").load( "foo.php", { pageNo: $(this).text()}, sortBy: $("#sortBy").val() );
return false;
});
});
<select id="sortBy">
<option value="date">Added</option>
<option value="price">Price</option>
</select>
<div id="results"></div>
<a href="foo.php?p=1">1</a>
<a href="foo.php?p=2">2</a>
Note: When an object is passed as the second argument to $.load, a POST request will be made. See http://api.jquery.com/load/
EDIT: The same as above, but fetching JSON from the server:
$(document).ready(function() {
$("a").click(function() {
$.getJSON( "foo.php", { pageNo: $(this).text(), sortBy: $("#sortBy").val() }, function(json) {
// read json here, possibly using $.each
});
return false;
});
});
EDIT(again): I would recommend using the server to render in the initial content. If you insist on requesting the first page of results with ajax, one way is to simulate the clicking of the link for page 1:
$("a:first").click();
better you give your pagination links a class, say .pageNo, to eliminate any confusion:
$("a.pageNo:first").click();
karim79
2010-04-13 22:22:35
Add this to a click event on the pagination links. Make the pageNo variable dynamic by setting the text() value of the pagination link to it.
Haris
2010-04-13 22:26:31
@Haris - was in the process of editing to exactly that :)
karim79
2010-04-13 22:27:56
that worked so nicely!! how can I rewrite it so the function accepts a json object?in my foo.php I have "echo json_encode($arr);"by the way, do you think its a good idea to query the databse in foo.php and then convert it into json and then retreieve json on the mainpage and then parse through the resultset and present it??
vick
2010-04-13 22:31:30
@vick - it really depends. It's normally simpler to just send the output in its entirety to the client, I normally use json for more complex tasks.
karim79
2010-04-13 22:34:42
ok, but if I want to rewrite it so it gets the json object, how can I do that?
vick
2010-04-13 22:38:34
@vick - done. Have a look at the docs for jQuery.each for looping over a json object.
karim79
2010-04-13 22:40:54
@vick - there are many ways to get json from the server, including `$.postJSON` and `$.ajax` with the 'dataType' option set to 'json'. I would suggest reading through the ajax section of the jQuery API.
karim79
2010-04-13 22:44:00
thanks! great!can I make it call page 1 by default when the page loads?
vick
2010-04-13 22:48:21
@vick - I'll edit again.
karim79
2010-04-13 22:49:09
@karim: sorry for bugging you so much and I really apprecaite the help. I got it to work fine! And i decided not to use the json feature. My next goal is to being able to pass variable from php to JQuery and then on to my data-loader. I want to pass variables such as page, sort_by etc..
vick
2010-04-13 23:35:31
@vick - You're not bugging me (I do this voluntarily :). I've edited the answer, to include a select element which lets the user decide how the page should be sorted. The selected value is sent to the server along with the page number. Hope that helps.
karim79
2010-04-13 23:56:48