ajax请求数据和分页。怎么做？
Ajax请求后台获取json类型的数据后，可以在其成功回调方法中动态分页，即重绘表格。这时我们需要获取的数据包括:查询获取的数据、数据总数、总页数、当前页数，其中前三项可以在后台获取。对于当前的页面数量，点击页面需要从前端获取，然后通过请求传输到后台，然后后台进行相应的处理后再发送回前端。
/**
*
* @param page当前页面
*/
函数getData(page){
var schoolid = $(& quot；#schoolid选项:selected & quot).text()；
var apptype = $(& quot；#apptype选项:selected & quot).text()；
var appname = $(& quot；# appname & quot).val()；
$.ajax({
类型:& quot帖子& quot,
网址:& quotpageAjax & quot,
数据类型:json & quot,
数据:{ & # 39；schoolid & # 39:学校id，& # 39；apptype & # 39:apptype，& # 39；第'页；:第页，& # 39；appname & # 39:appname}，
成功:函数(数据){
控制台. log(& quot；成功了！”
数据)；
$(& quot；#表格& quot).html(& quot；”);
$(& quot；。翻页& quot).html(& quot；”);
var str = & quot& lttr & gt& ltth class = & # 39w20 & # 39& gt申请号
& quot；& ltth class = & # 39w15 & # 39& gt学校名称。”
& quot；& ltth class = & # 39w30 & # 39& gt应用程序名称
& quot；& ltth class = & # 39w25 & # 39& gt分类。”
& quot；& ltth class = & # 39w10 & # 39& gt应用类型
for(var I = 0；我& ltdata . result list . length；i
){
str
= & quot；& lttrónclick = & # 39；showAppDetail(this)；'& gt& lttd & gt”
data.resultList[i]。appid
& quot；& lt/TD & gt；& lttd & gt”
data.resultList[i]。schoolid
& quot；& lt/TD & gt；& lttd & gt”
data.resultList[i]。appname
& quot；& lt/TD & gt；& lttd & gt”
data.resultList[i]。app _ departid
& quot；& lt/TD & gt；& lttd & gt”
data.resultList[i]。apptype
& quot；& lt/TD & gt；& lt/tr & gt；”；
}
$(& quot；#表格& quot).html(str)；//重新绘制表格
var pageNum = data.pageNum//获取数据页数。
var cur page = data . cur page；//获取当前页面
str = & quot”；
/*如果页数大于1，则添加上一个和下一个链接*/
if(data . pagenum & gt；1){
str = & quot& ltul & gt& lt李& gt& lta href = & # 39JavaScript:void(0)；οon click = preEvent()；'id = & # 39pre & # 39data-num = & # 39；1'& gt上一页</a & gt；& lt/李& gt"
}否则{
str = & quot& ltul & gt”；
}
/*循环出每个页面的链接*/
for(var I = 0；我& ltdata.pageNumi
){
str
= & quot；& lt李& gt& lta href = & # 39JavaScript:void(0)；οon click = get data(& quot；
(parse int(I)
1)
& quot；);'数据类型= & # 39；num & # 39& gt”
(parse int(I)
1)
& quot；& lt/a & gt；& lt/李& gt”；
}
if(str . index of(& quot；上一页”)& gt-1){
str
= & quot；& lt李& gt& lta href = & # 39JavaScript:void(0)；οon click = next event()；'id = & # 39下一个& # 39；data-num = & # 39；1'& gt下一页
& quot；& ltspan & gt总计< span id = & # 39pageNum & # 39& gt"
pageNum
& quot；& lt/span>。第页。& lt/ul & gt；”；
}否则{
str
= & quot；& ltspan & gt总计< span id = & # 39pageNum & # 39& gt"
pageNum
& quot；& lt/span>。第页。& lt/ul & gt；”；
}
$(& quot；。翻页& quot).html(str)；
//将当前页码保存在上一页和下一页的data-num属性中，这样当你点击上一页或者下一页的时候，就可以知道应该跳转到哪一页。
$(& quot；# pre & quot).属性(& quot数据编号& quot，cur page)；
$(& quot；#下一个& quot).属性(& quot数据编号& quot，cur page)；
},
错误:函数(数据){
警报(& quot请求失败”)；
}
});
}
/**
*上一次点击事件
*/
函数preEvent(){
var cur page = $(& quot；# pre & quot).属性(& quot数据编号& quot);
if(cur page & lt；=1){
$(这个)。attr(& # 39；禁用& # 39；，& quottrue & quot);
}否则{
cur page = parse int(cur page)-1；
get data(cur page)；
}
}
/**
*点击下一页的活动
*/
函数nextEvent(){
var cur page = $(& quot；#下一个& quot).属性(& quot数据编号& quot);
var pageNum = $(& quot；# pageNum & quot).text()；
if(cur page & gt；=pageNum){
$(这个)。attr(& # 39；禁用& # 39；，& quottrue & quot);
}否则{
cur page = parse int(cur page)
1；
get data(cur page)；
}
}
相应的HTML代码
& ltdiv class = & quot表格& quot& gt
& lt表id = & quot表格& quot& gt
& lt/table & gt；
& lt/div & gt；
& ltdiv class = & quot翻页& quot& gt
& lt/div & gt；
注意:标签的href属性，比如href = ” JavaScript:void(0)；οon click = get data()；”
要使原来的click事件不响应并重新定义它，在其中添加JavaScript:void(0)；在这句话中，如果它说href = “# “，点击它将默认跳转到页面顶部。
另外，不刷新页面的ajax请求数据是异步请求，所以标签的click事件要写在它的属性里。比如用js写的话会导致
该事件在页面加载前被触发，导致没有响应。
javascript实现json页面分页实例代码？
用jquery ajax异步技术（$.post））提交页面显示记录的条数（pageSize）以及要显示的是第几页（pageNo）到服务器，服务器根据这条数进数据库去查询数据（MySQL数据库用limit，Oracle用rownum伪列来实现分页查询），前台pageNo每次加一。分页所需要的页数等于数据库中查询到的记录总条数除于pageSize。
把页数，查询的数据response给前台页面。再用bootstrap分页条插件。把分页条的页码超链接中的页数动态获取。
总页数在数据库中已经拿到了，修改一下可用
Ajax读取数据之分页显示篇实现代码？
首先ajax请求时向后台发送一个page值，表示当前是第几页，然后后台根据page值及pageCount（pageCount每页显示多少条记录）条件查询（where (page-1)*pageCount<rownum<page*pageCount)查询对应的记录数，将记录集合封装为一个对象，作为ajax请求返回值，在success返回值函数中进行解析，并为html动态添加table记录
基于bootstrap3和jquery的分页插件？
文章的内容是使用bootstrap-paginator进行分页，使用ajax获取后台数据、渲染。1. 版本说明bootstrap 3.3.2bootstrap-paginator v1.0 github2. 准备工程建立动态web工程，新建index.html页面，引入bootstrap相关css js文件。3. 简单显示在需要显示分页的位置添加ul标签：
在页面底部添加js代码：启动web服务，访问index.html页面，可以看到分页显示。4. 后台准备数据建立一个servlet，负责向前台输出json数据。 PrintWriter out = response.getWriter(); String s1 = “”; String s2 = “{“name”:”hanmeimei”}”; String s3 = “{“name”:”jim”}”; String s4 = “{“name”:”jim1″}”; String s5 = “{“name”:”jim2″}”; String page = request.getParameter(“page”); String cur = null; switch (page) { case “1”: cur = s1; break; case “2”: cur = s2; break; case “3”: cur = s3; break; case “4”: cur = s4; break; case “5”: cur = s5; break; default: break; } out.print(cur); out.close();5. 前台展示数据前台需要先获取记录的总条数和每页容量。 其中pageSize设置为2,先用post方法获取totalPages，用来初始化分页插件。运行程序即可。详细的可以参见bootstrap-paginator说明,或者去bootstrap-paginator github查阅。 工程下载bootstrap-paginator.zip jdk1.8 tomcat 8
支付宝扫一扫
微信扫一扫
