java jquery 分页插件怎样实现_基于jQuery的实现简单的分页控件

1：效果图

2：素材

3：编码

3.1思考

需要做什么？

1：分页控件需要向后台发送请求，发送的参数包括当前页，每页显示数量，查询条件；并且获取数据加载到当前页面；

2：进行修改删除操作的时候能记住当前页；

3：查询后翻页的时候可以可以记住当前查询的条件

3.2实现

HTML

jQuery

为了我们的控件可以随意使用，我们将其写成插件的形式，首先搭个框架，我们将插件命名为simplePage

(function($){

$.fn.simplePage=function(o){

var options={

//配置参数

};

return //sth

}

})(jQuery)

默认有哪些参数呢？

由于需要发送当前页，每页显示数量，所以需要 currentPage，pageSize 两个基本参数；

由于需要查询表格内容，所以需要一个放置查询条件的表单 form；

由于需要修改删除后记住当前页，所以需要一个标志指示当前进行的是何操作type；

为了使我们的程序更具有灵活性，加上获取数据后需要加载到的container，还有就是分页控件加载的pager，

具体如下

var options={

pager: '.pager',//表格控件的容器

container: '.tableData',//放置表格数据的容器

form: '#form',//放置查询条件的表单

pageForm: '#pageForm',//放置隐藏与的Div

url: '',//发送请求的地址

currentPage: 1,

pageSize: 2

type: null,//可选：action,

pageShow:7

}

为了便于维护，我们声明一个独立的对象来进行获取数据，绑定事件的操作，我们将这个函数命名为$.page

$.page = {

//

setPage: function(o){

},

//获取当前页

getCurrentPage: function(o){

},

//获取每页显示数量

getPageSize: function(o){

},

//生成发送所需要的json数据

genData: function(o){

},

//发送数据

loadData: function(o){

}

}

实现以上所声明的函数，当分页第一次加载的时候，我们需要从服务器获取总页数来生成分页控件，所以首先实现loadData函数

loadData: function(o){

var that = this;

var data = that.genData(o);

$.ajax({

url: o.url,

data: data,

type: 'post',

dataType: 'html',

cache: false,

success: function(result){

var res = $(result).find('tbody').html();

var totalPage = $(result).find('#totalPage').val();

var currentPage = $(result).find('#currentPage').val();

o.currentPage=currentPage;

o.pager.empty();

$.line.setLine(totalPage,o); //调用生成分页控件的函数

},

error: function(){

alert("error");

}

})

}

下面我们实现上面生成分页控件的函数$.line.setLine

$.line={

setLine:function(totalPage,o){

for(var i=0;i

var a=$('').html(''+(i+1)+'').addClass('pageA').bind('click',function(){

var s=$(this);

s.siblings().removeClass('pageActive');

s.addClass('pageActive');

o.currentPage=s.text();

$.page.loadData(o);

});

if(o.currentPage==i+1){

a.addClass('pageActive');

}

o.pager.append(a);

}

var limit=this.getLimit(o,totalPage);

var aPage=o.pager.find('a.pageA').not('a.previous,a.nextAll,a.record');

aPage.hide();

aPage.slice(limit.start,limit.end).show();

var prev=$('').html('上一页').addClass('pageA previous').unbind('click').bind('click',function(){

var pageActive=o.pager.find('a.pageActive');

var s=$(this);

if(pageActive.prev().text()=='上一页'){

alert('已经是第一页!');

return false;

}

pageActive.removeClass('pageActive');

pageActive.prev().addClass('pageActive');

o.currentPage=pageActive.prev().text();

$.page.loadData(o);

});

var next=$('').html('下一页').addClass('pageA nextAll').unbind('click').bind('click',function(){

var pageActive=o.pager.find('a.pageActive');

var s=$(this);

if(pageActive.next().text()=='下一页'){

alert('已经是最后一页!');

return false;

}

pageActive.removeClass('pageActive');

pageActive.next().addClass('pageActive');

o.currentPage=pageActive.next().text();

$.page.loadData(o);

});

var pageActiveText=o.pager.find('a.pageActive').text();

var record=$('').html(''+pageActiveText+'/'+totalPage+'').addClass('pageA record');

o.pager.prepend(prev).prepend(record).append(next);

}

}

