使用jquery编写一个分页组件（部分内容并不通用，以后需改善）

来源：互联网发布：上海软件著作权登记编辑：程序博客网时间：2024/05/03 11:14

1、使用jquery编写一个分页组件

A、编写jsp数据展示页面，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@include file="../../backstage/common.jsp"%>  <!-- 添加了一些常用的js,css --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><script type="text/javascript"src="<%=path%>/preStage/js/mygridData.js"></script><link rel="stylesheet" type="text/css" href="<%=path %>/preStage/js/css/mygridData.css"><script type="text/javascript">      $(function(){      gridDataTable({            divId:'zhaoPinListDiv',            divTitle:'招聘英才',            cellTitle:['应聘职位','发布时间','已阅读','已应聘'],            cellSize:['50%','30%','10%','10%'],            dataUrl:'listData',            pageSize:1,            listType:1          });      });    </script>    <style type="text/css">       .tableCellTitle1,.tableCellTitle2,.tableCellTitle3{         text-align: center;       }       .tableContext1,.tableContext2,.tableContext3{          text-align: center;       }    </style></head><body><center><h3>招聘信息列表</h3><div id="zhaoPinListDiv" style="width: 700px; padding: 10px;"></div></center></body></html>

B、编写核心分页功能（jquery编写）

/*自定义样式的表格数据列表*/function gridDataTable(options){var divContainer = $("#"+options.divId);var divTitle = options.divTitle;var cellTitleNames = options.cellTitle;var cellSizeValues = options.cellSize;var dataUrlReq = options.dataUrl;var pageSizeValue = options.pageSize;var cellColumnsValue = options.cellColumns;var listTypeValue = options.listType;//初始页面为1var currentPage = 1;//总页数var totalPage;//上一页按钮对象var upPageButton = $("<button id ='upPageInput' style ='float:left; margin-left:20px;'>上一页</button>");//下一页按钮对象var downPageButton = $("<button id ='downPageInput' style ='float:right; margin-right:20px;'>下一页</button>");addTableHeadDiv();//表格对象var dataTable = $("<table class='addDataTableContainer'></table>");addDataTableTemp();/*创建表格数据表头*/function addTableHeadDiv(){divContainer.append($("<div class='divTableHeadTitle'>"+divTitle+"</div><hr/>"));}/*定义生成数据表格对象*/   function addDataTableTemp(){   var trObj = $("<tr class='tableCellTitle' ></tr>");   for(var i =0;i<cellTitleNames.length;i++){   trObj.append("<td width='"+cellSizeValues[i]+"' class='tableCellTitle"+i+"'>"+cellTitleNames[i]+"</td>");   }   dataTable.append(trObj);   divContainer.append(dataTable);   var operationDiv = $("<div class = 'operationDiv'></div>");   operationDiv.append(upPageButton);   operationDiv.append(downPageButton);   divContainer.append("<hr/>");   divContainer.append(operationDiv);   bindClickEventToPagination();}   addDataToTable();      /*为表格添加数据*/   function addDataToTable(){   //移除已有数据   $(".tableContext").remove();   var params = "page="+currentPage+"&rows="+pageSizeValue;   $.ajax({   url:dataUrlReq,   type:'post',   dataType:'json',   data:params,   success:function(data){      totalPage = Math.ceil(data.total/pageSizeValue);     if(listTypeValue ==1){     fullDataToTable1(data.rows);     }       }   });   }   /*招聘职位列表  cellColumns:['pName','createDate','scanCount','acceptCount'],*/   function fullDataToTable1(rowsData){   for(var i =0;i<rowsData.length;i++){   var rowData = rowsData[i];   var dataTr = $("<tr class = 'tableContext' id = '"+rowData.pId+"'></tr>");   dataTr.append("<td class='tableContext"+0+"'>"+rowData.pName+"</td>");   dataTr.append("<td class='tableContext"+1+"'>"+rowData.createDate+"</td>");   dataTr.append("<td class='tableContext"+2+"'>"+rowData.scanCount+"</td>");   dataTr.append("<td class='tableContext"+3+"'>"+rowData.acceptCount+"</td>");   dataTable.append(dataTr);   }   paginationShow();   }   /*分页按钮添加事件*/   function bindClickEventToPagination(){   $("#upPageInput").click(function(){   currentPage--;   addDataToTable();   });   $("#downPageInput").click(function(){   currentPage++;   addDataToTable();   });   }      /*处理上一页与下一页的显示*/   function paginationShow(){   if(currentPage ==1){   upPageButton.attr('disabled',true);   }else{   upPageButton.attr('disabled',false);   }     // alert(totalPage);  // alert(currentPage);   if(totalPage == currentPage){   downPageButton.attr('disabled',true);   }else{   downPageButton.attr('disabled',false);   }   }}

C、为使用jquery生成的分页组件添加默认的样式

.divTableHeadTitle{  font-size: 20px;  text-align: center;  width:100%;  margin: 0px;}.operationDiv{  width: 100%;  margin: 0px;  height: 40px;}.addDataTableContainer{   margin: 0px;   padding: 0px;   width: 100%;   border: 1px;   text-align:left;}.addDataTableContainer .tableCellTitle{  color: gray;  font-size: 14px;  height: 50px;}.tableContext{  font-size: 15px;  height: 30px;}#upPageInput #upPageInput{  border: 1px;  border-color: gray;}

D、运行结果截图

0 0