后台上： 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(),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 + "¤tPage=" + 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> ";
}else{
htmlStr += "<font color='grey'>首 页</font>  ";
}
if((data.page.currentPage - 1 ) > 0 ){
htmlStr +="<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage'>上一页</a>  ";
}else{
htmlStr +="<font color='grey'>上一页</font>  ";
}
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>  ";
}
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 + "¤tPage=" + 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> "; }else{ htmlStr += "<font color='grey'>首 页</font>  "; } if((data.page.currentPage - 1 ) > 0 ){ htmlStr +="<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage'>上一页</a>  "; }else{ htmlStr +="<font color='grey'>上一页</font>  "; } 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>  "; } 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); } }); }原文链接：https://www.f2er.com/ajax/161233.html