在上面的代码中我们给当前的页面加上了pageActive类，所以现在我们可以实现$.page的getCurrentPage函数，非常简单

getcurrentPage: function(o){

var p = o.pager.find("a.pageActive").text();

return p;

}

接着我们实现生成json数据的genData函数，json格式为{key:value,key:value}

genData: function(o){

var sdata = $.extend({}, { "currentPage": o.currentPage,

"pageSize": o.pageSize}, $.jsonObj(o.pageForm));

return sdata;

},

上面的$.jsonObj为自定义的函数，为了生成我们需要的json格式以便发送查询的数据，只支持input，select

$.jsonObj = function(form){

//判断是否有序列化的东东

if (!$(form).html() || $(form).html() == null || $.trim($(form).html()) == "") {

return null;

}

var formEl = $(form).find('input[type="text"]');

var formselect = $(form).find('select');

var json = "{";

for (var i = 0; i < formEl.length - 1; i++) {

var name = formEl.eq(i).attr('name');

var val = "'" + formEl.eq(i).val() + "'";

json += name;

json += ":";

json += val;

json += ",";

}

var lname = formEl.eq(formEl.length - 1).attr('name');

var lval = "'" + formEl.eq(formEl.length - 1).val() + "'";

json += lname;

json += ":";

json += lval;

if (formselect) {

json += ",";

for (var i = 0; i < formselect.length - 1; i++) {

var name = formselect.eq(i).attr('name');

var val = "'" + formselect.eq(i).val() + "'";

json += name;

json += ":";

json += val;

json += ",";

}

var lname = formselect.eq(formselect.length - 1).attr('name');

var lval = "'" + formselect.eq(formselect.length - 1).val() + "'";

json += lname;

json += ":";

json += lval;

}

json += "}";

var jsonObj = eval("(" + json + ")")

return jsonObj;

}

接着我们为查询表单的按钮绑定事件，我们扩展下我们的$.page函数

handleQueryLine:function(o){

$(o.form).find(".query").click(function(){

//$(o.pageForm).append($(o.form).clone(true));

$(o.pageForm).empty();

$(o.form).find('input[type="text"]').each(function(){

var vals = $(this).val();

var s = $(this).clone().val(vals);

$(o.pageForm).append(s);

});

$(o.form).find('select').each(function(){

var vals = $(this).val();

var s = $(this).clone().val(vals);

$(o.pageForm).append(s);

});

$.page.query(o);

});

}

ok，基本的函数已经完成，下面完成主函数

$.fn.simplePage = function(os){

var options = {

pager: '.pager',//表格控件的容器

container: '.tableData',//放置表格数据的容器

form: '#form',//放置查询条件的表单

pageForm: '#pageForm',//放置隐藏与的Div

url: '',//发送请求的地址

currentPage: 1,

pageSize: 2,

type: null,//可选：action,

pageShow:7//,

};

var o = $.extend(options, os);

return this.each(function(){

o.pager = $(this).find(o.pager);

o.container = $(this).find(o.container);

//首先清除click事件

o.pager.unbind('click');

if (o.type == 'action') {

//指定的动作，比如删除时的事件，这时需要在当前页刷新数据

o.currentPage = $.page.getPageSize(o);

o.pageSize = $.page.getCurrentPage(o);

$.page.loadData(o);

return;

}

$.page.loadData(o);

$.line.handleQueryLine(o);

})

}

现在我们的分页还不是很好看，我们用firebug查看下生成的分页结构，写了如下样式

.pager a {

display: block;

float: left;

width: 16px;

height: 16px;

margin: 5px;

}

.pager a.pageA{

background:url("../images/grid/page.png") no-repeat left 0px transparent;

display:inline-block;

font-size:14px;

margin:0 3px;

padding-left:6px;

text-align:center;

vertical-align:bottom;

height:auto;

width:auto;

cursor:pointer;

}

.pager a.pageA span{

background:url("../images/grid/page.png") no-repeat right 0px transparent;

display:inline-block;

height:24px;

line-height:22px;

padding-right:6px;

}

.pager a.pageActive{

background:url("../images/grid/page.png") no-repeat left -24px transparent;

}

大功告成！！

DEMO 下载