Jquery异步分页插件

 1 function Page(count,listRow,showPageCount,obj,getData){
 2     var o = {};//分页对象
 3     o.nowPage = 1;//当前为第几页
 4     o.listRow = listRow;//一页显示多少条数据
 5     o.getData = getData;//取数据的回调函数
 6     o.obj = obj;//制定在那个元素后面显示(Jquery对象)
 7     o.count = count;//数据总数
 8     //总页数
 9     o.totalPage = o.count% o.listRow == 0? parseInt(o.count/ o.listRow) : parseInt(o.count/ o.listRow+1);
10     //显示多少个分页按钮
11     o.showPageCount = o.showPageCount < o.totalPage? o.showPageCount : o.totalPage;
12     o.first = 1;//第一个显示的分页按钮是多少
13     //最后一个显示的分页按钮是多少
14     o.last = o.totalPage > showPageCount?showPageCount: o.totalPage;

 1 /*
 2      *  创建分页控件
 3      */
 4     o.createPage = function()
 5     {
 6         //拼接分页控件
 7         var html = "<div class = ‘page-div‘><div class = ‘my-page‘>";
 8         for(var i = 0 ; i < o.showPageCount ; i++)
 9         {
10             //拼接每一个分页数组按钮，并为其设置id
11             html += "<a href=‘#‘ id=page"+(i+1)+" class = ‘page-item each-page‘>"+(i+1)+"</a>";
12         }
13         //拼接下一页按钮
14         html += "<a href=‘#‘ class = ‘page-item next-page‘>>></a></div></div>";
15         //在指定的对象后创建控件
16         o.obj.after(html);
17         $("#page1").css("background-color","gray");
18         //调用获取数据的回调函数
19         o.getData(o.nowPage, o.listRow);
20     }

 1 /*
 2      *  为控件绑定点击事件
 3      */
 4     o.bindAction = function()
 5     {
 6         $(".pre-page").click(function(){
 7             o.nowPage = parseInt(o.nowPage) - 1;
 8             if(o.nowPage < (o.totalPage-o.showPageCount/2) && o.first > 1)
 9             {
10                 o.first = parseInt(o.first) - 1;
11                 o.last = parseInt(o.last) - 1;
12             }
13             o.updatePage();
14             o.updateColor($(this),$("#page"+ o.nowPage));
15             o.getData(o.nowPage, o.listRow);
16         });
17 
18         $(".each-page").click(function(){
19             o.nowPage = $(this).text();
20             if(o.nowPage >= o.showPageCount/2+1 && o.nowPage <= (o.totalPage - o.showPageCount/2))
21             {
22                 if(o.showPageCount%2 == 0)
23                 {
24                     o.first =  parseInt(o.nowPage)-parseInt(o.showPageCount/2-1);
25                     o.last =  parseInt(o.nowPage)+parseInt(o.showPageCount/2);
26                 }
27                 else
28                 {
29                     o.first =  parseInt(o.nowPage)-parseInt(o.showPageCount/2);
30                     o.last =  parseInt(o.nowPage)+parseInt(o.showPageCount/2);
31                 }
32             }
33             else if(o.nowPage < o.showPageCount/2)
34             {
35                 o.first =  1;
36                 o.last =  o.showPageCount;
37             }
38             else if(o.nowPage > (o.totalPage - o.showPageCount/2))
39             {
40                 o.first = parseInt(o.totalPage) - parseInt(o.showPageCount)+1;
41                 o.last = parseInt(o.totalPage);
42             }
43             o.updatePage();
44             o.updateColor($(this),$("#page"+ o.nowPage));
45             o.getData(o.nowPage, o.listRow);
46         });
47 
48         $(".next-page").click(function(){
49             o.nowPage = parseInt(o.nowPage) + 1;
50             if(o.last < o.totalPage && o.nowPage > o.showPageCount/2+1)
51             {
52                 o.first = parseInt(o.first) + 1;
53                 o.last = parseInt(o.last) + 1;
54             }
55             o.updatePage();
56             o.updateColor($(this),$("#page"+ o.nowPage));
57             o.getData(o.nowPage, o.listRow);
58         });
59     }

 1 /*
 2      *  更新分页控件
 3      */
 4     o.updatePage = function()
 5     {
 6         //根据当前页判断重新拼接分页控件
 7         var html = "";
 8         if(o.nowPage != 1)
 9         {
10             html += "<a href=‘#‘ class = ‘page-item pre-page‘><<</a>";
11         }
12         for(var i = o.first ; i <= o.last ; i++)
13         {
14             html += "<a href=‘#‘ id=page"+i+" class = ‘page-item each-page‘>"+i+"</a>";
15         }
16         if(o.nowPage != o.totalPage)
17         {
18             html+="<a href=‘#‘ class = ‘page-item next-page‘>>></a>";
19         }
20         $(".my-page").html(html);
21         o.bindAction();
22     }

 1 /**
 2      *  显示分页空间
 3      */
 4     o.show = function()
 5     {
 6         o.delete();
 7         o.createPage();
 8         o.bindAction();
 9     }
10 /*
11      *  更新控件颜色
12      */
13     o.updateColor = function(self,obj)
14     {
15         //将所有的分页按钮背景颜色设为白色
16         self.parent().find(‘a‘).css("background-color","white");
17         //将选中的按钮背景设为灰色
18         obj.css("background-color","gray");
19     }
20     /*
21      *  删除控件
22      */
23     o.delete = function()
24     {
25         $(".page-div").html(" ");
26     }

 1 var searchTable = function(nowPage,listRows)
 2          {
 3              var url = $("#search").attr("url");
 4              var startTime = $("#startTime").val();
 5              var endTime = $("#endTime").val();
 6              var realname = $("#realname").val();
 7              var mode = 0;
 8              if($("#user_mode").attr("value") == 1)
 9                  mode = 1;
10              else
11                  mode = 2;
12              $.ajax({
13                  type:"post",
14                  url:url,
15                  data:{"startTime":startTime,"endTime":endTime,"real_name":realname,"mode":mode,"now_page":nowPage,"list_rows":listRows},
16                  success:function(data)
17                  {
18                      if(data == 0)
19                      {
20                          alert("暂无符合要求数据");
21                      }
22                      else
23                      {
24                          data = JSON.parse(data);
25                          removeDataRow();
26                          addNewData(data);
27                      }
28                  },
29                  error:function()
30                  {
31                      alert("查询失败");
32                  }
33              });
34          }

 1         var url = $("#data-count").attr("value");
 2         $.ajax({
 3             url: url,
 4             type:"post",
 5             success:function(result)
 6             {
 7                 var page = new Page(result,1,10,$("#data-table"),searchTable);
 8                 page.show();
 9             }
10             ,
11             error:function()
12             {
13                 alert("路径错误");
14             }
15         });