`
Franciswmf
  • 浏览: 780366 次
  • 性别: 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
评论
发表评论

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

相关推荐

    AJAXjson分页

    ajax前端JSON数据分页DEMO，里面有个data是模拟后台传来的数据

    jQuery+Struts+Ajax无刷新分页

    使用myeclipse开发的jQuery加上struts的ajax无刷新分页，一个完整的demo，经测试，可运行。里面的数据是通过自己的拼凑的JSON数据来实现的分页。

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

    jQuery datatables小实例demo可实现ajax数据请求对接，模拟访问json文件，回显数据展示，可搜索、排序、自定也显示条数据、分页，动态表格代码。

    jquery+pagination+json

    分页demo, 模拟动态查询数据库的ajax请求json数据分页

    Json Jquery 自动生成table的无刷新分页插件整合pagination

    已经整合成插件 将数据源存为json 并写好分页回调函数即可 内有详细说明 需要详细demo的可以留言 我看情况放上来

    Struts2+Spring+Hibernate+Ehcache+AJAX+JQuery+Oracle 框架集成用户登录注册Demo工程

    3.Ajax无刷新异步调用Struts2，返回Json数据，以用户注册为例。 4.在服务端分页查询功能，优点：实时性：跳页才查询。数据量小：只加载当前页的记录进行显示。 5.单数据源配置(兼容Tomcat和Weblogic)。 6.Hibernate...

    jQuery json带分页的动态数据表格特效代码

    jQuery datatables小实例demo可实现ajax数据请求对接，模拟访问json文件，回显数据展示，可搜索、排序、自定也显示条数据、分页，动态表格代码。

    AJAX 源码范例

    源码结构说明 1.AjaxDemo文件夹下为源文件 2.AjaxDemo.war为部署文件 &lt;br&gt;第20章 程序描述：本章将实现上传文件时显示进度条的功能。当上传文件时，客户端同时显示文件上传的进度，从而及时了解...

    jquery datatable服务端分页

    OK，上次完成了客户端的分页，这次我们就在上一次的Demo上进行修改，来实现服务端的分页~ js代码： [removed] $(document).ready(function() { $('#table_id_example').DataTable({ "bProcessing" : false, //...

    laypage分页控件使用实例详解

    $.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义 laypage({ cont: 'page1', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：...

    Pukis:ajax用户管理仪表盘

    特征 ： Ajax 用户管理 - Ajax 访问控制列表用户管理Json 配置管理 - 在 json 中为您的应用程序配置设置管理表格助手 - 仅通过配置生成带有排序和分页的表格未来版本计划： 前端 - Angular.js 集成后端 - SOA 架构...

    SpringMVC4.0.3+Mybatis3.2.5+EasyUI1.4.1 Demo

    该项目使用springmvc4.0.3 + Mybatis3.2.5 前端使用easyUI1.4.1 ...1.ajax请求，返回JSON数据，有中文乱码解决方案 2.登陆拦截，未登陆过的用户将跳转到登陆页面 3.邮件发送 4.企业级前端界面 5.前端数据分页、查询

    Jquery DataTable基于Twitter Bootstrap的样式

    Jquery DataTable是一个很不错的表格插件。 1、功能强大，支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 ...3、支持ajax、dom、json等数据源； 4、众多使用者的实例代码

    我记录　内容管理系统 CMS源码

    不像其他一些框架只提供一个 blog 的粗糙 demo。 wojilu framework 希望自己是一个真正从实战中来，到实战中去的框架。 4、从整体上考虑各子框架的设计，比如前端 ajax 部分和 mvc 框架的结合；比如IOC依赖注入和mvc...

    后台管理模板

    2，系统里面主要了一些ext的组件：grid，tab，combox，button，toolbutton等，基本上所有的ext组件在这里都有涉及，还有就是后台返回的所有数据都是采用json格式，这也是实现ajax传递的首选技术了。 3，这是将多数...

    2008最新框架源码，简单清晰明了

    2，系统里面主要了一些ext的组件：grid，tab，combox，button，toolbutton等，基本上所有的ext组件在这里都有涉及，还有就是后台返回的所有数据都是采用json格式，这也是实现ajax传递的首选技术了。 3，这是将多数...

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