关于分页的理解

分页插件是每个前端必不可少的插件，一般一个项目一个插件就ok，如果你的项目用到了两个以上的分页插件，那么，要不是与后台没有约定数据格式、要么没有和美工设计协调分页样式。大多数的网站一般分页样式也就一个（奇葩美工除外），所以就着分页样式，你得和后台把数据接口定义好，如：

data: {

pagination: {

current_page: "当前页",

total_page: "总页数",

total_count: "总数据数",

page_size: "每页数据数"

},

list: [

{

"id": 1,

"txt": "aaa"

},

{

"id": 2,

"txt": "bbb"

}

]

}}

pagination中装的就是我们要用到的分页数据，当然也有参数更多的，不过基本上差不多，这几个参数必须要的，page_size、total_count、current_page；total_page 总页数这个可要也不要，有的话方便计算

接下来考虑参数问题

function pages(pageUrl,pageContent,callblack,data,type){

this.pageContent = pageContent ? pageContent : $(".pageContent");

this.data = data ? data : {

page_size:10,

current_page:1

}

this.data.page_size = this.data.page_size ? this.data.page_size : 10,

this.data.current_page = this.current_page ? this.current_page : 1

this.type = type ? type : 1;

this.pageUrl = pageUrl;

this.callblack = callblack;

}

设置好默认参数:

pageUrl 这个必不可少请求地址

pageContent 这个是页码显示的位置，页面就一个分页的话 可用默认值，这个值主要是来处理一个页面多个分页的情况

callblack 这个是分页显示完后回调的方法，里面一般是封装的关于数据的处理，我们在分完页后把数据打包传给回调方法，这个方法还可以改进，

data 内传参数，默认第一页 每页十条，可做内容筛选。

type 这里分两种，默认是分页，类型2是加载更多模式。

接下来处理分页的逻辑了，

一般是

首页 。。。 往前三页 当前页 往后三页。。。 尾页

这种模式

首先见一个方法拓展

`Pages.prototype.showPages = function(pagination){

}`

显示处理下数据 ，后台可能给你传个字符串也说不定

var current_page = parseInt(pagination.current_page);//当前页

var total_page = parseInt(pagination.total_page);//总页数

var total_count = parseInt(pagination.total_count);//总数据数

var page_size = parseInt(pagination.page_size);//每页数据数

判断一 如果总数据等于或小于每页数据数则不生成分页页码

if(total_count <= page_size){

$this.pageContent.css("height","0");

return;

}

接下来生成首页页码

var $afirst = $("<a></a>");

$afirst.appendTo($this.pageContent);

$afirst.text(1);

if(current_page == 1){

$afirst.addClass("currentPage");

}

接下来生成中间的页码

接下来分成两种情况

一 页码总数少于或等于7个时 直接显示所有的页码 不用隐藏一部分

if(total_page <= 7){

for (var i = 2 ; i<total_page ; i++) {

var $a = $("<a></a>");

$a.appendTo($this.pageContent);

$a.text(i);

if(current_page == i){

$a.addClass("currentPage");

}

}

}

注意上面的循环是从2到total_page-1的 我们已经生成了首页了 （这里也可以把首页放到这里面）

二 页码总数多余7个时 分为三个情况

二.1：

当前页数为4个以内的时候显示从二道六的页码

for (var i = 2 ; i<7 ; i++) {

var $a = $("<a></a>");

$a.appendTo($this.pageContent);

$a.text(i);

if(current_page == i){

$a.addClass("currentPage");

}

}

二.2：

总页数-当前页数小于3页的时 生成倒数的7个码

if((total_page - current_page) <= 3){

var $span = $("<span></span>");

$span.appendTo($this.pageContent);

$span.text("......")

for (var i = (total_page - 5) ; i<total_page ; i++) {

var $a = $("<a></a>");

$a.appendTo($this.pageContent);

$a.text(i);

if(current_page == i){

$a.addClass("currentPage");

}

}

}

二.3

其他情况生成当前页的前三页和后三页

for (var i = (current_page - 2) ; i<(current_page + 3) ; i++) {

var $a = $("<a></a>");

$a.appendTo($this.pageContent);

$a.text(i);

if(current_page == i){

$a.addClass("currentPage");

}

}

这就是页码的生成

接着是ajax的部分

Pages.prototype.Ajax = function(){

}

在ajax的成功方法内加载showPages方法

$this.showPages(data.data.pagination);

给所有的页码加上事件

$this.data.current_page = $(this).text();

$this.Ajax();

这样的分页 页码部分就算是完了

但是在数据处理上我只是把参数返回给回调函数了