1：效果图
2：素材
3：编码
3.1思考
需要做什么？
1：分页控件需要向后台发送请求，发送的参数包括当前页，每页显示数量，查询条件；并且获取数据加载到当前页面；
2：进行修改删除操作的时候能记住当前页；
3：查询后翻页的时候可以可以记住当前查询的条件
3.2实现
HTML
复制代码 代码如下:
<!--存储数据的容器-->
<div>
</div>
<!--分页控件显示-->
<div></div>
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<totalPage;i++){
var a=$('<a/>').html('<span>'+(i+1)+'</span>').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=$('<a/>').html('<span>上一页</span>').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=$('<a/>').html('<span>下一页</span>').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=$('<a/>').html('<span>'+pageActiveText+'https://www.jb51.net/'+totalPage+'</span>').addClass('pageA record');
o.pager.prepend(prev).prepend(record).append(next);
}
}
在上面的代码中我们给当前的页面加上了pageActive类，所以现在我们可以实现$.page的getCurrentPage函数，非常简单
复制代码 代码如下: