ajax json分页demo

最新推荐文章于 2022-04-29 16:50:06 发布
最新推荐文章于 2022-04-29 16:50:06 发布
阅读量403 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/big1989wmf/article/details/70144245
版权 
后台上：
try {
			
			List<UserInfoBean> list =page.getItems();
			JsonConfig jsonConfig = new JsonConfig();
			jsonConfig.registerJsonValueProcessor(Date.class,
					new JsonDateValueProcessor());
			JSONArray json = JSONArray.fromObject(list, jsonConfig);
			
			JSONObject jsons=new JSONObject();
			jsons.put("page", page);
			jsons.element("arr", json);
			System.out.println(jsons);
			response.getWriter().print(jsons);
			
		} catch (Exception e) {
				logger.error(e.getMessage());
				logger.error(e.getMessage() + "查找所有用户出错!");
		}

js上：

<script type="text/javascript">
        var pageIndex = 0;//首页
        var pageSize = 2;//每页最多2条记录
        $(function () {
            $("#btnSearch").click(function () {
                /*
                name  顾客的名字, 文本框中输入的内容
                0         表示的是第1页
               2       每页的大小
                */
                var name = $("#txtSearch").val();
                pageIndex = 0;
                AjaxGetData(name, pageIndex, pageSize);
            });
        });

        function AjaxGetData(name, index, size) {
            $.ajax({
                url: "<%=basePath%>UserInfoServlet",
                type: "Get",
                data: "Name=" + name + "&PageIndex=" + index + "&PageSize=" + size+"&doaction=userListTest",
                dataType: "json",
                success: function (data) {
                    var htmlStr = "";
                    htmlStr += "<table>";
                    htmlStr += "<thead>";
                    htmlStr += "<tr><td>aa</td><td>bb</td><td>cc</td><td>dd</td><td>ee</td><td>ff</td></tr>";
                    htmlStr += "</thead>";
                    htmlStr += "<tbody>";
                    for (var i = 0; i < data.arr.length; i++) {
                        htmlStr += "<tr>";
                        htmlStr += "<td>" + data.arr[i].realName + "</td>"
                    	+"<td>"+ data.arr[i].realName + "</td>"
    					+ "<td>"+ data.arr[i].userNo + "</td>"
    					+ "<td>"+ data.arr[i].position + "</td>"
    					+"<td>"+data.arr[i].regTime+"</td>"
    					+"<td>"+ data.arr[i].realName + "</td>";
                        htmlStr += "</tr>";
                    }
                    htmlStr += "</tbody>";
                    htmlStr += "<tfoot>";
                    htmlStr += "<tr>";
                    htmlStr += "<td colspan='6'>";
                    htmlStr += "每页显示<select id='pageSize'><option value='5'>5</option><option value='10'>10</option><option value='15'>15</option><option value='20'>20</option><option value='25'>25</option></select>条 <span>共" + data.page.totalCount + "条记录;共<span id='count'>" + (data.page.totalCount % 2 == 0 ? parseInt(data.page.totalCount / 2) : parseInt(data.page.totalCount / 2 + 1)) + "</span>页;"+"当前第"+data.page.currentPage+"页;" + "</span>";
                    htmlStr += "<a href='javascript:void' οnclick='GoToFirstPage()' id='aFirstPage' >首    页</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' οnclick='GoToPrePage()' id='aPrePage' >前一页</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' οnclick='GoToNextPage()' id='aNextPage'>下一页</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' οnclick='GoToEndPage()' id='aEndPage' >尾    页</a>&nbsp;&nbsp; ";
                    htmlStr += "<input type='text' /><input type='button'  value='跳转' οnclick='GoToAppointPage(this)' /> ";
                    htmlStr += "</td>";
                    htmlStr += "</tr>";
                    htmlStr += "</tfoot>";
                    htmlStr += "</table>";

                    $("#divSearchResult").html(htmlStr);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest);
                    alert(textStatus);
                    alert(errorThrown);
                }
            });
        }
        //首页
        function GoToFirstPage() {
            pageIndex = 0;
            AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //前一页
        function GoToPrePage() {
            pageIndex -= 1;
            pageIndex = pageIndex >= 0 ? pageIndex : 0;
            AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //后一页
        function GoToNextPage() {
            if (pageIndex + 1 < parseInt($("#count").text())) {
                pageIndex += 1;
            }
                AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //尾页
        function GoToEndPage() {
            pageIndex = parseInt($("#count").text()) - 1;
            AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
        //跳转
        function GoToAppointPage(e) {
            var page = $(e).prev().val();
            if (isNaN(page)) {
                alert("请输入数字!");
            }
            else {
                var tempPageIndex = pageIndex;
                pageIndex = parseInt($(e).prev().val())-1;
                if (pageIndex < 0 || pageIndex >= parseInt($("#count").text())) {
                    pageIndex = tempPageIndex;
                    alert("请输入有效的页面范围!");
                }
                else {
                    AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
                }
            }
        }
    </script>
前台页面上：
<div>
            <input type="text" id="txtSearch" />
            <input type="button" id="btnSearch" value="Search" />
    </div>
    <div id="divSearchResult">
  
    </div>


升级版： 
<script type="text/javascript">
        var pageIndex = 1;//首页
        var pageSize= 2;//每页最多2条记录
        $(function () {
            var name = $("#checkByName").val();
            var pageSize= $("#currentPageSize").val();
            ajaxGetListData(name, pageIndex, pageSize);
        });
      

        function ajaxGetListData(name, index, size) {
            $.ajax({
                url: "<%=basePath%>UserInfoServlet",
                type: "post",
                data: "Name=" + name + "&currentPage=" + index + "&PageSize=" + size+"&doaction=userListTest",
                dataType: "json",
                success: function (data) {
                    var htmlStr = "";
                    htmlStr += "<table class='tab-list' width='99%'>";
                    htmlStr += "<thead>";
                    htmlStr +="<tr class='list-header'>"
    				+"<td width='5%'>序号</td>"
    				+"<td width='5%'><input id='checkAll' name='checkAll' type='checkbox' /></td>"
    				+"<td width='30%'>用户姓名</td>"
    				+"<td width='20%'>工号</td>"
    				+"<td width='20%'>职位</td>"
    				+"<td width='20%'>创建时间</td>"
    				+"</tr>";
                    htmlStr += "</thead>";
                    htmlStr += "<tbody>";
                    for (var i = 0; i < data.arr.length; i++) {
                        htmlStr += "<tr>";
                        htmlStr += "<td>" + (i+1) + "</td>"
                    	+"<td><input class='check' id='checkOne' name='checkOne' type='checkbox' value='"+data.arr[i].key+"' /></td>"
    					+ "<td>"+ data.arr[i].realName + "</td>"
    					+ "<td>"+ data.arr[i].userNo+ "</td>"
    					+"<td>"+data.arr[i].position+"</td>"
    					+"<td>"+ data.arr[i].regTime + "</td>";
                        htmlStr += "</tr>";
                    }
                    if(data.arr.length==0){
                    	htmlStr += "<tr style='text-align: center'><td colspan='6'><font color='#cd0a0a'>"+ '暂无记录' + "</font></td></tr>";
            		}
                    htmlStr += "</tbody>";
                    htmlStr += "<tfoot>";
                    htmlStr += "<tr>";
                    htmlStr += "<td colspan='3' style='text-align: left;border-right: 0px;'>";
                    htmlStr += "<font color='grey'>显示<select id='selfPageSize' οnchange='javascript:changePageSize()' ><option value='"+data.page.pageSize+"'>"+data.page.pageSize+"</option><option value='20'>20</option><option value='30'>30</option></select>条/页_<span>全部" + data.page.totalCount + "条记录_共<span id='count'>" + data.page.totlePages+ "</span>页_"+"当前第"+data.page.currentPage+"页" + "</span></font>";
                    htmlStr += "</td>";
                    htmlStr += "<td colspan='3' style='text-align: right;border-left: 0px;'>";
                   
                    if(data.page.currentPage > 1){
                    	 htmlStr += "<a href='javascript:void' οnclick='GoToFirstPage()' id='aFirstPage' >首    页</a>&nbsp;&nbsp; ";
                    }else{
                    	htmlStr += "<font color='grey'>首    页</font>&nbsp;&nbsp";
                    }
                    
                    if((data.page.currentPage - 1 ) > 0 ){
                    	htmlStr +="<a href='javascript:void' οnclick='GoToPrePage()' id='aPrePage'>上一页</a>&nbsp;&nbsp"; 
                    }else{
                    	htmlStr +="<font color='grey'>上一页</font>&nbsp;&nbsp";	 
                    }
                    
                    if((data.page.currentPage+1) > data.page.totlePages){
                    	 htmlStr += "<font color='grey'>下一页</font>&nbsp;&nbsp;";
                    }else{
                    	  htmlStr += "<a href='javascript:void' οnclick='GoToNextPage()' id='aNextPage'>下一页</a>&nbsp;&nbsp;";
                    }
                    if(data.page.currentPage < data.page.totlePages){
                    	htmlStr += "<a href='javascript:void' οnclick='GoToEndPage()' id='aEndPage' >尾    页</a>&nbsp;&nbsp; ";
                    }else{
                    	htmlStr += "<font color='grey'>尾    页</font>&nbsp;&nbsp";
                    }
                    
                    htmlStr += "<input id='pageNum' name='pageNum' class='input-page' type='text' /><input type='button'  value='跳转' οnclick='GoToAppointPage(this)' style='width: 60px; height: 25px;font-size: 12px;'/> ";
                    htmlStr += "</td>";
                    htmlStr += "</tr>";
                    htmlStr += "</tfoot>";
                    htmlStr += "</table>";

                    $("#divSearchResult").html(htmlStr);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest);
                    alert(textStatus);
                    alert(errorThrown);
                }
            });
        }
        //首页
        function GoToFirstPage() {
            pageIndex = 1;
            ajaxGetListData($("#checkByName").val(), pageIndex, $("#currentPageSize").val());
        }
        //上一页
        function GoToPrePage() {
            pageIndex -= 1;
            pageIndex = pageIndex >= 0 ? pageIndex : 0;
            ajaxGetListData($("#checkByName").val(), pageIndex, $("#currentPageSize").val());
        }
        //下一页
        function GoToNextPage() {
            if (pageIndex < parseInt($("#count").text())) {
                pageIndex += 1;
            }
                ajaxGetListData($("#checkByName").val(), pageIndex, $("#currentPageSize").val());
        }
        //尾页
        function GoToEndPage() {
            pageIndex = parseInt($("#count").text());
            ajaxGetListData($("#checkByName").val(), pageIndex, $("#currentPageSize").val());
        }
        //跳转
        function GoToAppointPage(e) {
            var page = $(e).prev().val();
            if (isNaN(page)) {
                alert("请输入数字!");
            }
            else {
                var tempPageIndex = pageIndex;//pageIndex==currentPage
                pageIndex = parseInt(page);
                if (pageIndex < 0 || pageIndex > parseInt($("#count").text())) {
                    pageIndex = tempPageIndex;
                    alert("请输入有效的页面范围!");
                }else {
                    ajaxGetListData($("#checkByName").val(), pageIndex, $("#currentPageSize").val());
                }
            }
        }
    
    </script>

再升级： 




//ajax获取列表
function ajaxGetListData(name, index, size) {
    $.ajax({
        url: "../../UserInfoServlet",
        type: "post",
        data: "checkByName=" + name + "&currentPage=" + index + "&PageSize=" + size+"&doaction=userListTest",
        dataType: "json",
        success: function (data) {
            var htmlStr = "";
            htmlStr += "<table class='tab-list' width='99%'>";
            htmlStr += "<thead>";
            htmlStr +="<tr class='list-header'>"
			+"<td width='5%'>序号</td>"
			+"<td width='5%'><input id='checkAll' name='checkAll' type='checkbox' /></td>"
			+"<td width='30%'>用户姓名</td>"
			+"<td width='20%'>工号</td>"
			+"<td width='20%'>职位</td>"
			+"<td width='20%'>创建时间</td>"
			+"</tr>";
            htmlStr += "</thead>";
            htmlStr += "<tbody>";
            for (var i = 0; i < data.arr.length; i++) {
                htmlStr += "<tr>";
                htmlStr += "<td>" + (i+1) + "</td>"
            	+"<td><input class='check' id='checkOne' name='checkOne' type='checkbox' value='"+data.arr[i].key+"' /></td>"
				+ "<td>"+ data.arr[i].realName + "</td>"
				+ "<td>"+ data.arr[i].userNo+ "</td>"
				+"<td>"+data.arr[i].position+"</td>"
				+"<td>"+ data.arr[i].regTime + "</td>";
                htmlStr += "</tr>";
            }
            if(data.arr.length==0){
            	htmlStr += "<tr style='text-align: center'><td colspan='6'><font color='#cd0a0a'>"+ '暂无记录' + "</font></td></tr>";
    		}
            htmlStr += "</tbody>";
            htmlStr += "<tfoot>";
            htmlStr += "<tr>";
            htmlStr += "<td colspan='3' style='text-align: left;border-right: 0px;'>";
            htmlStr += "<font color='grey'>显示";
           if(data.page.pageSize==2){
           	 htmlStr += "<select id='selfPageSize' οnchange='javascript:changePageSize()' ><option value='"+data.page.pageSize+"'>"+data.page.pageSize+"</option><option value='10'>10</option><option value='20'>20</option><option value='30'>30</option></select>";
           }
           else if(data.page.pageSize==10){
        	  	 htmlStr += "<select id='selfPageSize' οnchange='javascript:changePageSize()' ><option value='"+data.page.pageSize+"'>"+data.page.pageSize+"</option><option value='2'>2</option><option value='20'>20</option><option value='30'>30</option></select>";
           }
           else if(data.page.pageSize==20){
        	  	 htmlStr += "<select id='selfPageSize' οnchange='javascript:changePageSize()' ><option value='"+data.page.pageSize+"'>"+data.page.pageSize+"</option><option value='2'>2</option><option value='10'>10</option><option value='30'>30</option></select>";
               }
           else if(data.page.pageSize==30){
        	  	 htmlStr += "<select id='selfPageSize' οnchange='javascript:changePageSize()' ><option value='"+data.page.pageSize+"'>"+data.page.pageSize+"</option><option value='2'>2</option><option value='10'>10</option><option value='20'>20</option></select>";
               }
            htmlStr += "条/页_<span>全部" + data.page.totalCount + "条记录_共<span id='count'>" + data.page.totlePages+ "</span>页_"+"当前第"+data.page.currentPage+"页" + "</span></font>";
            htmlStr += "</td>";
            htmlStr += "<td colspan='3' style='text-align: right;border-left: 0px;'>";
           
            if(data.page.currentPage > 1){
            	 htmlStr += "<a href='javascript:void' οnclick='GoToFirstPage()' id='aFirstPage' >首    页</a>&nbsp;&nbsp; ";
            }else{
            	htmlStr += "<font color='grey'>首    页</font>&nbsp;&nbsp";
            }
            
            if((data.page.currentPage - 1 ) > 0 ){
            	htmlStr +="<a href='javascript:void' οnclick='GoToPrePage()' id='aPrePage'>上一页</a>&nbsp;&nbsp"; 
            }else{
            	htmlStr +="<font color='grey'>上一页</font>&nbsp;&nbsp";	 
            }
            
            if((data.page.currentPage+1) > data.page.totlePages){
            	 htmlStr += "<font color='grey'>下一页</font>&nbsp;&nbsp;";
            }else{
            	  htmlStr += "<a href='javascript:void' οnclick='GoToNextPage()' id='aNextPage'>下一页</a>&nbsp;&nbsp;";
            }
            if(data.page.currentPage < data.page.totlePages){
            	htmlStr += "<a href='javascript:void' οnclick='GoToEndPage()' id='aEndPage' >尾    页</a>&nbsp;&nbsp; ";
            }else{
            	htmlStr += "<font color='grey'>尾    页</font>&nbsp;&nbsp";
            }
            
            htmlStr += "<input id='pageNum' name='pageNum' class='input-page' type='text' /><input type='button'  value='跳转' οnclick='GoToAppointPage(this)' style='width: 60px; height: 25px;font-size: 12px;'/> ";
            htmlStr += "</td>";
            htmlStr += "</tr>";
            htmlStr += "</tfoot>";
            htmlStr += "</table>";

            $("#divSearchResult").html(htmlStr);
        }
    });
}

  • 大小: 25.9 KB
揽峰moc
关注
AJAXjson分页
07-07
ajax前端JSON数据分页DEMO，里面有个data是模拟后台传来的数据
使用JSON实现分页
weixin_33963594的博客
04-20 378
使用JSON实现分页可直接用 Fenye.html <!DOCTYPE html> <html> <head> <title>JSON分页</title> </head> <body> <script type="text/javascript"> functio...
ajax动态分页的DEMO
04-22
ajax js javascript 动态分页源码，mysql数据库
ajax分页demo
06-24
在“ajax分页demo”这个项目中，我们可以通过将压缩包“ajaxpage”解压并放入Tomcat服务器的webapps目录下，然后启动服务器来运行示例。访问http://localhost:8080/ajaxpage/，可以看到一个动态加载分页效果的实例。...
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
10-19
在本文中，我们将深入探讨如何使用PHP和Ajax技术实现无刷新分页功能。无刷新分页是一种提升用户体验的方法，它允许用户在不重新加载整个页面的情况下浏览多页内容，从而减少等待时间，提高互动性。 首先，理解无...
ajax动态分页
10-13
**Ajax动态分页**是一种网页数据加载技术，它允许页面在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这种技术极大地提高了用户体验，因为它减少了用户等待时间，并且使得页面交互更加流畅。 **...
ajax+json异步分页。
..小程小小小..
01-17 2469
jsonpager.js $(function () { // 计算分页总条数 var pageCount = 0; $.ajax({ type: "POST", cache: false, async: false, dataType: "text", url: "ashx/getdat
jquery ajax分页插件特效源代码demo完整版
springmvc_springdata的专栏
12-15 1981
jquery ajax分页插件特效源代码demo完整版 源代码下载地址:http://www.zuidaima.com/share/1550463586798592.htm
ajax分页,json数据返回
12-21
jquery ajax请求,json返回数据到前台,无刷新的分页.
ajax获取json数据使用jquery分页插件显示
06-22
插件下载地址 http://www.jq22.com/jquery-plugins分页-2-jq 下载的插件用自带的数据是可以的，但是采用ajax获取的json数据的时候会报错，所以我对插件进行了修改，成功实现。这个例子希望大家看懂自己来该，照抄不了。
ajax+json实现自动补全&ajax实现分页
weixin_65423584的博客
04-29 271
一、$.ajax() url:请求地址data:请求参数 "name="+sname+"&pwd="+spwd {name:sname,pwd:spwd}type:post/get 请求方式dataType:预计服务器可能返回的数据类型 text/jsonsuccess:成功的回调函数error:失败的回调函数 使用jQuery的ajax判断用户名是否存在 （$.ajax/$.post） servlet类： @WebServlet("/vname.do") public ...
js 使用JSON实现分页
qq_25285531的博客
04-20 307
使用JSON实现分页可直接用 Fenye.html <!DOCTYPE html> <html> <head> <title>JSON分页</title> </head> <body> <script type="text/javascript"> function getPageList...
ajax+jquery+json分页demo
08-15 113
实体类：Book.java package com.model; import java.util.Date; public class Book { private int id; private String name; private Date publish_time; public int getId() { return id; } p...
ajax json实现分页,基于Json的Ajax无刷新分页效果实现（一）
weixin_33309433的博客
08-05 492
由于我今天刚好要做无刷新分页的效果。所以就直接先上图了！如图，上部分是分页后取出来的数据。下部分是 分页器的实现(关于分页器的实现请参考 http://www.cnblogs.com/zhouzhaokun/archive/2011/08/24/2151558.html)我们先来实现页面的分页效果，1、新建一个 ajax 文件页面 ashx 或者 aspx， 我个人比较喜欢 aspx 。删掉页面...
ajax+json前端分页小实例
gdqsh(锅底全是灰)的专栏
12-14 318
前端jsp [code="java"] 11111 //页面加载，获取第一页的新闻列表 function winload() { send_request("get","newsManager?currentPage=1",null,"XML",populateList); } //将所获取的新闻列表填充到页面的相应位置 function popu...
java ajax json 分页_基于Jquery+Ajax+Json实现分页显示
weixin_32019219的博客
02-13 114
functiongetJSONData(pn) {//alert(pn);$.getJSON("blackList.ce", function(data) {var totalCount= data.totalCount; //总记录数var pageSize= 10; //每页显示几条记录var pageTotal= Math.ceil(totalCount / pageSize); //总页数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值