1.背景：
前端页面使用bootstrap分页，同时与搜索条件联动；
2. jsp页面由服务端返回后， 异步请求动态创建表格， 分页的数据由服务端第一次返回后初始化， 以后每次异步请求再更新。
jsp代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html lang="en" class="no-ie" style="overflow:hidden"> <head> <!-- Meta--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <title>Apollo - 签入记录</title> <link rel="stylesheet" href="../app/css/bootstrap.css"> <link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css"> <link rel="stylesheet" href="../vendor/animo/animate+animo.css"> <link rel="stylesheet" href="../vendor/datetimepicker/css/bootstrap-datetimepicker.min.css"> <link rel="stylesheet" href="../vendor/datatable/extensions/datatable-bootstrap/css/dataTables.bootstrap.css"> <link rel="stylesheet" href="../vendor/datatable/extensions/ColVis/css/dataTables.colVis.css"> <link rel="stylesheet" href="../app/css/app.css"> <link rel="stylesheet" href="../app/css/beadmin-theme-b3.css"> <link rel="stylesheet" href="../app/css/page.css"> <link rel="stylesheet" href="../vendor/sweetalert/lib/sweet-alert.css" /> <script src="../vendor/modernizr/modernizr.js" type="application/javascript"></script> <script src="../vendor/fastclick/fastclick.js" type="application/javascript"></script> <script> var basePath = "<%=basePath%>"; var pageNo = ${pageNo}; var totalCount = ${totalCount}; var pageSize = ${pageSize}; var startNum = ${startNum}; var stopNum = ${stopNum}; </script> </head> <body style="overflow:hidden"> <!-- START Main wrapper--> <div class="wrapper"> <!-- START Main section--> <section> <!-- START Page content--> <div class="content-wrapper" style="margin-left:-250px;margin-top:-40px; "> <h3>签入记录 <div style="float:right; margin-top:5px;" class="form-group"> <button type="button" id="createBiztype" class="btn btn-labeled btn-info"> <span class="btn-label"><i class="fa fa-plus"></i> </span>新建</button> </div> </h3> <!-- START panel--> <!-- START DATATABLE 3--> <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading" style="border-bottom:1px solid #eee;"> <form class="form-inline" id="" method="post" action="<%=path %>/page"> <div class="form-group"> <b>终端ID: </b> <input type="text" class="form-control mb-lg" id="terminalid" name="terminalid" value=''> </div> <div class="form-group"> <b>标志: </b> <input type="text" class="form-control mb-lg" id="flag" name="flag" value=''> </div> <div class="form-group"> <a style="margin:-10px 0 0 5px; float:left;" href="javascript:void(0);" class="mb-sm btn btn-primary" type="button" id="searchButton">搜索</a> </div> <input type="hidden" id="pageNo" name="pageNo" value=''> </form> </div> <div class="table-responsive"> <table class="table table-bordered table-hover dataTable no-footer" id="table-ext-1" > <thead> <tr> <th class="th200">标题</th> <th class="th200">节目ID</th> <th class="th800">创建时间</th> <th class="th200">媒体类型</th> <th class="th200">标志</th> <th class="th200">进度</th> <th class="th200">供应商</th> <th class="th200">操作</th> </tr> </thead> <tbody id="checkinRequest_tbody"> </tbody> <tfoot> <tr> </tr> </tfoot> </table> </div> <div class="panel-footer"> <div class="row"> <div style="line-height:35px;" class="col-lg-2"> <div class="input-group pull-left" id="checkinRequest_showlines"> </div> </div> <div class="col-lg-8"></div> <div class="tcdPageCode"></div> </div> </div> </div> </div> </div> <!-- END DATATABLE 3--> </div> <!-- END Page content--> </section> <!-- END Main section--> </div> <!-- END Main wrapper--> <!-- START modal--> <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal" > <div class="modal-dialog" style="400px; margin-top:200px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" data-dismiss="modal" aria-hidden="true" class="close" id="cancelAdd" >×</button> <h4 id="myModalLabel" class="modal-title">新建签入记录</h4> </div> <div class="modal-body"> <div class="table-responsive"> <form> <ul class="serinfo"> <li> <div class="form-group"> <b>名称: </b> <input type="text" id="addTypeName" class="form-control mb-lg" maxLength=50> </div> </li> </ul> <ul class="serinfo"> <li> <div class="form-group"> <b>描述: </b> <input type="text" id="addTypeDesc" class="form-control mb-lg" maxLength=100> </div> </li> </ul> </form> </div> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-default">取消</button> <button type="button" class="btn btn-primary" id="confirmCreate" >确定</button> </div> </fieldset> </div> </div> </div> <div id="myModaledit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal" > <div class="modal-dialog" style="400px; margin-top:200px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" data-dismiss="modal" aria-hidden="true" class="close" id="cancelEdit" >×</button> <h4 id="myModalLabel" class="modal-title">编辑签入记录</h4> </div> <div class="modal-body"> <div class="table-responsive"> <form> <ul class="serinfo"> <li> <div class="form-group"> <b>名称: </b> <input type="text" id="editTypeName" class="form-control mb-lg" maxLength=50> </div> </li> </ul> <ul class="serinfo"> <li> <div class="form-group"> <b>描述: </b> <input type="text" id="editTypeDesc" class="form-control mb-lg" maxLength=100> </div> </li> </ul> </form> </div> </div> <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-default">取消</button> <button type="button" class="btn btn-primary" id="confirmEdit" >确定</button> </div> </fieldset> </div> </div> </div> </div> </div> <!-- END modal--> <!-- START Scripts--> <!-- Main vendor Scripts--> <script src="../vendor/jquery/jquery.min.js"></script> <script src="../vendor/sweetalert/lib/sweet-alert.min.js"></script> <script src="../vendor/bootstrap/js/bootstrap.min.js"></script> <script src="../vendor/chosen/chosen.jquery.min.js"></script> <script src="../vendor/slider/js/bootstrap-slider.js"></script> <script src="../vendor/filestyle/bootstrap-filestyle.min.js"></script> <script src="../vendor/animo/animo.min.js"></script> <script src="../vendor/moment/min/moment-with-langs.min.js"></script> <script src="../vendor/datetimepicker/js/bootstrap-datetimepicker.min.js"></script> <script src="../vendor/slimscroll/jquery.slimscroll.min.js"></script> <script src="../vendor/store/store+json2.min.js"></script> <script src="../vendor/screenfull/screenfull.min.js"></script> <script src="../vendor/datatable/media/js/jquery.dataTables.min.js"></script> <script src="../vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrap.js"></script> <script src="../vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrapPagination.js"></script> <script src="../vendor/datatable/extensions/ColVis/js/dataTables.colVis.min.js"></script> <script src="../vendor/wizard/js/bwizard.min.js"></script> <script src="../vendor/parsley/parsley.min.js"></script> <script src="../app/js/app.js"></script> <script src="../script/commonutil.js"></script> <script src="../app/js/page.js"></script> <script src="../script/checkinRequest.js"></script> <!-- END Scripts--> </body> </html>
js代码
$(function(){ initTable(); $('.tcdPageCode').extendPagination({ pageId : pageNo, totalCount : totalCount, showPage : 5, limit : pageSize, callback : function(pageNo, limit, totalCount) { checkinRequestSearch(pageNo); } }); $("#searchButton").on('click',function(){ checkinRequestSearch(pageNo); }); }); function initTable(){ $.ajax({ url : basePath + "page/checkinRequest_list.action", type : "get", dataType : "json", success : function(dataMap){ createTBody(dataMap); createTFoot(); }, error : function(errorData){ } }); } function createTBody(dataMap){ if(dataMap!=null){ var html = []; var checkinRequestList = dataMap.checkinRequestList; for(var i=0; i<checkinRequestList.length; i++){ var checkinRequest = checkinRequestList[i]; html.push('<tr class="gradeX center">'); html.push('<td style="text-align:left;">'+checkinRequest.title+'</td>'); html.push('<td style="text-align:left;">'+checkinRequest.assetguid+'</td>'); html.push('<td style="text-align:left;">'+checkinRequest.createtime+'</td>'); html.push('<td style="text-align:left;">'+checkinRequest.mediatype+'</td>'); html.push('<td style="text-align:left;">'+checkinRequest.flag+'</td>'); html.push('<td style="text-align:left;">'+checkinRequest.progress+'</td>'); html.push('<td style="text-align:left;">'+checkinRequest.provider+'</td>'); html.push('<td><a href="#" class="checkin_view btn btn-default btn-xs"> 查看 </a></td>'); html.push('</tr>'); } $("#checkinRequest_tbody").empty().html(html.join('')); } } function createTFoot(dataMap){ var reloadPagination = false; if(dataMap!=null){ startNum = dataMap.startNum; stopNum = dataMap.stopNum; reloadPagination = totalCount==dataMap.totalCount?false:true totalCount = dataMap.totalCount; pageNo = dataMap.pageNo; //pageSize = dataMap.pageSize; } var str = '显示 ' + startNum + '至' + stopNum + '项 ， 共' + totalCount +' 项。'; $("#checkinRequest_showlines").empty().html(str); if(totalCount=='0'){ $('.tcdPageCode').empty(); }else if($('.tcdPageCode').html()=='' || reloadPagination){// $('.tcdPageCode').extendPagination({ pageId : pageNo, totalCount : totalCount, showPage : 5, limit : pageSize, callback : function(pageNo, limit, totalCount) { checkinRequestSearch(pageNo); } }); } } function checkinRequestSearch(pageNo){ var terminalid = $("#terminalid").val(); var flag = $("#flag").val(); $.ajax({ url : basePath + "page/checkinRequest_search.action", type : "post", data : { "pageNo" : pageNo, "terminalid" : terminalid, "flag" : flag }, dataType : "json", success : function(dataMap){ createTBody(dataMap); createTFoot(dataMap); }, error : function(errorData){ } }); }
bootStrapPager分页插件
/** * Created by Hope on 2014/12/28. */ (function ($) { $.fn.extendPagination = function (options) { var defaults = { pageId:'', totalCount: '', showPage: '10', limit: '5', callback: function () { return false; } }; $.extend(defaults, options || {}); // alert(defaults.pageId); if (defaults.totalCount == '') { //alert('总数不能为空!'); $(this).empty(); return false; } else if (Number(defaults.totalCount) <= 0) { //alert('总数要大于0!'); $(this).empty(); return false; } if (defaults.showPage == '') { defaults.showPage = '10'; } else if (Number(defaults.showPage) <= 0)defaults.showPage = '10'; if (defaults.limit == '') { defaults.limit = '5'; } else if (Number(defaults.limit) <= 0)defaults.limit = '5'; var totalCount = Number(defaults.totalCount), showPage = Number(defaults.showPage), limit = Number(defaults.limit), totalPage = Math.ceil(totalCount / limit); if (totalPage > 0) { var html = []; html.push(' <ul class="pagination">'); html.push(' <li class="previous"><a href="#">«</a></li>'); html.push('<li class="disabled hidden"><a href="#">...</a></li>'); if (totalPage <= showPage) { for (var i = 1; i <= totalPage; i++) { if (i == defaults.pageId) html.push(' <li class="active"><a href="#">' + i + '</a></li>'); else html.push(' <li><a href="#">' + i + '</a></li>'); } } else { for (var j = 1; j <= showPage; j++) { if (j == defaults.pageId) html.push(' <li class="active"><a href="#">' + j + '</a></li>'); else html.push(' <li><a href="#">' + j + '</a></li>'); } } html.push('<li class="disabled hidden"><a href="#">...</a></li>'); html.push('<li class="next"><a href="#">»</a></li></ul>'); $(this).html(html.join('')); if (totalPage > showPage) $(this).find('ul.pagination li.next').prev().removeClass('hidden'); var pageObj = $(this).find('ul.pagination'), preObj = pageObj.find('li.previous'), currentObj = pageObj.find('li').not('.previous,.disabled,.next'), nextObj = pageObj.find('li.next'); function loopPageElement(minPage, maxPage) { var tempObj = preObj.next(); for (var i = minPage; i <= maxPage; i++) { if (minPage == 1 && (preObj.next().attr('class').indexOf('hidden')) < 0) preObj.next().addClass('hidden'); else if (minPage > 1 && (preObj.next().attr('class').indexOf('hidden')) > 0) preObj.next().removeClass('hidden'); if (maxPage == totalPage && (nextObj.prev().attr('class').indexOf('hidden')) < 0) nextObj.prev().addClass('hidden'); else if (maxPage < totalPage && (nextObj.prev().attr('class').indexOf('hidden')) > 0) nextObj.prev().removeClass('hidden'); var obj = tempObj.next().find('a'); if (!isNaN(obj.html()))obj.html(i); tempObj = tempObj.next(); } } function callBack(curr) { defaults.callback(curr, defaults.limit, totalCount); } currentObj.click(function (event) { event.preventDefault(); var currPage = Number($(this).find('a').html()), activeObj = pageObj.find('li[class="active"]'), activePage = Number(activeObj.find('a').html()); if (currPage == activePage) return false; if (totalPage > showPage) { var maxPage = currPage, minPage = 1; if (($(this).prev().attr('class')) && ($(this).prev().attr('class').indexOf('disabled')) >= 0) { minPage = currPage - 1; maxPage = minPage + showPage - 1; loopPageElement(minPage, maxPage); } else if (($(this).next().attr('class')) && ($(this).next().attr('class').indexOf('disabled')) >= 0) { if (totalPage - currPage >= 1) maxPage = currPage + 1; else maxPage = totalPage; if (maxPage - showPage > 0) minPage = (maxPage - showPage) + 1; loopPageElement(minPage, maxPage) } } activeObj.removeClass('active'); $.each(currentObj, function (index, thiz) { if ($(thiz).find('a').html() == currPage) { $(thiz).addClass('active'); callBack(currPage); } }); }); preObj.click(function (event) { event.preventDefault(); var activeObj = pageObj.find('li[class="active"]'), activePage = Number(activeObj.find('a').html()); if (activePage <= 1) return false; if (totalPage > showPage) { var maxPage = activePage, minPage = 1; if ((activeObj.prev().prev().attr('class')) && (activeObj.prev().prev().attr('class').indexOf('disabled')) >= 0) { minPage = activePage - 1; if (minPage > 1) minPage = minPage - 1; maxPage = minPage + showPage - 1; loopPageElement(minPage, maxPage); } } $.each(currentObj, function (index, thiz) { if ($(thiz).find('a').html() == (activePage - 1)) { activeObj.removeClass('active'); $(thiz).addClass('active'); callBack(activePage - 1); } }); }); nextObj.click(function (event) { event.preventDefault(); var activeObj = pageObj.find('li[class="active"]'), activePage = Number(activeObj.find('a').html()); if (activePage >= totalPage) return false; if (totalPage > showPage) { var maxPage = activePage, minPage = 1; // if ((activeObj.next().next().attr('class')) // && (activeObj.next().next().attr('class').indexOf('disabled')) >= 0) { // maxPage = activePage + 2; // if (maxPage > totalPage) maxPage = totalPage; // minPage = maxPage - showPage + 1; // loopPageElement(minPage, maxPage); // } if ((activeObj.next().next().attr('class')) && (activeObj.next().next().attr('class').indexOf('disabled')) >= 0) { maxPage = activePage + 2; if (maxPage > totalPage) maxPage = totalPage; minPage = maxPage - showPage + 1; loopPageElement(minPage, maxPage); } } $.each(currentObj, function (index, thiz) { if ($(thiz).find('a').html() == (activePage + 1)) { activeObj.removeClass('active'); $(thiz).addClass('active'); callBack(activePage + 1); } }); }); } }; })(jQuery);
action代码
package com.cdv.apollo.action; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import org.apache.commons.lang.StringUtils; import org.apache.struts2.ServletActionContext; import com.aliyun.oss.common.comm.ServiceClient.Request; import com.cdv.apollo.model.CheckinRequest; import com.cdv.apollo.service.CheckInRequestService; import com.cdv.apollo.util.PageParameter; import com.cdv.msf.sdk.UserClient; import com.opensymphony.xwork2.ActionSupport; import net.sf.json.JSONObject; public class CheckinRequestAction extends ActionSupport { /** * */ private static final long serialVersionUID = -7230950957476388246L; private Map<String, Object> dataMap = new HashMap<String, Object>(); public Map<String, Object> getDataMap() { return dataMap; } @Resource private CheckInRequestService checkInRequestService; public String index(){ HttpServletRequest request = ServletActionContext.getRequest(); PageParameter page = new PageParameter(); int totalCount = checkInRequestService.countTotalRecords(); // int totalPage = totalCount%page.getPageSize()==0?totalCount/page.getPageSize():totalCount/page.getPageSize()+1; int startNum = 0, stopNum = 0; if((startNum+page.getPageSize())<=totalCount){ startNum = 1; stopNum = startNum+page.getPageSize()-1; }else if(totalCount>0){ startNum = 1; stopNum = totalCount; } request.setAttribute("startNum", startNum); request.setAttribute("stopNum", stopNum); request.setAttribute("totalCount", totalCount); request.setAttribute("pageNo", page.getPageNo()); request.setAttribute("pageSize", page.getPageSize()); return "index"; } public String list(){ dataMap.clear(); List<CheckinRequest> checkinRequestList = checkInRequestService.list(-1, null, null, null, null, null, 0, 10); dataMap.put("checkinRequestList", checkinRequestList); return SUCCESS; } public String search(){ dataMap.clear(); PageParameter page = new PageParameter(); int s = 0, max = 10, pageNo = 1, flag=-1; int startNum = 0, stopNum = 0; HttpServletRequest request = ServletActionContext.getRequest(); String pageNoStr = (String) request.getParameter("pageNo"); String terminalid = (String) request.getParameter("terminalid"); String flagStr = (String) request.getParameter("flag"); if(StringUtils.isNotEmpty(flagStr)){ flag = Integer.parseInt(flagStr); } int totalCount = checkInRequestService.count2Terminal(terminalid, flag); int totalPage = totalCount%page.getPageSize()==0?totalCount/page.getPageSize():totalCount/page.getPageSize()+1; if(StringUtils.isNotEmpty(pageNoStr)){ pageNo = Integer.parseInt(pageNoStr); pageNo = pageNo<=totalPage?pageNo:1; s = (pageNo-1)*10; } List<CheckinRequest> checkinRequestList = checkInRequestService.list2Terminal(terminalid, flag, s, max); if(totalCount>0){ startNum = (pageNo-1)*page.getPageSize() + 1; stopNum = (startNum-1+page.getPageSize())<=totalCount?(startNum-1+page.getPageSize()):totalCount; } dataMap.put("startNum", startNum); dataMap.put("stopNum", stopNum); dataMap.put("totalCount", totalCount); dataMap.put("pageNo", pageNo); dataMap.put("checkinRequestList", checkinRequestList); return SUCCESS; } }
struts配置
<package name="homepage" namespace="/" extends="json-default"> <action name="checkinRequest_*" class="com.cdv.apollo.action.CheckinRequestAction" method="{1}"> <result name="index">/page/checkinRequest.jsp</result> <result name="success" type="json"> <param name="root">dataMap</param> </result> </action> </package>