javascript(jquery)实现前台html简单的分页封装

/**
 * 手机端列表的分页功能
 *  url 后台取数据链接
 * formid 表单的id
 * target 存放数据的目标div的id
 * initload 是否初始化加载数据（现在总是设为true）
 * pagesize 每页的数据条数
 * click 列表的单击事件
 * col  显示的数据列 字段
 * type 分页的样式（目前有2、3两种样式） 
 */
var mobiPage = {};
mobiPage.xul_initsign = 1;
mobiPage.init = function(args){
mobiPage.xul_url = args.url;
mobiPage.xul_formid = args.formid;
mobiPage.xul_target = args.target;
mobiPage.xul_initload = args.initload;
mobiPage.xul_pagesize = args.pagesize;
mobiPage.xul_click = args.click;
mobiPage.xul_type = args.type;
mobiPage.xul_col = args.col;
if(mobiPage.xul_type == 2){
mobiPage.componentInit2(mobiPage.xul_target,mobiPage.xul_pagesize);
}else if(mobiPage.xul_type == 3){
mobiPage.componentInit3(mobiPage.xul_target,mobiPage.xul_pagesize);
}

if(mobiPage.xul_initload){
mobiPage.loadlistdata(mobiPage.xul_target,mobiPage.xul_url,mobiPage.xul_click,mobiPage.xul_formid);
}



}
mobiPage.componentInit2 = function(target,pagesize){
$("#"+target).parent().append('<input type="hidden" name = "sage" id="pagenum_id" value="1"/>');
$("#"+target).parent().append('<input type="hidden" name = "srows" id="pagesize_id" value="'+pagesize+'"/>');
$("#"+target).parent().append('<div > ');
$("#"+target).parent().append('<label>共<span id="rowtotal_id">0</span>条/<span id="pagetotal_id">0</span>页</label>&nbsp;&nbsp;&nbsp;&nbsp;<label id="total">当前<span id="pagecur_id">1</span>页</label>');
$("#"+target).parent().append('</div>');
$("#"+target).parent().append('<div class="col-md-12 searchs">');
$("#"+target).parent().append('<button type="button" class="btn btn-success" id="prepage_id" style="float:left;width:45%;"  οnclick="mobiPage.prepagefun();">上一页</button>');
$("#"+target).parent().append('<button type="button" class="btn btn-page" id="nextpage_id" style="width:45%;float:left;margin-left:8%;" οnclick="mobiPage.nextpagefun();">下一页</button>');
$("#"+target).parent().append('</div>');

}
mobiPage.componentInit3 = function(target,pagesize){
$("#"+target).parent().append('<input type="hidden" name = "spage" id="pagenum_id" value="1"/>');
$("#"+target).parent().append('<input type="hidden" name = "srows" id="pagesize_id" value="'+pagesize+'"/>');
$("#"+target).parent().append('<div > ');
$("#"+target).parent().append('<label>共<span id="rowtotal_id">0</span>条/<span id="pagetotal_id">0</span>页</label>&nbsp;&nbsp;&nbsp;&nbsp;<label id="total">当前<span id="pagecur_id">1</span>页</label>');
$("#"+target).parent().append('</div>');
$("#"+target).parent().append('<div class="col-md-12 searchs">');
$("#"+target).parent().append('<button type="button" class="btn btn-success" id="homepage_id" style="float:left;width:32%;"  οnclick="mobiPage.homepagefun();">首页</button>');
$("#"+target).parent().append('<button type="button" class="btn btn-success" id="prepage_id" style="float:left;width:32%;margin-left:2%;"  οnclick="mobiPage.prepagefun();">上一页</button>');
$("#"+target).parent().append('<button type="button" class="btn btn-page" id="nextpage_id" style="width:32%;float:left;margin-left:2%;" οnclick="mobiPage.nextpagefun();">下一页</button>');
$("#"+target).parent().append('</div>');

}
mobiPage.homepagefun = function(){
$("#prepage_id").attr("disabled","disabled");
var rowstotal = Number($("#rowtotal_id").text());
var psize = Number($("#pagesize_id").val());
$("#pagenum_id").val(1);
$("#pagecur_id").text(1);
if((1) * psize >= rowstotal){
$("#nextpage_id").attr("disabled","disabled");
}else{
$("#nextpage_id").attr("disabled",false);
}
mobiPage.loadlistdata(mobiPage.xul_target,mobiPage.xul_url,mobiPage.xul_click,mobiPage.xul_formid);
}
mobiPage.prepagefun = function(){
$("#nextpage_id").attr("disabled",false);
var psize = $("#pagesize_id").val();
var curpage = $("#pagecur_id").text();
$("#pagenum_id").val(curpage - 1);
$("#pagecur_id").text(curpage - 1);
if(curpage - 1 < 2){
$("#prepage_id").attr("disabled","disabled");
}
mobiPage.loadlistdata(mobiPage.xul_target,mobiPage.xul_url,mobiPage.xul_click,mobiPage.xul_formid);
}
mobiPage.nextpagefun = function(){
$("#prepage_id").attr("disabled",false);
var rowstotal = Number($("#rowtotal_id").text());
var psize = Number($("#pagesize_id").val());
var curpage = Number($("#pagecur_id").text());
$("#pagenum_id").val(curpage + 1);
$("#pagecur_id").text(curpage + 1);
if((curpage + 1) * psize >= rowstotal){
$("#nextpage_id").attr("disabled","disabled");
}
mobiPage.loadlistdata(mobiPage.xul_target,mobiPage.xul_url,mobiPage.xul_click,mobiPage.xul_formid);
}
mobiPage.pageinit = function(pdata){
var gcount = pdata.rows.length;
if(gcount > 0){
var tcount = pdata.total;
var psize = Number($("#pagesize_id").val());
var totalpage = Math.floor(tcount/psize) + 1;
$("#rowtotal_id").text(tcount);
$("#pagetotal_id").text(totalpage);
$("#prepage_id").attr("disabled","disabled");
if(tcount <= psize){
$("#nextpage_id").attr("disabled","disabled");
}
}else{
$("#rowtotal_id").text("0");
$("#pagetotal_id").text("0");
$("#pagecur_id").text("1");
$("#prepage_id").attr("disabled","disabled");
$("#nextpage_id").attr("disabled","disabled");
$("#homepage_id").attr("disabled","disabled");
}

}
mobiPage.loadlistdata = function(target,url,show_list,formid){
$("#"+target).bindS({
url: url,
init:true,
dargger:$("#wrap").parent()[0],
beforeAjax:function(){
var data = $("#"+formid).serializeObject();
data.userName = $('#username').val();
data.password =  $('#password').val();
this.data = data;
},
afterinit:function(data){
if( data.rows.length == 0){
$("#"+target).html("");
$(this.target).append("<div class='col-md-12' style='margin: 50px 0;'><p style='text-align:center;'>没有找到相关数据！</p></div>");
}
},
getmore:function(data){
if(mobiPage.xul_initsign == 1){
mobiPage.pageinit(data);
mobiPage.xul_initsign = 0;
}
if(data.rows.length > 0){
$("#"+target).html("");
for(var i = 0 ; i < data.rows.length ; i++){
var str = "";
str += "<div class='col-md-12 list'>";
str += "<span class='g'>"+data.rows[i][mobiPage.xul_col].Trim()+"</span>";
str += "</div>";
str = $(str);
str.click(function(){
show_list(this);
});
str.data('data',data.rows[i]);
$(this.target).append(str);
}
this.finish();
this.page++;
}else{
this.nomore();
}
}
});
}