Simple Ajax pagination which commonly operates for searchbox,alphabets,numerics in same page
1.From search text
if(document.getElementById("searchName")){
var elem = document.getElementById('searchName');
if(typeof elem !== 'undefined' && elem !== null && elem !== "") {
document.getElementById('searchName').onkeypress= function(e){
var optInit = pageselectCallback(alphas);
$("#ajaxpagination").pagination(tot, optInit);
}
}
2.From alphabet click
var alpha='';
$("#myid li").click(function() {
alpha=this.id;
var page_index=0;
var endval=;
var session_id=;
var tot=;
var str = "abcdefghijklmnopqrstuvwxyz";
$.ajax({
url: "",
type: "post",
data:"session_id="+session_id+"&alpha="+alpha,
success: function(data){
var tot=parseInt(data);
var optInit = pageselectCallback(alpha);
$("#ajaxpagination").pagination(tot, optInit);
// Event Handler for for button
$("#setoptions").click(function(){
var opt = getOptionsFromForm();
$("#ajaxpagination").pagination(tot,opt);
});
}
});
});
3.From numeric number click
$(document).ready(function(){
var tot=;
numericpagination(tot)
});
function numericpagination(tot){
var optInit = getOptionsFromForm();
if(tot>
{
$("#ajaxpagination").pagination(tot, optInit);
// Event Handler for for button
$("#setoptions").click(function(){
var opt = getOptionsFromForm();
var tot=;
$("#ajaxpagination").pagination(tot,opt);
});
}
}
4.Pagination functionality call
function pageselectCallback(page_index){
var tot=;
var items_per_page =8;
num = Math.ceil(tot)/8;
var max_elem = Math.min((page_index+1) * items_per_page,tot);
var newcontent = '';
var endval=;
var url_id=;
if(isNaN(page_index))
{
alpha=page_index;
}
$("#Loading_ajax").show();
$.ajax({
url: "",
//this portion is HTML data to bereplaced in content part
type: "post",
data:"startnum="+page_index+"&endnum="+endval+"&url_id="+url_id+"&alpha="+alpha,
success: function(data){//alert(data);
$(".user_cards").html(data);
$("#Loading_ajax").hide();
}
});
return false;
}
function getOptionsFromForm(){
var opt = {callback: pageselectCallback};
return opt;
}
5.Part of Selected page style and functionality
function pageSelected(page_id, evt){
current_page = page_id;
drawLinks();
var continuePropagation = opts.callback(page_id, panel);
if (!continuePropagation) {
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
return continuePropagation;
}
