码迷,mamicode.com
首页 > Web开发 > 详细

JS分页插件-GCPager

时间:2015-06-12 13:11:55      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

  1 //IE8及以下引入json2.js,IE8不支持JSON.stringify()方法,基于JQuery,使用前先引入1.x版本的JQuery
  2 //服务端返回的格式为{"recordCount":333,"data":.......}
  3 $.extend(
  4     {
  5         GcPager: function (options) {
  6             if (!options) return;
  7             var ContainerId = options.ContainerId;//分页标签的容器ID,必须的参数
  8             var PageSize = options.PageSize ? options.PageSize : 15;//每页显示数量
  9             var PageIndex = options.PageIndex ? options.PageIndex : 1;//当前页索引
 10             var URL = options.URL;//必须的参数,服务端地址
 11             var Args = options.Args;//发送到服务端的数据,json格式
 12             var PrevText = options.PrevText ? options.PrevText : "上一页";//上一页显示文本
 13             var NextText = options.NextText ? options.NextText : "下一页";//下一页显示文本
 14             var FirstText = options.FirstText;//第一页显示文本,不显示不输入此参数
 15             var LastText = options.LastText;//最后一页显示文本,不显示不输入此参数
 16             var PageLabelClass = options.PageLabelClass ? options.PageLabelClass : "";//页标签样式
 17             var CurrentPageLableClass = options.CurrentPageLableClass ? options.CurrentPageLableClass : "";//当前页标签样式
 18             var ContainerClass = options.ContainerClass ? options.ContainerClass : "";//标签容器UL的类名
 19             var HasNavigation = options.HasNavigation;//是否需要数字导航,默认不需要
 20             var NavigationClass = options.NavigationClass ? options.NavigationClass : "";//数字导航框样式
 21             var GobtnClass = options.GobtnClass ? options.GobtnClass : "";//提交按钮样式,配合数字导航用          
 22             var PageIndexArgsName = options.PageIndexArgsName //服务端pageindex参数名称,ajax发送数据时需要对应,必须
 23             var PageSizeArgsName = options.PageSizeArgsName //服务端pagesize参数名称,ajax发送数据时需要对应,必须
 24             var CallBack = options.CallBack;//回调函数,用于处理服务端返回的分页数据来填充自己的表格
 25             var ErrorBack = options.ErrorBack;//请求数据错误的的处理方法
 26             var PageCount = 0;//总页数
 27             Args[PageIndexArgsName] = PageIndex;//将索引页和页数大小添加到args参数传入服务端
 28             Args[PageSizeArgsName] = PageSize;
 29 
 30             var oContainer = document.getElementById(ContainerId);
 31             oContainer.pagerOptions = options;//将参数保存在window对象中
 32 
 33             $.GcPager.Goto = function (pageindex) {
 34                 var o = document.getElementById(ContainerId).pagerOptions;
 35                 o.PageIndex = pageindex;
 36                 document.getElementById(ContainerId).pagerOptions = o;
 37                 $.GcPager(o);
 38             }
 39             $.ajax({
 40                 type: "Post",
 41                 url: URL,
 42                 data: JSON.stringify(Args),
 43                 contentType: "application/json; charset=utf-8",
 44                 dataType: "json",
 45                 cache: false,
 46                 success: function (data) {
 47                     $("#" + ContainerId).empty();
 48                     var data = $.parseJSON(data.d ? data.d : data)//data.d是webservies返回的json对象
 49                     var recordCount = data.recordCount;//总记录数
 50                     PageCount = Math.ceil(recordCount / PageSize);//计算总页数
 51                     var oUl = $("<ul style=‘list-style:none‘ class=" + ContainerClass + "><ul>");
 52                     if (PageCount > 0) {
 53                         if (FirstText) {
 54                             oUl.append($("<li><a href=‘#‘ onclick=‘$.GcPager.Goto(1)‘ class=‘" + PageLabelClass + "‘ " + (PageIndex == 1 ? ‘disabled‘ : ‘‘) + ">" + FirstText + "</a></li>"))//第一页
 55                         }
 56                         oUl.append($("<li><a href=‘#‘ onclick=‘$.GcPager.Goto(" + (PageIndex - 1) + ")‘  class=‘" + PageLabelClass + "‘ " + (PageIndex == 1 ? ‘disabled‘ : ‘‘) + ">" + PrevText + "</a></li>"))//上一页
 57 
 58                         //当前页左边
 59                         if (PageIndex <= 6) {
 60                             for (var i = 1; i < PageIndex; i++) {
 61                                 oUl.append($("<li><a href=‘#‘ onclick=‘$.GcPager.Goto(" + i + ")‘  class=‘" + PageLabelClass + "‘>" + i + "</a></li>"))
 62 
 63                             }
 64                         }
 65                         else {
 66                             for (var i = 1; i <= 2; i++) {
 67                                 oUl.append($("<li><a href=‘#‘ onclick=‘$.GcPager.Goto(" + i + ")‘  class=‘" + PageLabelClass + "‘>" + i + "</a></li>"))
 68                             }
 69                             oUl.append($("<li><a href=‘#‘   class=‘" + PageLabelClass + "‘ disabled>...</a></li>"))
 70                             for (var i = PageIndex - 3; i < PageIndex; i++) {
 71                                 oUl.append($("<li><a href=‘#‘ onclick=‘$.GcPager.Goto(" + i + ")‘  class=‘" + PageLabelClass + "‘>" + i + "</a></li>"))
 72 
 73                             }
 74                         }
 75 
 76                         //当前页
 77                         oUl.append($("<li><a href=‘#‘  disabled>" + PageIndex + "</a></li>"))
 78 
 79 
 80                         //当前页右边
 81                         if ((PageCount - PageIndex) <= 5) {
 82                             for (var i = PageIndex + 1; i <= PageCount; i++) {
 83                                 oUl.append($("<li><a href=‘#‘ onclick=‘$.GcPager.Goto(" + i + ")‘  class=‘" + PageLabelClass + "‘>" + i + "</a></li>"))
 84 
 85                             }
 86                         }
 87                         else {
 88                             for (var i = PageIndex + 1; i <= PageIndex + 3; i++) {
 89                                 oUl.append($("<li><a href=‘#‘ onclick=‘$.GcPager.Goto(" + i + ")‘  class=‘" + PageLabelClass + "‘>" + i + "</a></li>"))
 90 
 91                             }
 92                             oUl.append($("<li><a href=‘#‘   class=‘" + PageLabelClass + "‘ disabled>...</a></li>"))
 93 
 94                             for (var i = PageCount - 1; i <= PageCount; i++) {
 95                                 oUl.append($("<li><a href=‘#‘ onclick=‘$.GcPager.Goto(" + i + ")‘  class=‘" + PageLabelClass + "‘>" + i + "</a></li>"))
 96 
 97                             }
 98                         }
 99 
100                         oUl.append($("<li><a href=‘#‘ onclick=‘$.GcPager.Goto(" + (PageIndex + 1) + ")‘  class=‘" + PageLabelClass + "‘ " + (PageIndex == PageCount ? ‘disabled‘ : ‘‘) + ">" + NextText + "</a></li>"))//下一页
101 
102                         if (LastText) {
103                             oUl.append($("<li><a href=‘#‘ onclick=‘$.GcPager.Goto(" + PageCount + ")‘ class=‘" + PageLabelClass + "‘ " + (PageIndex == PageCount ? ‘disabled‘ : ‘‘) + ">" + LastText + "</a></li>"))//最后一页
104                         }
105 
106                         if (HasNavigation) {//数字导航
107                             var oInput = $("<li><input type=‘text‘ style=‘width:50px;‘ id=‘navigationlable‘ class=‘" + NavigationClass + "‘></li>");
108                             oInput.children("input").keydown(function (ev) {//限制输入为数字
109                                 var oEvent = ev || event;
110                                 if (!(oEvent.keyCode == 46) && !(oEvent.keyCode == 8) && !(oEvent.keyCode == 37) && !(oEvent.keyCode == 39))
111                                     if (!((oEvent.keyCode >= 48 && oEvent.keyCode <= 57) || (oEvent.keyCode >= 96 && oEvent.keyCode <= 105)))
112                                         oEvent.returnValue = false;
113                             });
114                             oUl.append(oInput);
115                             var obj = $("<li><input type=‘button‘ value=‘Go‘  class=‘" + GobtnClass + "‘ ></li>")
116                             obj.click(function () {
117                                 $.GcPager.Goto($("#" + ContainerId).find("#navigationlable").val());
118                             })
119                             oUl.append(obj);
120                         }
121                     }
122                     $("#" + ContainerId).append(oUl);
123                     if (CallBack)
124                         CallBack(data);
125                 },
126                 error: function (XMLHttpRequest, textStatus, errorThrown) {
127                     if (ErrorBack)
128                         ErrorBack(XMLHttpRequest, textStatus, errorThrown);
129                 },
130             })
131         }
132     })



