`
Franciswmf
  • 浏览: 797388 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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(), 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' 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);
                },
                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' 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);
        }
    });
}

  • 大小: 25.9 KB
分享到：
| ajax动态生成table
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ajax分页demo

    在“ajax分页demo”这个项目中，我们可以通过将压缩包“ajaxpage”解压并放入Tomcat服务器的webapps目录下，然后启动服务器来运行示例。访问http://localhost:8080/ajaxpage/，可以看到一个动态加载分页效果的实例。...

    ajax动态分页的DEMO

    这个“ajax动态分页的DEMO”是一个实际应用Ajax技术的例子，它包含了一个JavaScript文件（ajax.js）、一个JSP页面（Ajax.jsp）、一个SQL数据库脚本（database.sql）以及一个通知页面（notice.htm）。下面我们将详细...

    AJAXjson分页

    本DEMO主要展示了如何使用AJAX结合JSON格式的数据实现前端分页。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它以易于阅读和编写的形式，同时对人和机器都非常友好。在前后端分离的架构中，JSON...

    ajax动态分页的demo

    **Ajax 动态分页详解** 在Web应用中，数据量大时，一次性加载所有内容会导致页面加载缓慢，用户体验下降。为了解决这个问题，我们通常采用分页技术，而Ajax分页则是其中一种高效且用户体验良好的实现方式。本文将...

    ajax使用简单demo

    通过这个简单的Ajax DEMO，你可以了解到Ajax的基本使用方法，为进一步深入学习和应用Ajax打下基础。随着前端技术的发展，现在还有Fetch API、axios等更现代、更易用的库供开发者选择，它们都基于Ajax理念，但提供了...

    C#两个分页demo

    首先，我们来看"C# JSON分页"。在Web应用中，服务器端通常使用C#处理业务逻辑和数据查询，而JSON是一种轻量级的数据交换格式，它可以高效地传输数据到客户端。在分页场景下，C#会执行SQL查询以获取指定页码的数据，...

    Ajax分页 Asp.net 分页

    压缩包中的项目代码和Demo提供了实际操作的例子，你可以下载并运行，以加深对Ajax分页在Asp.net中实现的理解。通过查看源代码，你可以学习到如何处理Ajax请求，如何构建分页逻辑，以及如何在前端展示分页结果。 ...

    ajax php 分页功能完整

    - `demo.php`调用分页类，处理AJAX请求，返回JSON数据。 通过以上步骤，你可以构建一个完整的AJAX和PHP分页功能。这个功能允许用户在不刷新页面的情况下浏览大量的数据，提高了用户体验，同时减少了服务器负载。在...

    ajax动态分页

    **Ajax动态分页**是一种网页数据加载技术，它允许页面在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这种技术极大地提高了用户体验，因为它减少了用户等待时间，并且使得页面交互更加流畅。 **...

    SpringMVC+MyBatis+EasyUI简单分页Demo

    在本项目"SpringMVC+MyBatis+EasyUI简单分页Demo"中，我们将探讨如何结合这三种技术实现一个具备基本分页功能的Web应用。SpringMVC是Spring框架的一部分，负责处理HTTP请求和响应；MyBatis是一个轻量级的持久层框架...

    超酷的AJAX源码和Demo（1）

    在后续的“超酷的AJAX源码和Demo（2）”等资源中，可能会介绍更复杂的AJAX应用场景，比如使用Ajax进行分页加载、实现轮询更新、或者是利用AJAX配合WebSockets实现双向通信等。通过逐步学习和实践，开发者可以逐步...

    Json+ajax简单实例

    在“Demo”文件中，可能包含了HTML、CSS和JavaScript代码，展示了如何配置和使用AJAX和JSON进行数据交互，以及如何整合Bootstrap和DataTables。通过分析这个示例，开发者可以学习到如何在实际项目中实现前端与后端的...

    jquery_pagination分页demo

    "jQuery_pagination分页demo"是一个用于实现网页分页功能的示例项目，它基于JavaScript库jQuery，提供了高效且易于使用的分页功能。这个demo包括了首页、末页以及跳转到指定页数的功能，同时还包含了处理分页逻辑的...

    ajaxDEMO 适合ajax初学者

    Ajax广泛应用于网页动态加载、表单无刷新提交、实时聊天、分页加载等场景，显著提升了用户体验。 ### 6. 本AjaxDEMO简介 本DEMO包含一个名为`sstest`的文件，可能是JavaScript脚本或HTML文件，用于演示Ajax的基本...

    AjaxXMLHttpRequest_Demo02.zip

    本Demo02着重展示了如何利用XMLHttpRequest对象实现Ajax的基本用法。 在AjaxXMLHttpRequest_Demo02.zip中，我们可能会看到以下几个关键组成部分： 1. **HTML文件**：通常命名为index.html，它是用户界面的基础，...

    jQuery json带分页的动态数据表格代码.zip

    这个压缩包"jQuery json带分页的动态数据表格代码.zip"包含了一个简单的JavaScript实现，它演示了如何从JSON文件中获取数据并将其显示在一个交互式的表格中。下面我们将详细探讨这一技术。 首先，jQuery是一个广泛...

    AjaxDemo

    **AjaxDemo**是一个示例项目，它展示了在Web开发中如何使用AJAX（Asynchronous JavaScript and XML）技术来实现异步数据交互和页面无刷新更新。这个项目可能包含了一系列使用AJAX的实例，用于演示如何在.NET、ASP...

    java web常用到的ajax分页思路

    4. **数据传输**：服务器获取到数据后，将其转化为JSON或其他适合的格式，然后通过Ajax响应返回给前端。 5. **前端更新**：前端接收到响应数据后，使用JavaScript更新DOM结构，将新的数据展示在页面上。同时，还...

    《ajax实例demo》

    本实例Demo主要展示了如何使用Ajax实现页面的异步交互，提高用户体验。** 1. **基本概念** - **异步通信**：Ajax的核心是JavaScript的XMLHttpRequest对象，它允许浏览器在不刷新整个页面的情况下与服务器进行数据...

Magicbox
Global site tag (gtag.js) - Google Analytics