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>    <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%;" onclick="mobiPage.prepagefun();">上一页</button>');

$("#"+target).parent().append('<button type="button" class="btn btn-page" id="nextpage_id" style="width:45%;float:left;margin-left:8%;" onclick="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>    <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%;" onclick="mobiPage.homepagefun();">首页</button>');

$("#"+target).parent().append('<button type="button" class="btn btn-success"
id="prepage_id" style="float:left;width:32%;margin-left:2%;" onclick="mobiPage.prepagefun();">上一页</button>');

$("#"+target).parent().append('<button type="button" class="btn btn-page" id="nextpage_id" style="width:32%;float:left;margin-left:2%;" onclick="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();

}

}

});

}