ajax json分页demo

最新推荐文章于 2024-10-10 22:04:37 发布

揽峰moc

最新推荐文章于 2024-10-10 22:04:37 发布

阅读量113

点赞数

分类专栏： Json-轻量级的数据交换格式文章标签： json javascript ViewUI

本文链接：https://blog.csdn.net/big1989wmf/article/details/84447741

版权

Json-轻量级的数据交换格式专栏收录该内容

14 篇文章 0 订阅

订阅专栏

后台上：
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>   ";
                    htmlStr += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >前一页</a>   ";
                    htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>下一页</a>   ";
                    htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾    页</a>   ";
                    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>   ";
                    }else{
                    	htmlStr += "<font color='grey'>首    页</font> &nbsp";
                    }

                    if((data.page.currentPage - 1 ) > 0 ){
                    	htmlStr +="<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage'>上一页</a> &nbsp"; 
                    }else{
                    	htmlStr +="<font color='grey'>上一页</font> &nbsp";	 
                    }

                    if((data.page.currentPage+1) > data.page.totlePages){
                    	 htmlStr += "<font color='grey'>下一页</font>  ";
                    }else{
                    	  htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>下一页</a>  ";
                    }
                    if(data.page.currentPage < data.page.totlePages){
                    	htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾    页</a>   ";
                    }else{
                    	htmlStr += "<font color='grey'>尾    页</font> &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>

再升级：

[img]http://dl2.iteye.com/upload/attachment/0086/2966/67f01ee4-f796-375c-974f-7e48467e55cc.png[/img]

//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>   ";
            }else{
            	htmlStr += "<font color='grey'>首    页</font> &nbsp";
            }

            if((data.page.currentPage - 1 ) > 0 ){
            	htmlStr +="<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage'>上一页</a> &nbsp"; 
            }else{
            	htmlStr +="<font color='grey'>上一页</font> &nbsp";	 
            }

            if((data.page.currentPage+1) > data.page.totlePages){
            	 htmlStr += "<font color='grey'>下一页</font>  ";
            }else{
            	  htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>下一页</a>  ";
            }
            if(data.page.currentPage < data.page.totlePages){
            	htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾    页</a>   ";
            }else{
            	htmlStr += "<font color='grey'>尾    页</font> &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);
        }
    });
}