使用示例:
 1  $.GcPager({
 2                 ContainerId: "pagelable",//
 3                 URL: "ItemInKu.aspx/GetItems",
 4                 ContainerClass: "pagination",
 5                 PageIndex: 1,
 6                 PageSize: 15,
 7                 PageIndexArgsName: "pageIndex",
 8                 PageSizeArgsName: "pageSize",
 9                 NavigationClass: "form-control",
10                 GobtnClass: "btn btn-default",
11                 Args:
12                     {
13                         "cangkuId": $(‘#<%=ddlCangku.ClientID%>‘).val(),
14                         "typeId": $(‘#<%=ddlType.ClientID%>‘).val(),
15                         "searchText": $(‘#txtSearchText‘).val()
16                     },
17                 CallBack: function (d) {
18                     var data = d.data;
19                     $("#tbItems").children("tbody").empty();
20                     for (var i = 0; i < data.length; i++) {
21                         $("#tbItems").children("tbody").append($("<tr><td>"
22                             + data[i].ItemId + "</td><td>"
23                             + data[i].NumberId + "</td><td>" + data[i].Name +
24                             "</td><td>" + data[i].Unit + "</td><td>" + data[i].GuiGe
25                             + "</td><td>" + data[i].TotalCount + "</td><td style=‘padding: 1px‘>26                                     <div class=‘input-group‘><input type=‘text‘ class=‘form-control‘ placeholder=‘输入单价‘27                                     aria-describedby=‘basic-addon2‘><span class=‘input-group-addon‘ id=‘basic-addon2‘>元</span>28                                     </div></td><td style=‘padding: 1px‘><div class=‘input-group‘>29                                     <input type=‘text‘ class=‘form-control‘ placeholder=‘输入数量‘ aria-describedby=‘basic-addon3‘>30                                     <span class=‘input-group-addon‘ id=‘basic-addon3‘>" + data[i].Unit + "</span></div></td>31                                     <td style=‘cursor:pointer;text-align:center‘>32                                     <a hred=‘#‘ onclick=‘SelectItem(this)‘ title=‘添加到已选‘>33                                     <span class=‘glyphicon glyphicon-plus‘></span></a></td></tr>"))
34                     }
35                 },
36                 ErrorBack: function (XMLHttpRequest, textStatus, errorThrown) {
37                     throw new Error("数据请求错误!");
38                 }
39             })

 

 

JS分页插件-GCPager

标签:

原文地址:http://www.cnblogs.com/gucaocao/p/4571259.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!