I am newer to jQuery and have been able to accomplish all desired
results before, but trying to implement this jQuery pagination plugin
is taxing me terribly.
My problems lies around the fact that I want AJAX function which posts
some information to the server and then gets back some json. I want to
be able to use the pagination plugin or some other solution to page
through my results.
I have posted the code with hopes that someone can help. Also, if you
have any consolidation or better practices tips, please let me know.
Thanks!!
<script type="text/javascript">
$(document).ready(function(){
var search_options = {
type: "POST",
url: "http://"+location.host+"/search/pikes/",
dataType: "json",
beforeSend: function() {
$("#pikeSearch input[type='submit']").attr("disabled","disabled");
$('#pikeResults, #queryString').removeClass().hide();
$('#pikeResults, #queryString').empty().append("<b>Loading...</
b>
");
$('#pikeResults').addClass("ohmy").show("slow");
},
success: function(data) {
$('#queryString p').empty().append("<b>Pikes found: </
b>"+data.num_rows+" | ").show();
$('#queryString p').append("<b>Searched terms: </
b>"+data.query).show("slow");
$('#queryString').addClass("ohmy").show("slow");
// START THE PAGINATION
var page_id = $("#pagination").pagination(data.num_rows, {
items_per_page: 5,
callback: pageselect
});
var start = (page_id * 5) + 1;
var end = (page_id * 5) + 5;
postSearch(json,start,end);
// END THE PAGINATION
$('#page_status').text(data.num_rows);
},
complete: function() {
$("#pikeSearch input[type='submit']").removeAttr( "disabled" );
}
};
$('#pikeSearch').submit(function() {
$(this).ajaxSubmit(search_options);
return false;
});
});
function pageselect(page_id, jq){
var start = (page_id * 5) + 1;
var end = (page_id * 5) + 5;
$('#page_status').text("Showing search results "+start+"-"+end);
return page_id;
}
function postSearch(json,start,end) {
$('#pikeResults').empty().append("<ol></ol>");
if (json.items != null) {
$.each(json.items,function(i,item) {
var info = "<li><b>" + item.fname + " " + item.lname + "</b><br/>";
if (item.address_1 != "") {
info = info + item.address_1 + "<br/>" + item.city + ", " +
item.state + " " + item.zip + "<br/>";
}
if (item.email != "") {
info = info + item.email + "<br/>";
}
var googLoad = "myclick('"+ item.roll +"','" + item.latitude +
"','" + item.longitude + "'); ";
info = info + "<a onclick=\"" + googLoad + "\">" + item.latitude +
", " + item.longitude + "</a><br/>";
$('#pikeResults ol').hide().append(info + "<br/></
li>").show("slow");
$('#pikeResults').removeClass("ohmy");
});
} else {
$('#pikeResults').empty().append("<b>No result(s) found</b></
p>").show("slow");
$('#pikeResults, #queryString').removeClass().addClass("oops");
}
}
</script>