<!--页码跳转列表--> |
| <ul class="wqzAjax_nums"> |
| <li class="wqzAjax_nums_first">首页</li> |
| <li class="wqzAjax_nums_prev">上一页</li> |
| <!--<li class="wqzAjax_nums_mid">1</li> |
| <li class="wqzAjax_nums_mid wqzAjax_nums_cur">2</li> |
| <li class="wqzAjax_nums_mid">3</li>--> |
| <li class="wqzAjax_nums_next">下一页</li> |
| <li class="wqzAjax_nums_last">末页</li> |
| </ul> |
| <label label_turnToPage>转到</label> |
| <!--跳转页面下拉列表--> |
| <select name="pageNum" class="wqzAjax_pageNum"> |
| <option value="1">1</option> |
| <option value="2">2</option> |
| <option value="3">3</option> |
| </select> |
| <label>页</label> |
| </div> |
| </div> |
| <script> |
| $(function(){ |
| /* var page = { |
| pageNum: 4, |
| pageSize: 20, |
| nums: [2,3,4,5], |
| maxPage: 8, |
| totalCount: 100 |
| }; |
| initAjaxPagination(page); // 初始化ajax分页栏 */ |
| initAjaxPaginationEvent(); // 始化ajax分页栏事件 |
| }); |
| /* 初始化ajax分页栏 |
| * page是一个对象。至少包含如下属性: |
| * page.pageNum 当前页码 |
| * page.pageSize 每页显示数目 |
| * page.nums 当前可见的页码列表(是一个int型的数组) |
| * page.maxPage 当前的最大显示页码 |
| * page.totalCount 总数 |
| */ |
| function initAjaxPagination(page){ |
| resetPagination(); // 重置分页栏 |
| if(page==undefined || (typeof page) != "object") return ; |
| $("#wqzAjaxPageBlock").find(".wqzAjax_totalNum").text(page.totalCount); // 设置总数 |
| setAjaxPageSize(page); // 设置每页显示数目的下拉列表 |
| setAjaxPageNums(page); // 设置页码跳转列表 |
| setAjaxPageNum(page); // 设置跳转页面下拉列表 |
| }; |
| |
| /*重置分页栏*/ |
| function resetPagination(){ |
| $("#wqzAjaxPageBlock").find(".wqzAjax_nums_mid").remove(); |
| } |
| |
| /*设置每页显示数目的下拉列表*/ |
| function setAjaxPageSize(page){ |
| $("#wqzAjaxPageBlock").find(".wqzAjax_pageSize").find("option[value="+page.pageSize+"]").prop("selected",true).addClass("sbsb"); |
| } |
| |
| /*设置页码跳转列表*/ |
| function setAjaxPageNums(page){ |
| $wqzAjax_nums = $("#wqzAjaxPageBlock").find(".wqzAjax_nums"); |
| if(page.pageNum == 1){ |
| $wqzAjax_nums.children(".wqzAjax_nums_first,.wqzAjax_nums_prev").addClass("disable"); |
| }else{ |
| $wqzAjax_nums.children(".wqzAjax_nums_first,.wqzAjax_nums_prev").removeClass("disable"); |
| } |
| if(page.pageNum == page.maxPage){ |
| $wqzAjax_nums.children(".wqzAjax_nums_last,.wqzAjax_nums_next").addClass("disable"); |
| }else{ |
| $wqzAjax_nums.children(".wqzAjax_nums_last,.wqzAjax_nums_next").removeClass("disable"); |
| } |
| $.each(page.nums,function(index,val){ |
| var $li = $("<li></li>").text(val).addClass("wqzAjax_nums_mid").attr("value",val);; |
| var $target = $wqzAjax_nums.children(".wqzAjax_nums_mid").length?$wqzAjax_nums.children(".wqzAjax_nums_mid").last():$wqzAjax_nums.children(".wqzAjax_nums_prev"); |
| if(page.pageNum == val) $li.addClass("wqzAjax_nums_cur"); |
| $target.after($li); |
| }); |
| } |
| |
| /*设置跳转页面下拉列表*/ |
| function setAjaxPageNum(page){ |
| if( $("#wqzAjaxPageBlock").data("hadLoad") ){ |
| var $newSelect = $("#wqzAjaxPageBlock").find("#wqzAjax_pageNumModel").clone().removeAttr("id") |
| .attr("name","pageNum").addClass("wqzAjax_pageNum"); |
| $newSelect.children("option").each(function(index,dom){ |
| if(index+1>page.maxPage){ |
| $(this).remove(); |
| }else if(page.pageNum == index+1){ |
| $(this).prop("selected",true); |
| } |
| }); |
| $("#wqzAjaxPageBlock").find(".wqzAjax_pageNum").remove(); |
| $newSelect.insertAfter($("#wqzAjaxPageBlock").find("[label_turnToPage]")).show(); |
| }else{ |
| var $wqzAjax_pageNum = $("#wqzAjaxPageBlock").find(".wqzAjax_pageNum").empty(); |
| page.maxPage = (page.maxPage<1)?1:page.maxPage; |
| for(var i=1; i<=page.maxPage; i++){ |
| $("<option></option>").text(i).appendTo($wqzAjax_pageNum);; |
| } |
| if($("#wqzAjaxPageBlock").find("#wqzAjax_pageNumModel").length == 0 ){ // 如果是第一次加载 |
| $wqzAjax_pageNum.clone().removeAttr("name").removeClass("wqzAjax_pageNum") |
| .hide().attr("id","wqzAjax_pageNumModel").appendTo($("#wqzAjaxPageBlock")); |
| $("#wqzAjaxPageBlock").data("hadLoad",true); |
| } |
| } |
| } |
| |
| /*初始化ajax分页栏事件*/ |
| function initAjaxPaginationEvent(){ |
| initAjaxSelectEvent(); // 初始化pageSize和pageNum下拉列表事件 |
| initAjaxNumsEvent(); // 初始化page.nums列表事件 |
| } |
| |
| /*初始化pageSize和pageNum下拉列表事件*/ |
| function initAjaxSelectEvent(){ |
| $("#wqzAjaxPageBlock").on("change",".wqzAjax_pageSize, .wqzAjax_pageNum",function(){ |
| $(this).closest("form").submit(); |
| }); |
| } |
| |
| /*初始化page.nums列表事件*/ |
| function initAjaxNumsEvent(){ |
| $("#wqzAjaxPageBlock").find(".wqzAjax_nums").on("click","li",function(){ |
| if( $(this).hasClass("wqzAjax_nums_cur") || $(this).hasClass("disable") ) return; |
| var value = $(this).attr("value"); |
| var index; // 将要跳转的页码(1,2,3...) |
| var cur = $("#wqzAjaxPageBlock").find(".wqzAjax_nums_cur").text()*1; // 当前选择页面(跳转前) |
| |
| // 确定将要跳转的页码 |
| if(value){ // 首页或中间页码 |
| index = value; |
| }else{ // 上一页、下一页、末页 |
| if($(this).hasClass("wqzAjax_nums_prev")) index = cur - 1; // 上一页 |
| if($(this).hasClass("wqzAjax_nums_next")) index = cur + 1; // 下一页 |
| if($(this).hasClass("wqzAjax_nums_last")) index = $("#wqzAjaxPageBlock").find(".wqzAjax_pageNum").children().length; // 末页 |
| } |
| |
| // 更新wqzAjax_nums_cur项(选中项) |
| $("#wqzAjaxPageBlock").find(".wqzAjax_nums_mid").removeClass("wqzAjax_nums_cur"); |
| $("#wqzAjaxPageBlock").find(".wqzAjax_nums_mid[value="+index+"]").addClass("wqzAjax_nums_cur"); |
| |
| // 更新wqzAjax_pageNum选中项 |
| $("#wqzAjaxPageBlock").find(".wqzAjax_pageNum").children().prop("selected",false).eq(index*1-1).prop("selected",true); |
| $(this).closest("form").submit(); |
| }); |
| } |
| </script> |