一个List请求分页
作者:互联网
在刚进入页面的时候,请求所有数据时候,拼接一个分页样式
$("#page-info").children().remove(); //插入上一页 $("#page-info").append("<a class=\"prev\" href=\"\" onclick=\"prepage(-1)\"><<</a>"); //插入具体的页码,如何设计得可拓展呢, if(pageNumber<=7){ for(var i=1;i<=pageNumber;i++){ $("#page-info").append('<a class=\"num\" onclick=\"gotopage(this)\">'+i+'</a>'); } }else{ for(var i=1;i<=7;i++){ $("#page-info").append('<a class=\"num\" onclick=\"gotopage(this)\">'+i+'</a>'); } $("#page-info").append('...'); } //插入下一页 $("#page-info").append("<a class=\"next\" href=\"\" onclick=\"nextpage(1)\">>></a>");
点击选中页码,请求当前页码,
//请求指定页码数据 gotopage = function(e){ var pageIndex = $(e).text(); tempIndex = pageIndex; setdemo(); //进来订单页面,先查询一下所有订单 $.ajax({ type: 'get', url: "/getOrdersByIndex", timeout: 0, async: true, contentType: "application/x-www-form-urlencoded; charset=UTF-8", data: { pageIndex:pageIndex }, success: function (resultData) { console.log(result.data); $("#orderslist-box tbody").children().remove(); for (var i = 0; i < resultData.data.length; i++) { var html = '<tr><td>' + resultData.data[i].orderid + '</td>' + '<td>' + resultData.data[i].productid + '</td>' + '<td>' + resultData.data[i].totalprice + '</td>' + '<td>' + resultData.data[i].paystate + '</td>' + '<td>' + resultData.data[i].userid + '</td>' + '<td>' + resultData.data[i].telephone + '</td>' + '<td>' + resultData.data[i].paytime + '</td>'; if (resultData.data[i].paystate == 0) { html += '<td id="opera-' + i + '" class="td-manage">' + '<button onclick="changeState(\'' + resultData.data[i].orderid + '\',\'' + i + '\');">' + "确认订单" + '</button>' + '<button onclick="cancelTheOrder(\'' + resultData.data[i].orderid + '\',\'' + i + '\');">' + "取消" + '</button>' + '</td>' + '</tr>'; } else if (resultData.data[i].paystate == 1) { html += '<td>已支付</td></tr>'; } else if (resultData.data[i].paystate == 2) { html += '<td>已取消</td></tr>'; } $("#orderslist-box tbody").prepend(html); } }, error:function(){ } }); };
后台数据库请求接口
@RequestMapping(value="/getOrdersByIndex") public BaseResponse getOrdersByIndex(@RequestParam("pageIndex")String pageIndex){ BaseResponse response=new BaseResponse(StatusCode.Success); List<Orders> orders = new ArrayList<Orders>(); orders = orderService.getAll(); //pageindex是要指定查询的页码,每页20条数据 int index = Integer.parseInt(pageIndex); if (index == 1) { orders.subList(0,orders.size()>=20?20:orders.size()); }else{ orders.subList((index-1)*20,((index)*20 > orders.size())?orders.size():index*20); } response.setData(orders); return response; }
利用了List的子集合返回了所有的数据,一个简单的分页实现,暂时不考虑性能和多线程下的安全性。
标签:index,pageIndex,20,请求分页,resultData,List,一个,data,orders 来源: https://www.cnblogs.com/EarlyBridVic/p/12484545.html