前端开发 需要根据把后台数据列表 分页显示
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发 需要根据把后台数据列表 分页显示相关的知识,希望对你有一定的参考价值。
html中是li列表 li中的内容是后台数据加载的
需要前端做一个控制页面显示li数量 并且分页显示 点击页码号 刷出该页的数据
用jquery 前端开发
搭建项目分页
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;
参考技术A在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)
在要显示的页面写如下代码,主要是分类进行判断。
参考技术B 用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动态加载出来就可以了,大概思路就是这样的
多谢多谢~
本回答被提问者采纳如何显示IList 与分页
我有一个错误列表,我需要在浏览器中显示分页,但是,我不是从数据库中提取数据,我是基于许多业务逻辑构建此模型,此列表可能高达1000物品或更多。所有项目都需要在前端可用,滚动的许多项目对用户来说很麻烦,这就是我需要分页机制的原因。
注意:我正在使用asp.net MVC框架
而且,这是我的错误模型
public class ErrorViewModel
{
public string ErrorType { get; set; }
public string ErrorMessage { get; set; }
public string AdditionalMessage { get; set; }
}
你可以使用DataTables插件,它提供客户端搜索和分页(服务器将所有数据传递给客户端,不推荐,但这是你要求的)。
首先,下载DataTables插件并将其包含在项目和布局文件中。
其次,您需要使用Razor语法呈现HTML表。
@model IEnumerable<ErrorViewModel>
<table class="data-table">
<thead>
<tr>
<th>Error type</th>
<th>Error message</th>
<th>Additional message</th>
</tr>
</thead>
<tbody>
@foreach(var item in Model)
{
<tr>
<td>@Model.ErrorType</td>
<td>@Model.ErrorMessage</td>
<td>@Model.AdditionalMessage</td>
</tr>
}
</tbody>
</table>
第三,在布局文件的末尾添加此代码(在导入jQuery和DataTables插件之后)。
<script>
$(document).ready(function() {
$('.data-table').DataTable();
});
</script>
示例:jsbin.com
正如Spectarion所建议的那样,你可以使用DataTables插件。由于您使用的是ASP.net MVC,我建议使用DataTables.ASPNet,它为jQuery DataTables提供了很好的服务器端支持和帮助。它易于使用,只需按照文档和下载示例项目。
以上是关于前端开发 需要根据把后台数据列表 分页显示的主要内容,如果未能解决你的问题,请参考以下文章