标签:
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 })
标签:
原文地址:http://www.cnblogs.com/gucaocao/p/4571259.html