<%-- JS --%>
(function ($) { $.fn.extend({ CreatePaging: function (options) { var pagingBtn = this; CreatePagingBtn(pagingBtn, options); //数字分页按钮 $(this).find(".number").live("click", function () { options.currentPage = parseInt($(this).text()); //创建分页按钮 CreatePagingBtn(pagingBtn, options); }); //上一页分页按钮 $(this).find(".prev").live("click", function () { var currentPage = options.currentPage; if (currentPage > 1) { options.currentPage = currentPage - 1; CreatePagingBtn(pagingBtn, options); } }); //下一页分页按钮 $(this).find(".next").live("click", function () { var currentPage = options.currentPage; var pageCount = options.pageCount; if (currentPage < pageCount) { options.currentPage = currentPage + 1; CreatePagingBtn(pagingBtn, options); } }); //跳转按钮 $(this).find(".goto").live("click", function () { var currentPage = parseInt($(".txtGotoNumber").val()); var pageCount = options.pageCount; if (currentPage >= 1 && currentPage <= pageCount) { options.currentPage = currentPage; CreatePagingBtn(pagingBtn, options); } }); } }); })(jQuery); function CreatePagingBtn(pagingBtn, options) { //获取页总数 var pageCount = options.pageCount; //获取当前页 var currentPage = options.currentPage; //获取显示的按钮总数 var btnCount = options.btnCount; //获取是否启用数字分页 var isEnableNumberPaging = options.isEnableNumberPaging; //获取是否启用上一页分页 var isEnablePrevPaging = options.isEnablePrevPaging; //获取是否启用下一页分页 var isEnableNextPaging = options.isEnableNextPaging; //获取是否启用跳转 var isEnableGoto = options.isEnableGoto; //获取是否显示页提示 var isShowPageHint = options.isShowPageHint; if (pageCount > 0) { var btn_html = ""; if (isShowPageHint == true) { btn_html += "<div class='pageHint'>共<span class='dataCount'>" + options.dataCount + "</span>条记录，<span class='currentPage'>" + currentPage + "</span>/<span class='pageCount'>" + pageCount + "</span>页</div>"; } if (isEnablePrevPaging == true) { btn_html += "<div class='prev'>上一页</div>"; } if (isEnableNumberPaging == true) { if (pageCount > btnCount) { var frontBtnCount = Math.floor((btnCount - 3) / 2); var behindBtnCount = Math.ceil((btnCount - 3) / 2); if (currentPage == 1) { btn_html += "<div class='number click'>" + 1 + "</div>"; } else { btn_html += "<div class='number'>" + 1 + "</div>"; } if (currentPage - frontBtnCount > 1) { btn_html += "<span class='ellipsis'>...</span>"; } for (var i = currentPage - frontBtnCount; i <= currentPage + behindBtnCount; i++) { if (i < pageCount && i > 1) { if (i == currentPage) { btn_html += "<div class='number click'>" + i + "</div>"; } else { btn_html += "<div class='number'>" + i + "</div>"; } } } if (i < pageCount) { btn_html += "<span class='ellipsis'>...</span>"; } if (currentPage == pageCount) { btn_html += "<div class='number click'>" + pageCount + "</div>"; } else { btn_html += "<div class='number'>" + pageCount + "</div>"; } } else { for (var i = 1; i <= pageCount; i++) { if (i == currentPage) { btn_html += "<div class='number click'>" + i + "</div>"; } else { btn_html += "<div class='number'>" + i + "</div>"; } } } } if (isEnableNextPaging == true) { btn_html += "<div class='next'>下一页</div>"; } if (isEnableGoto == true) { btn_html += "<div class='goto_number'>跳转到<input class='txtGotoNumber' type='text' value='" + options.currentPage + "' /></div>"; btn_html += "<div class='goto'>GO</div>"; } $(pagingBtn).html(btn_html); if (options.success != undefined) { options.success(options); } } else { $(pagingBtn).html(""); } }
<%-- JS --%>
<%-- CSS --%>
* { margin: 0px; padding: 0px; } .paging_btn { text-align: center; } .paging_btn .prev { width: 64px; height: 24px; line-height: 24px; text-align: center; display: inline-block; border: 1px solid #DEDEDE; margin: 0px 2px; padding: 0px 5px; color: #939393; } .paging_btn .next { width: 64px; height: 24px; line-height: 24px; text-align: center; display: inline-block; border: 1px solid #DEDEDE; margin: 0px 2px; padding: 0px 5px; color: #939393; } .paging_btn .number { width: 22px; height: 18px; line-height: 18px; text-align: center; display: inline-block; border: 1px solid #DEDEDE; margin: 0px 2px; color: #595959; } .paging_btn .ellipsis { width: 24px; color: #595959; } .paging_btn .click { background: #FFBA01; color:White; } .paging_btn .prev:hover { cursor: pointer; } .paging_btn .next:hover { cursor: pointer; } .paging_btn .number:hover { cursor: pointer; } .paging_btn .goto_number { display: inline-block; color:#535353; margin-left:20px; } .paging_btn .txtGotoNumber { width:22px; height:18px; border:1px solid #D1D1D1; color:#636363; text-align:center; } .paging_btn .goto { width:37px; height:18px; line-height: 18px; text-align: center; display: inline-block; background: #3E403F; color:#FFFFFF; margin-left:10px; } .paging_btn .goto:hover { cursor: pointer; } .paging_btn .pageHint { display: inline-block; color:#51534E; } .paging_btn .dataCount { color:#2773AF; }
<%-- CSS --%>
<%-- HTML--%>
<div id="pa2" class="paging_btn" data-pagesize="6" style="margin-top: 10px;"> </div>
<%-- HTML --%>
<%-- Ajax页面加载事件 --%>
var sum = <%=Count %> ;//获取总数
//调用事件
$("#pa2").CreatePaging({ pageCount:Math.ceil( sum/10), currentPage:1, btnCount:10, isEnableNumberPaging: true, isEnablePrevPaging: true, isEnableNextPaging: true, isEnableGoto: true, isShowPageHint: true, dataCount:sum, success:function(options) { $.ajax({ type: "POST",//POST提交 url: "SelecteInformation.aspx/Informationlist",//页面地址/方法 data: "{'pag':'" + options.currentPage + "'}",//参数 contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { var arary = eval(data.d);//返回数据集合 console.log(arary);//编译 $(".Central").html("");//显示数据层div var strhtml = ''; for (var i in arary) {//遍历数据存放strhtml } $(".Central").html(strhtml); } }) } })
<%-- Ajax页面加载事件 --%>
