分页
来源:互联网 发布:知豆属于哪个品牌 编辑:程序博客网 时间:2024/06/05 11:59
分页一直是java web开发经常提到的问题,如何开发出一个既美观又方便的分页是很多开发者不得不关心的工作。在前台访问后台取回数据的时候调用:DLR.showPagination方法
传回的json数据格式:[{"approveDate":"2013-04-17"},[1,2,3,0,1,2,3],[58]]
{"approveDate":"2013-04-17"}是需要显示的数据,[1,2,3,0,1,2,3]则是分页信息,],[58]则是记录的总数,其中如果数据较多时还会出现中间省略号。
以下则是记录较多的分页显示情况
以下就是在项目中开发分页的核心代码。
//执行分页动作DLR.doPagination = function (action, jsonStr) {var currentAction = DLR.generateAction(action);var form = dijit.byId("reportForm");var jsonValues = dojo.toJson(form.getValues(), true);if (action != "") {//showProgressMask('contentDiv'); //dojo.byId("myForm").reset();var requestJson = {url : currentAction,postData:jsonValues,handleAs : "json",headers: {"Content-Type": "application/json"}, preventCache : false,load : function(data) {dojo.byId("currentAction").value = action;var pageData = data[data.length - 2]; data.splice(data.length - 2,1); var totalPage = data.splice(data.length - 1,1); DLR.showPagination(pageData,totalPage);var store = new dojo.data.ItemFileReadStore( {data : {items : data}});dijit.byId("reportGrid").setStore(store);}; //hideProgressMask('contentDiv');}};ECIS.xhrPost(requestJson);}};DLR.generateAction = function(preAction) {var pageData = dojo.byId("currentPageNo").value;var pageSize = dojo.byId("currentPerPageSize").value;var currentAction = ""; if (preAction.indexOf("?") != -1) { currentAction = preAction + "¤tPageNo=" + pageData + "¤tPerPageSize=" + pageSize; } else { currentAction = preAction + "?currentPageNo=" + pageData + "¤tPerPageSize=" + pageSize; } return currentAction;};DLR.showPagination = function(pageData,totalPageSize){var pageLength = pageData.length;var perPageSize = 25 ;if(dojo.byId("currentPerPageSize").value != null){perPageSize = dojo.byId("currentPerPageSize").value;}var currentPageFirst = 1 + (pageData[pageLength-3] -1) * perPageSize;var currentPageEnd = (pageData[pageLength-2]- 1)* perPageSize;//当最后一页显示的数据不满足20/50/100时,显示 剩余条数if( pageData[pageLength-2] >= 2 ){var remainDataSize = totalPageSize - (pageData[pageLength-3]- 1)* perPageSize;if(perPageSize >= remainDataSize){currentPageEnd = totalPageSize;}}else{//只有一页currentPageEnd = totalPageSize;} var strHtml = "<div class='page'>"; strHtml+= "<div class=\"field\">"; strHtml+= "<div style=\"display: inline-block\">"; strHtml+= "<span>共</span>"; strHtml+= "<span>" + totalPageSize + "</span>"; strHtml+= "<span>条记录</span>"; strHtml+= "</div>"; strHtml+= "<div style=\"display: inline-block\">"; strHtml+= "<span>当前</span>"; strHtml+= "<span>" + currentPageFirst +"-" + currentPageEnd + "</span>"; strHtml+= "<span>条</span>"; strHtml+= "</div>"; strHtml+= "</div>"; strHtml+= "<div class=\"field\">"; strHtml+= "<span>每页显示</span>"; strHtml+= "<select width='8' id='perPageSize' name='perPageSize' dojoType='dijit.form.Select' required='false' onchange='doPageSizeChange()'>"; strHtml+= "<option value='25'>25</option>"; strHtml+= "<option value='50'>50</option>"; strHtml+= "<option value='100'>100</option>"; strHtml+= "</select>"; strHtml+= "</div>"; strHtml+= "<div class=\"field\">"; if(pageData[pageLength-3] == 1){ strHtml += "<span class='page_prev'></span>"; }else{ strHtml += "<a href='javascript:void(0);' onclick='DLR.submitPage("+pageData[pageLength-4]+")' class='page_prev'></a>"; } strHtml += "<div style=\"display: inline-block\">"; strHtml += "<div style=\"vertical-align: middle; display: inline-block;\">"; for (var i = 0; i < pageLength - 4; i++){ strHtml += "<span class="; if(pageData[pageLength-3] == pageData[i]){ strHtml += "\"ecmIconCurPage\""; }else{ strHtml += "\"ecmIconPage\""; } if (pageData[i] > 9){ strHtml += " style=\"background-position: 3px 0pt;\""; } strHtml += " onclick=\"DLR.submitPage(" + pageData[i] + ")\">" + pageData[i] + "</span>"; }if(pageData[pageLength-3] == pageData[pageLength-1]){strHtml += "<span class='page_next'></span>";}else{strHtml += "<a href='javascript:void(0);' onclick='DLR.submitPage("+pageData[pageLength-2]+")' class='page_next'></a>";} strHtml += "</div>"; strHtml += "</div>"; if(typeof(pageData.length) == 'undefined' || pageData[pageLength-1] == 0){ strHtml = ""; } dojo.byId("pagination").innerHTML = strHtml; //设置分页显示条数 if(strHtml != ""){ if(dojo.byId("currentPerPageSize").value != 25){dojo.byId("perPageSize").value = dojo.byId("currentPerPageSize").value;} } };// 分页功能点击数字时的响应函数,主要是获得action链接并把分页数值传回后台DLR.submitPage = function(pageData){ dojo.byId("currentPageNo").value= pageData; var pageForm = dijit.byId("pageForm"); var action = dojo.byId("currentAction").value; DLR.doPagination(action, dojo.toJson(pageForm.attr("value")));};function doPageSizeChange() {dojo.byId("currentPerPageSize").value = dojo.byId("perPageSize").value;var action = dojo.byId("currentAction").value;DLR.doPagination(action );}
<div id="bpmPagination" class="pdmPagination"><div align="right" style="float: right; margin:6px 5px 0px 0px;"><form dojoType="dijit.form.Form" id="pageForm" onsubmit="return false"><input dojoType="dijit.form.TextBox" id="currentAction" name="currentAction" type="hidden" value="" /> <input dojoType="dijit.form.TextBox" id="currentPageNo" name="currentPageNo" type="hidden" value="" /><input dojoType="dijit.form.TextBox" id="currentPerPageSize" name="currentPerPageSize" type="hidden" value="25" /><div id="pagination" class="page"></div></form> </div> </div>
CSS样式:
.pdmPagination { overflow: hidden; background-image: url("../images/bottomBar_bg.gif"); background-repeat: repeat-x; border: 1px none; height: 32px; width: 100%; text-align: right; position:absolute; left:0px; right:1px; bottom:0px;}.page_prev{background-image: url("../images/toPrevious.png"); background-repeat: no-repeat; height: 16px; text-align: center; width: 16px; vertical-align: middle; display: inline-block;}.page_next{ background-image: url("../images/toNext.png"); background-repeat: no-repeat; height: 16px; text-align: center; width: 16px;vertical-align: middle; display: inline-block;}
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 分页
- 自定一个类加载器
- Centos_iptables命令
- 虚拟机安装centos的时候提示unable?
- javah 错误
- 4、C++ 实现文件复制(类实现)
- 分页
- 5、C++的静态变量和静态函数
- [MFC]同步对象——CEvent事件,CMutex互斥量
- strcpy_s与strcpy安全性的比较
- java编程基础
- 反射
- Centos vi 文本编辑器
- 执行“netsh wlan start hostednetwork”遇到“The hosted network couldn't be started”错误解决
- (转载)今天的不在家呢的即时通讯