ajax json分页demo

原文 

后台上：
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' onclick='GoToFirstPage()' id='aFirstPage' >首    页</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >前一页</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>下一页</a>&nbsp;&nbsp; ";
                    htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾    页</a>&nbsp;&nbsp; ";
                    htmlStr += "<input type='text' /><input type='button'  value='跳转' onclick='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(),pageSize);
        }
        //前一页
        function GoToPrePage() {
            pageIndex -= 1;
            pageIndex = pageIndex >= 0 ? pageIndex : 0;
            AjaxGetData($("#txtSearch").val(),pageSize);
        }
        //后一页
        function GoToNextPage() {
            if (pageIndex + 1 < parseInt($("#count").text())) {
                pageIndex += 1;
            }
                AjaxGetData($("#txtSearch").val(),pageSize);
        }
        //尾页
        function GoToEndPage() {
            pageIndex = parseInt($("#count").text()) - 1;
            AjaxGetData($("#txtSearch").val(),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(),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,pageSize);
        });
      

        function ajaxGetListData(name,type: "post",data: "Name=" + name + "&currentPage=" + index + "&PageSize=" + size+"&doaction=userListTest",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' onchange='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' onclick='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' onclick='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' onclick='GoToNextPage()' id='aNextPage'>下一页</a>&nbsp;&nbsp;";
                    }
                    if(data.page.currentPage < data.page.totlePages){
                    	htmlStr += "<a href='javascript:void' onclick='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='跳转' onclick='GoToAppointPage(this)' style='width: 60px; height: 25px;font-size: 12px;'/> ";
                    htmlStr += "</td>";
                    htmlStr += "</tr>";
                    htmlStr += "</tfoot>";
                    htmlStr += "</table>";

                    $("#divSearchResult").html(htmlStr);
                },errorThrown) {
                    alert(XMLHttpRequest);
                    alert(textStatus);
                    alert(errorThrown);
                }
            });
        }
        //首页
        function GoToFirstPage() {
            pageIndex = 1;
            ajaxGetListData($("#checkByName").val(),$("#currentPageSize").val());
        }
        //上一页
        function GoToPrePage() {
            pageIndex -= 1;
            pageIndex = pageIndex >= 0 ? pageIndex : 0;
            ajaxGetListData($("#checkByName").val(),$("#currentPageSize").val());
        }
        //下一页
        function GoToNextPage() {
            if (pageIndex < parseInt($("#count").text())) {
                pageIndex += 1;
            }
                ajaxGetListData($("#checkByName").val(),$("#currentPageSize").val());
        }
        //尾页
        function GoToEndPage() {
            pageIndex = parseInt($("#count").text());
            ajaxGetListData($("#checkByName").val(),$("#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(),$("#currentPageSize").val());
                }
            }
        }
    
    </script>

再升级： 




//ajax获取列表
function ajaxGetListData(name,size) {
    $.ajax({
        url: "../../UserInfoServlet",data: "checkByName=" + name + "&currentPage=" + index + "&PageSize=" + size+"&doaction=userListTest",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' onchange='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' onchange='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' onchange='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' onchange='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' onclick='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' onclick='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' onclick='GoToNextPage()' id='aNextPage'>下一页</a>&nbsp;&nbsp;";
            }
            if(data.page.currentPage < data.page.totlePages){
            	htmlStr += "<a href='javascript:void' onclick='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='跳转' onclick='GoToAppointPage(this)' style='width: 60px; height: 25px;font-size: 12px;'/> ";
            htmlStr += "</td>";
            htmlStr += "</tr>";
            htmlStr += "</tfoot>";
            htmlStr += "</table>";

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

ajax json分页demo的更多相关文章

  1. ios – UIScrollView的平滑自定义分页

    我在UIScrollView中有两个(可能更多)视图,并希望使用分页.当我尝试使用UIScrollView的默认分页选项时出现问题,因为视图具有不同的宽度,无法正确分页.所以我已经实现了一个有效的自定义分页代码.但是,当滚动较慢时,它不会按预期运行.(它回到没有动画的原始位置.)以下是我目前通过uiscrollviewdelegate进行自定义分页的方法我想要的是：是)我有的：解决方法尝试下面的自

  2. ios – 使用子视图控制器分页滚动视图

    使用分页实现水平滚动视图的最佳做法是什么,每页有一个视图控制器？由于iOS5具有用于视图控制器容器/包含的API,因此PageControl示例仍然是实现此功能的最佳方式吗？

  3. 可可触摸 – 启用预览和分页的UICollectionView

    在AppStore中显示搜索结果时,我正在尝试模仿苹果公司的功能.(参考：http://searchengineland.com/apple-app-search-shows-only-one-result-at-a-time-133818)它显示像卡中的详细应用程序信息,并且它被分页.当中间的一个活动卡片和滚动视图的分页行为仍然完整时,我被困在如何使上一张和第二张卡片显示.我已经尝试使用UICo

  4. ios – 启用了内容插入的UIScrollView分页工作很奇怪

    我创建了具有内容插入的UIScrollView.第一次,scrollView.contentOffset.x为-160.0但是奇怪的问题是当我点击scrollView(黄色区域)时,内容偏移x值将重置为0并显示为这样.我尝试过几次,但是点击滚动视图会将内容偏移量重置为0.我该如何防止这种情况？解决方法UIScrollView分页通过滚动与scrollView宽度相同的页面(在您的情况下为480个宽

  5. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗？

  6. UIKit框架-高级控件Swift版本: 10.UIWebView方法/属性详解

    前面我们已经讲解完了UINavigationController的一些常用属性以及方法,现在让我们来看看一个关于网络的UIWebView.1.UIWebView的常用属性常用类型2.UIWebView的代理方法3.代码示范首先我们要使用storyBoard布局界面关联控件遵守代理协议自定义UIWebVIew实现代理方法在ViewDidLoad方法中实现PS:UIWebView继承与UIView,并

  7. Swift中的ASCII码的demo

    varaa:String=""varvv:Intforvv=0;vv

  8. 【Swift】SpriteKit开发iOS游戏——场景切换

    前言Swift是个很不错的语言，苹果官方提供的游戏开发框架也很不错。作为一个游戏来讲，里面的场景Scene肯定不止一个，所以需要切换场景代码代码从创建的时候的demo开始，demo的创建路径是开始我们会有一个场景文件GameScene所以我们要创建一个新的场景文件NextScene,内容参考demo给的GameScene,这里不做展开,QAQ核心跳转的代码很简单结束天很冷，多穿衣服，么么哒！

  9. swift+storyboard+UIImageview入门

    更新记录：该Storyboard教程由CarolineBegbie更新iOS8和Swift相关内容。Storyboard是最先在iOS5引入的一项振奋人心的特性，大幅缩减构建App用户界面所需的时间。要介绍Storyboard是什么，我打算从这张图讲起。这就是使用Storyboard的力量。Storyboard通过新的原型表项和静态表项特性，让处理表视图的工作更加轻松。Storyboard使自动布局更易用。接下来我们看一下Storyboard，点击项目浏览器中的Main.storyboard就可以在Int

  10. 使用RxSwift进行分页API调用

    如何实现这一点的任何建议将非常感谢…

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部