Question

前端开发 需要根据把后台数据列表 分页显示

html中是li列表 li中的内容是后台数据加载的
需要前端做一个控制页面显示li数量 并且分页显示 点击页码号 刷出该页的数据
用jquery 前端开发

Answer 1

搭建项目分页

1.jsp页面

<tr>

<td bgcolor="#00ffff" colspan="10" align="center">

第${pager.currentPage}页  

每页${pager.pageSize} 条记录 

共${pager.totalPages}页  

共${pager.totalRows} 条

<a href="servlet/UserServlet?num=1&page=1" >首页</a>

<a href="servlet/UserServlet?num=1&page=${pager.currentPage-1}">上一页</a>

<a href="servlet/UserServlet?num=1&page=${pager.currentPage+1}">下一页</a>

<a href="servlet/UserServlet?num=1&page=${pager.totalPages}">末页</a>    

</td>

</tr>

2.拼接sql语句

SELECT * FROM USERS LEFT JOIN DEPT ON USERDEPT=DEPTNUM

SELECT * FROM(SELECT A.*, ROWNUM RN FROM (SELECT * FROM student) A WHERE ROWNUM <=15)WHERE RN >=11 ORDER BY ENTERDATE

分页sql：SELECT * FROM(SELECT A.*, ROWNUM RN FROM (SELECT * FROM USERS LEFT JOIN DEPT ON USERDEPT=DEPTNUM) A WHERE ROWNUM <=15)WHERE RN >=11 ORDER BY ENTERDATE

3.分页工具类导入到common包：Pager.java

在servlet调用:第一个条件：总条数  第二个条件：当前页数

String page = request.getParameter("page");

//分页调用开始--------------------------------

Pager pager = new Pager();

int totalRows = userService.getCountRows();

pager.setTotalRows(totalRows);

if(null != page){

pager.setCurrentPage(Integer.parseInt(page));

}else{

pager.setCurrentPage(1);

}

request.setAttribute("pager", pager);//给页面分页赋值

4.把pager工具类传递到dao，拼接执行动态分页sql语句

开始条数：pager.getStartRow()

结束条：pager.getCurrentPage()*pager.getPageSize()

String sql="SELECT * FROM(SELECT A.*, ROWNUM RN FROM (SELECT * FROM USERS LEFT JOIN DEPT ON USERDEPT=DEPTNUM) A WHERE ROWNUM <="+pager.getCurrentPage() *pager.getPageSize()+")WHERE RN >="+pager.getStartRow();//分页sql  1-3条

分页根本条件：

private int totalRows; //总行数    

private int pageSize = 5; //每页显示的行数      

private int currentPage=1; //当前页号    

private int totalPages; //总页数     

private int startRow; //当前页在数据库中的起始行

private int endRow;  //数据库执行sql的结束行

totalPages算法：

if(totalRows<=pageSize){

totalPages=1;

}else{

totalPages=(totalRows+pageSize-1)/pageSize;

}

startRow; 算法：

startRow=(currentPage-1) * pageSize+1;

endRow; endRow=currentPage* pageSize;

Answer 2

在page类中新加入path属性，用以存储每次转发的路径及携带参数。

private String path;

新建WEBUtils类，获取路径，放在新声明的url中，简便页面中的EL表达式。

public static String getPath(HttpServletRequest request){

String requestURI = request.getRequestURI();//获取请求路径

String queryString = request.getQueryString();//获取请求参数

String url = requestURI+"?"+queryString;

if(url.contains("&pageNo")){

url = url.substring(0, url.indexOf("&pageNo"));

}

return url;

}

在servlet中将WEBUtils中获取的url放入page中。

page.setPath(url)

在要显示的页面写如下代码，主要是分类进行判断。

Answer 3

用ajax异步请求数据

追问

可以写出具体代码吗？跪求～

追答

创建WebService.asmx，在里面写一个方法，前台用ajax post值

function 方法名(参数) {
var megr = "0|0";
$.ajaxSetup({ async: false, cache: false });
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/分页方法名",
data: "{参数名" + 参数值 + "}",方法需要的参数
dataType: 'json',
success: function (result) {
megr = result.d;
},
error: function () {
}
});
return megr;
}

前台把点击的页面传过去，然后在后台根据每页显示的个数算出第n也是第几条到第几条的数据，然后用js动态加载出来就可以了，大概思路就是这样的

追问

多谢多谢～