css文件
@charset "utf-8"; *{font-family:"5FAE8F6F96C59ED1","5B8B4F53","Arial Narrow",HELVETICA;margin:0px;padding:0px;} body{font-family:"5FAE8F6F96C59ED1","5B8B4F53","Arial Narrow",HELVETICA;background:#fff;} ol,ul,li{list-style:none} /******************************************************************************************************/ .page{height:auto;overflow:hidden;text-align:center;padding-bottom:17px;} .page a{ display:inline-block; padding:0 9px; height:27px; line-height:27px; font-size:13px; color:#666; margin-right:3px; border:solid 1px #ebebeb;text-decoration:none;border-radius:3px;} .page a:hover,.page a.on{ text-decoration:none; } .page li{display:inline-block;} .page li span{color:#666;font-size:14px;padding-left:4px;} .page .fye{display:inline-block;width:163px;height:31px;color:#666;line-height:30px;font-size:14px;padding-left:20px;position:relative;} .page .btn.num{font-size:13px;text-align:center;line-height:30px;cursor:pointer;border:0px;padding:0px 10px;margin-left:5px;border-radius:4px;background:#ebebeb;height:30px;} .page input.yema{border-radius:3px;border:solid 1px #ebebeb;height:28px;line-height:28px;font-size:13px;text-align:center;width:40px;margin:0px 5px;} .page ul{display:inline-block;} .page p.form_wrap{position:absolute;top:11px;left:15px;width:auto} /******************************/ .page_red a:hover,.page_red a.on{background-color:#de3d11;border-color:#de3d11;color:#fff;} .page_red .btn.num{background:#de3d11;color:#fff;} .page_blue a:hover,.page_blue a.on{background-color:#388bff;border-color:#388bff;color:#fff;} .page_blue .btn.num{background:#388bff;color:#fff;} .page_green a:hover,.page_green a.on{background-color:#229b95;border-color:#229b95;color:#fff;} .page_green .btn.num{background:#229b95;color:#fff;} .page_yellow a:hover,.page_yellow a.on{background-color:#f7a54a;border-color:#f7a54a;color:#fff;} .page_yellow .btn.num{background:#f7a54a;color:#fff;} .page_12 a{font-size:12px;} .page_13 a{font-size:13px;} .page_14 a{font-size:14px;} .page_15 a{font-size:15px;} .page_12 .page_red .btn.num{font-size:12px;} .page_13 .page_red .btn.num{font-size:13px;} .page_14 .page_red .btn.num{font-size:14px;} .page_15 .page_red .btn.num{font-size:15px;} /************/ .line{width:80%;border-top:solid 1px #ebebeb;height:1px;margin:20px auto;} .page .fye{width:180px;}
js
(function($) { $.fn.iprotPage = function(data, options){ // 默认参数 var defaults = { nowPage:1, pageSize:10, recordCount:0, maxButton:10, color:"#5F81BE", fontSize:"14px", onSelect: function(page) { alert("函数自测，请复写"); } }; //最终参数 $.extend(defaults, options || {}); var recordCount = data.recordCount ? (data.recordCount < 1 ? 0 : data.recordCount ) : 0; var pageSize = defaults.pageSize < 1 ? 10 : defaults.pageSize; var maxButton = defaults.maxButton <1 ? 8 : defaults.maxButton; var totalPage = Math.ceil(recordCount / pageSize); var currentPage = data.nowPage < 1 ? 1 : data.nowPage; var color = ""; //计算起始页 var startPageNum = 1; var endPageNum = 1; if (totalPage <= maxButton) {//显示全部页数 startPageNum = 1; endPageNum = totalPage; }else if (totalPage > maxButton){ //总页数大于最大显示按钮 var preNum = currentPage - 3; if (preNum < 1) { preNum = 1 } var sufNum = preNum + maxButton - 1; if (sufNum > totalPage) { preNum = totalPage - maxButton + 1; sufNum = totalPage; } startPageNum = preNum; endPageNum = sufNum; } //组装按钮 var selectedStyle = ""; var unSelectedStyle = ""; var pageButton = "<ul><li><a title='' href='javascript:void(0);'><</a></li>"; //上一页 for (var i = startPageNum; i <= endPageNum; i++) { pageButton += "<li><a href='javascript:void(0);' _type='button'>" + i + "</a></li>"; } pageButton += "<li><a title='' href='javascript:vod(0);'>></a></li><li><span>共"+totalPage+"页</span></li></ul>";//下一页 //组装提示框 var searHtml =''; searHtml += '<div action="" method="get" class="fye">'; searHtml += ' <p class="form_wrap">到第'; searHtml += " <input name='' autocomplete='off' type='text' class='yema' maxlength='3' >"; searHtml += ' 页'; searHtml += ' <a href="javascript:vod(0);" class="btn num" >确 定</a>'; searHtml += ' </p>'; searHtml += '</div>'; //显示分页 var pager = $(this).html(pageButton+searHtml); var index = pager.find("input:eq(0)"); pager.find('a').click(function() { var cls = $(this).attr('class'); var _type = this.innerHTML; switch (_type){ case '<': var goPage = currentPage <= 1 ? 1 : currentPage-1; defaults.onSelect(goPage)(); break; case '>': var goPage = currentPage >= totalPage ? totalPage : currentPage+1; defaults.onSelect(goPage)(); break; case '确 定': var val = index.val(); if ( val!=null && val!=undefined && val.length>0 ) { var indexvalue = parseInt(val,10); indexvalue = indexvalue < 1 ? 1 : indexvalue; indexvalue = indexvalue > totalPage ? totalPage : indexvalue; defaults.onSelect(indexvalue)() } break; default: if (cls != 'on') { defaults.onSelect(parseInt(this.innerHTML))(); } } }).each(function() { if (currentPage == parseInt(this.innerHTML)) { $(this).attr("style","background-color:"+defaults.color+";border-color:"+defaults.color+";color:#fff;font-size:"+defaults.fontSize); $(this).attr("class","on"); } }); pager.find("a[_type='button']").each(function(){ if(!$(this).hasClass("on")){ $(this).attr("style","font-size:"+defaults.fontSize); }else{ $(this).attr("style","background-color:"+defaults.color+";border-color:"+defaults.color+";color:#fff;font-size:"+defaults.fontSize); } }); pager.find("a[_type='button']").mouseover(function(){ $(this).attr("style","background-color:"+defaults.color+";border-color:"+defaults.color+";color:#fff;font-size:"+defaults.fontSize); }).mouseout(function(){ if(!$(this).hasClass("on")){ $(this).attr("style","font-size:"+defaults.fontSize); } }); pager.find("input[class='yema']").attr( "onKeyUp","this.value=this.value.replace(/\D/g,'');").attr("onafterpaste","this.value=this.value.replace(/\D/g,'')"); pager.find("a.btn.num").attr("style","background-color:"+defaults.color+";border-color:"+defaults.color+";color:#fff;font-size:"+defaults.fontSize); } }(jQuery));
jsp页面
<html> <head> <link href="./pagination.css" rel="stylesheet"> <script src="./jquery-1.11.3.min.js"></script> <script src="./pagination.js"></script> </head> <body> <div class="page" id="pagination_demo1"></div> </body> <script type="text/javascript"> //服务参数 var serverDate = {recordCount: 1001, nowPage:2}; $(function(){ pagination(serverDate); }); function pagination(serverDate){ $("#pagination_demo1").iprotPage(serverDate,{ // pageSize:5, // color:"red", onSelect:function(page){ //单击后业务处理 bisFunction(page) } }); } /** * 业务处理 * @param page 将处理的页面 */ function bisFunction(page){ serverDate.nowPage = page; //再次调用分页 pagination(serverDate) } </script> </html/>
实战
<script type="text/javascript"> //服务参数 var serverDate = {recordCount: ${recordCount},nowPage:${nowPage}}; function pagination(serverDate){ $("#pagination_demo1").iportPage(serverDate,{ pageSize:10, // color:"red", onSelect:function(pageIndex){ //单击后业务处理 bisFunction(pageIndex); } }); } /** * 业务处理 * @param page 将处理的页面 */ function bisFunction(pageIndex){ // alert("点击人页码就："+ pageIndex); getDate(pageIndex); //再次调用分页 // serverDate.nowPage = pageIndex; // pagination(serverDate) } function getData(pageIndex){ var title = $("#title").val(); var labelName = $("#labelName").val(); var nowPage = $("#nowPage").val(); if(nowPage == ''){ nowPage = 0; } var url = sys.rootPath + "/hjPztArticleInfo/articleByTitlePage.html"; var data = {"title":title,"labelName":labelName,"nowPage":pageIndex,"pageSize":10}; $.ajax({ url : url, type : "post", data : data, dataType: "json", success: function (datas) { if(datas.isSuccess == true) { if (datas.exhibitDatas != null) { var result = datas.exhibitDatas; var $div = $(".searchList"); $div.empty(); for (var i = 0; i < result.length; i++) { var insertHtml = "<li>"; insertHtml += "<a href='#' target='_blank' title=''>" + result[i].title + "</a>"; insertHtml += "<span>["+result[i].createTime; <%--insertHtml += "<fmt:formatDate value='" + result[i].createTime + "' pattern='yyyy-MM-dd' type='date' dateStyle='long'/>"--%> insertHtml += "]</span>"; insertHtml += "</li>"; $div.append(insertHtml); } serverDate.recordCount = datas.recordCount; serverDate.nowPage = datas.nowPage; pagination(serverDate); } } }, error: function (errorMsg) { } }) } $(function(){ getData(1); })
controller
/** * header里点击搜索跳转 * @param request * @return */ @RequestMapping(value = "/articleByTitlePage.html",method = RequestMethod.POST) @ResponseBody public Object searchByTitle(HttpServletRequest request){ Map<String, Object> resultMap = resultMap(); int pageSize = Integer.parseInt(request.getParameter("pageSize")); int nowPage = Integer.parseInt(request.getParameter("nowPage")); try { String title = request.getParameter("title"); String labelName = request.getParameter("labelName"); Map<String, Object> paraMap = new HashMap<String, Object>(); paraMap.put("title","%"+title+"%"); paraMap.put("labelName",labelName); Page page = hjPztArticleInfoService.queryListByTitlePage(paraMap,nowPage,pageSize); resultMap.put("isSuccess", Boolean.TRUE); resultMap.put("nowPage", nowPage); resultMap.put("pageCount", page.getLastPageNumber()); resultMap.put("recordCount", page.getTotalCount()); //列表展示数据 resultMap.put("exhibitDatas", page.getItems()); System.out.println("aaaaaaa"); } catch (Exception e) { logger.error(e.getMessage(), e); resultMap.put("ret", ERROR); resultMap.put("msg", errMsg); } return resultMap; }