1.背景：

前端页面使用bootstrap分页，同时与搜索条件联动；

2. jsp页面由服务端返回后， 异步请求动态创建表格， 分页的数据由服务端第一次返回后初始化， 以后每次异步请求再更新。

jsp代码

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3.     <%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
  4.    <%
  5.     String path = request.getContextPath();
  6.     String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  7.     %>
  8.  
  9. <!DOCTYPE html>
  10. <html lang="en" class="no-ie" style="overflow:hidden">
  11. <head>
  12. <!-- Meta-->
  13. <meta charset="utf-8">
  14. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  15. <meta name="description" content="">
  16. <meta name="keywords" content="">
  17. <meta name="author" content="">
  18. <title>Apollo - 签入记录</title>
  19. <link rel="stylesheet" href="../app/css/bootstrap.css">
  20. <link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css">
  21. <link rel="stylesheet" href="../vendor/animo/animate+animo.css">
  22. <link rel="stylesheet" href="../vendor/datetimepicker/css/bootstrap-datetimepicker.min.css">
  23. <link rel="stylesheet" href="../vendor/datatable/extensions/datatable-bootstrap/css/dataTables.bootstrap.css">
  24. <link rel="stylesheet" href="../vendor/datatable/extensions/ColVis/css/dataTables.colVis.css">
  25. <link rel="stylesheet" href="../app/css/app.css">
  26. <link rel="stylesheet" href="../app/css/beadmin-theme-b3.css">
  27. <link rel="stylesheet" href="../app/css/page.css">
  28. <link rel="stylesheet" href="../vendor/sweetalert/lib/sweet-alert.css" />
  29. <script src="../vendor/modernizr/modernizr.js" type="application/javascript"></script>
  30. <script src="../vendor/fastclick/fastclick.js" type="application/javascript"></script>
  31.  
  32. <script>
  33.     var basePath = "<%=basePath%>";
  34.     var pageNo = ${pageNo};
  35.     var totalCount = ${totalCount};
  36.     var pageSize = ${pageSize};
  37.     var startNum = ${startNum};
  38.     var stopNum = ${stopNum};
  39. </script>
  40. </head>
  41.  
  42. <body style="overflow:hidden">
  43. <!-- START Main wrapper-->
  44. <div class="wrapper">
  45.   <!-- START Main section-->
  46.   <section>
  47.     <!-- START Page content-->
  48.     <div class="content-wrapper" style="margin-left:-250px;margin-top:-40px; ">
  49.       <h3>签入记录
  50.       <div style="float:right; margin-top:5px;" class="form-group">
  51.                   <button type="button" id="createBiztype"  class="btn btn-labeled btn-info"> <span class="btn-label"><i class="fa fa-plus"></i> </span>新建</button>
  52.                 </div>
  53.       </h3>
  54.       <!-- START panel-->
  55.       <!-- START DATATABLE 3-->
  56.       <div class="row">
  57.         <div class="col-lg-12">
  58.           <div class="panel panel-default">
  59.             <div class="panel-heading" style="border-bottom:1px solid #eee;">
  60.                <form class="form-inline" id="" method="post" action="<%=path %>/page">
  61.  
  62.                 <div class="form-group">
  63.                                 <b>终端ID:&nbsp;</b>
  64.                                 <input type="text" class="form-control mb-lg" id="terminalid" name="terminalid" value=''>
  65.                             </div>
  66.                 <div class="form-group">
  67.                                 <b>标志:&nbsp;</b>
  68.                                 <input type="text" class="form-control mb-lg" id="flag" name="flag" value=''>
  69.                             </div>
  70.                 <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>
  71.                   <input type="hidden" id="pageNo" name="pageNo" value=''>
  72.               </form>
  73.             </div>
  74.             <div class="table-responsive">
  75.               <table class="table table-bordered table-hover dataTable no-footer" id="table-ext-1" >
  76.                 <thead>
  77.                   <tr>
  78.                     <th class="th200">标题</th>
  79.                     <th class="th200">节目ID</th>
  80.                     <th class="th800">创建时间</th>
  81.                     <th class="th200">媒体类型</th>
  82.                     <th class="th200">标志</th>
  83.                     <th class="th200">进度</th>
  84.                     <th class="th200">供应商</th>
  85.                     <th class="th200">操作</th>
  86.                   </tr>
  87.                 </thead>
  88.                 <tbody id="checkinRequest_tbody">
  89.  
  90.                 </tbody>
  91.                 <tfoot>
  92.                   <tr> </tr>
  93.                 </tfoot>
  94.               </table>
  95.             </div>
  96.             <div class="panel-footer">
  97.               <div class="row">
  98.                 <div style="line-height:35px;" class="col-lg-2">
  99.                   <div class="input-group pull-left" id="checkinRequest_showlines">  </div>
  100.                 </div>
  101.                 <div class="col-lg-8"></div>
  102.                   <div class="tcdPageCode"></div>
  103.               </div>
  104.             </div>
  105.           </div>
  106.         </div>
  107.       </div>
  108.       <!-- END DATATABLE 3--> 
  109.  
  110.     </div>
  111.     <!-- END Page content-->
  112.   </section>
  113.   <!-- END Main section-->
  114. </div>
  115. <!-- END Main wrapper--> 
  116.  
  117. <!-- START modal-->
  118. <div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal" >
  119.   <div class="modal-dialog" style="width:400px; margin-top:200px;">
  120.     <div class="modal-content">
  121.       <div class="modal-header">
  122.         <button type="button" data-dismiss="modal" aria-hidden="true" class="close" id="cancelAdd" >×</button>
  123.         <h4 id="myModalLabel" class="modal-title">新建签入记录</h4>
  124.       </div>
  125.        <div class="modal-body">
  126.  
  127.             <div class="table-responsive">
  128.             <form>
  129.             <ul class="serinfo">
  130.             <li>
  131.             <div class="form-group">
  132.                                 <b>名称:&nbsp;</b>
  133.                                 <input type="text" id="addTypeName" class="form-control mb-lg" maxLength=50>
  134.                             </div>
  135.             </li>
  136.             </ul>
  137.              <ul class="serinfo">
  138.             <li>
  139.             <div class="form-group">
  140.                                 <b>描述:&nbsp;</b>
  141.                                 <input type="text" id="addTypeDesc" class="form-control mb-lg" maxLength=100>
  142.                             </div>
  143.             </li>
  144.             </ul>
  145.             </form>
  146.           </div>
  147.         </div>
  148.            <div class="modal-footer">
  149.         <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
  150.         <button type="button" class="btn btn-primary" id="confirmCreate" >确定</button>
  151.             </div>
  152.       </fieldset>
  153.  
  154.       </div>
  155.     </div>
  156.   </div>
  157.  
  158.   <div id="myModaledit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" class="modal" >
  159.   <div class="modal-dialog" style="width:400px; margin-top:200px;">
  160.     <div class="modal-content">
  161.       <div class="modal-header">
  162.         <button type="button" data-dismiss="modal" aria-hidden="true" class="close" id="cancelEdit" >×</button>
  163.         <h4 id="myModalLabel" class="modal-title">编辑签入记录</h4>
  164.       </div>
  165.        <div class="modal-body">
  166.  
  167.             <div class="table-responsive">
  168.             <form>
  169.             <ul class="serinfo">
  170.             <li>
  171.             <div class="form-group">
  172.                                 <b>名称:&nbsp;</b>
  173.                                 <input type="text" id="editTypeName" class="form-control mb-lg" maxLength=50>
  174.                             </div>
  175.             </li>
  176.             </ul>
  177.              <ul class="serinfo">
  178.             <li>
  179.             <div class="form-group">
  180.                                 <b>描述:&nbsp;</b>
  181.                                 <input type="text" id="editTypeDesc" class="form-control mb-lg" maxLength=100>
  182.                             </div>
  183.             </li>
  184.             </ul>
  185.             </form>
  186.           </div>
  187.         </div>
  188.            <div class="modal-footer">
  189.         <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
  190.         <button type="button" class="btn btn-primary" id="confirmEdit" >确定</button>
  191.             </div>
  192.       </fieldset>
  193.  
  194.       </div>
  195.     </div>
  196.   </div>
  197.  
  198. </div>
  199. </div>
  200.  
  201. <!-- END modal--> 
  202.  
  203. <!-- START Scripts-->
  204. <!-- Main vendor Scripts-->
  205. <script src="../vendor/jquery/jquery.min.js"></script>
  206. <script src="../vendor/sweetalert/lib/sweet-alert.min.js"></script>
  207. <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
  208. <script src="../vendor/chosen/chosen.jquery.min.js"></script>
  209. <script src="../vendor/slider/js/bootstrap-slider.js"></script>
  210. <script src="../vendor/filestyle/bootstrap-filestyle.min.js"></script>
  211. <script src="../vendor/animo/animo.min.js"></script>
  212. <script src="../vendor/moment/min/moment-with-langs.min.js"></script>
  213. <script src="../vendor/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
  214. <script src="../vendor/slimscroll/jquery.slimscroll.min.js"></script>
  215. <script src="../vendor/store/store+json2.min.js"></script>
  216. <script src="../vendor/screenfull/screenfull.min.js"></script>
  217. <script src="../vendor/datatable/media/js/jquery.dataTables.min.js"></script>
  218. <script src="../vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrap.js"></script>
  219. <script src="../vendor/datatable/extensions/datatable-bootstrap/js/dataTables.bootstrapPagination.js"></script>
  220. <script src="../vendor/datatable/extensions/ColVis/js/dataTables.colVis.min.js"></script>
  221. <script src="../vendor/wizard/js/bwizard.min.js"></script>
  222. <script src="../vendor/parsley/parsley.min.js"></script>
  223. <script src="../app/js/app.js"></script>
  224. <script src="../script/commonutil.js"></script>
  225. <script src="../app/js/page.js"></script>
  226. <script src="../script/checkinRequest.js"></script>
  227. <!-- END Scripts-->
  228. </body>
  229. </html>

js代码

  1. $(function(){
  2.     initTable();
  3.  
  4.     $('.tcdPageCode').extendPagination({
  5.         pageId : pageNo,
  6.         totalCount : totalCount,
  7.         showPage : 5,
  8.         limit : pageSize,
  9.         callback : function(pageNo, limit, totalCount) {
  10.             checkinRequestSearch(pageNo);
  11.         }
  12.     });
  13.  
  14.     $("#searchButton").on('click',function(){
  15.         checkinRequestSearch(pageNo);
  16.     });
  17. });
  18.  
  19. function initTable(){
  20.     $.ajax({
  21.         url : basePath + "page/checkinRequest_list.action",
  22.         type : "get",
  23.         dataType : "json",
  24.         success : function(dataMap){
  25.             createTBody(dataMap);
  26.             createTFoot();
  27.         },
  28.         error : function(errorData){
  29.         }
  30.     });
  31. }
  32.  
  33. function createTBody(dataMap){
  34.     if(dataMap!=null){
  35.         var html = [];
  36.         var checkinRequestList = dataMap.checkinRequestList;
  37.         for(var i=0; i<checkinRequestList.length; i++){
  38.             var checkinRequest = checkinRequestList[i];
  39.             html.push('<tr class="gradeX center">');
  40.             html.push('<td style="text-align:left;">'+checkinRequest.title+'</td>');
  41.             html.push('<td style="text-align:left;">'+checkinRequest.assetguid+'</td>');
  42.             html.push('<td style="text-align:left;">'+checkinRequest.createtime+'</td>');
  43.             html.push('<td style="text-align:left;">'+checkinRequest.mediatype+'</td>');
  44.             html.push('<td style="text-align:left;">'+checkinRequest.flag+'</td>');
  45.             html.push('<td style="text-align:left;">'+checkinRequest.progress+'</td>');
  46.             html.push('<td style="text-align:left;">'+checkinRequest.provider+'</td>');
  47.             html.push('<td><a href="#" class="checkin_view btn btn-default btn-xs">&nbsp;查看&nbsp;</a></td>');
  48.             html.push('</tr>');
  49.         }
  50.         $("#checkinRequest_tbody").empty().html(html.join(''));
  51.     }
  52. }
  53.  
  54. function createTFoot(dataMap){
  55.         var reloadPagination = false;
  56.         if(dataMap!=null){
  57.             startNum = dataMap.startNum;
  58.             stopNum = dataMap.stopNum;
  59.             reloadPagination = totalCount==dataMap.totalCount?false:true
  60.             totalCount = dataMap.totalCount;
  61.             pageNo = dataMap.pageNo;
  62.             //pageSize = dataMap.pageSize;
  63.         }
  64.         var str = '显示 ' + startNum + '至' + stopNum + '项 ， 共' + totalCount +' 项。';
  65.         $("#checkinRequest_showlines").empty().html(str);
  66.         if(totalCount=='0'){
  67.             $('.tcdPageCode').empty();
  68.         }else if($('.tcdPageCode').html()=='' || reloadPagination){//
  69.             $('.tcdPageCode').extendPagination({
  70.                 pageId : pageNo,
  71.                 totalCount : totalCount,
  72.                 showPage : 5,
  73.                 limit : pageSize,
  74.                 callback : function(pageNo, limit, totalCount) {
  75.                     checkinRequestSearch(pageNo);
  76.                 }
  77.             });
  78.         }
  79. }
  80.  
  81. function checkinRequestSearch(pageNo){
  82.     var terminalid = $("#terminalid").val();
  83.     var flag = $("#flag").val();
  84.     $.ajax({
  85.         url : basePath + "page/checkinRequest_search.action",
  86.         type : "post",
  87.         data : {
  88.             "pageNo" : pageNo,
  89.             "terminalid" : terminalid,
  90.             "flag" : flag
  91.         },
  92.         dataType : "json",
  93.         success : function(dataMap){
  94.             createTBody(dataMap);
  95.             createTFoot(dataMap);
  96.         },
  97.         error : function(errorData){
  98.         }
  99.     });
  100. }

bootStrapPager分页插件

  1. /**
  2.  * Created by Hope on 2014/12/28.
  3.  */
  4. (function ($) {
  5.     $.fn.extendPagination = function (options) {
  6.         var defaults = {
  7.             pageId:'',
  8.             totalCount: '',
  9.             showPage: '10',
  10.             limit: '5',
  11.             callback: function () {
  12.                 return false;
  13.             }
  14.         };
  15.         $.extend(defaults, options || {});
  16. //        alert(defaults.pageId);
  17.         if (defaults.totalCount == '') {
  18.             //alert('总数不能为空!');
  19.             $(this).empty();
  20.             return false;
  21.         } else if (Number(defaults.totalCount) <= 0) {
  22.             //alert('总数要大于0!');
  23.             $(this).empty();
  24.             return false;
  25.         }
  26.         if (defaults.showPage == '') {
  27.             defaults.showPage = '10';
  28.         } else if (Number(defaults.showPage) <= 0)defaults.showPage = '10';
  29.         if (defaults.limit == '') {
  30.             defaults.limit = '5';
  31.         } else if (Number(defaults.limit) <= 0)defaults.limit = '5';
  32.         var totalCount = Number(defaults.totalCount), showPage = Number(defaults.showPage),
  33.             limit = Number(defaults.limit), totalPage = Math.ceil(totalCount / limit);
  34.         if (totalPage > 0) {
  35.             var html = [];
  36.             html.push(' <ul class="pagination">');
  37.             html.push(' <li class="previous"><a href="#">&laquo;</a></li>');
  38.             html.push('<li class="disabled hidden"><a href="#">...</a></li>');
  39.             if (totalPage <= showPage) {
  40.                 for (var i = 1; i <= totalPage; i++) {
  41.                     if (i == defaults.pageId) html.push(' <li class="active"><a href="#">' + i + '</a></li>');
  42.                     else html.push(' <li><a href="#">' + i + '</a></li>');
  43.                 }
  44.             } else {
  45.                 for (var j = 1; j <= showPage; j++) {
  46.                     if (j == defaults.pageId) html.push(' <li class="active"><a href="#">' + j + '</a></li>');
  47.                     else html.push(' <li><a href="#">' + j + '</a></li>');
  48.                 }
  49.             }
  50.             html.push('<li class="disabled hidden"><a href="#">...</a></li>');
  51.             html.push('<li class="next"><a href="#">&raquo;</a></li></ul>');
  52.             $(this).html(html.join(''));
  53.             if (totalPage > showPage) $(this).find('ul.pagination li.next').prev().removeClass('hidden');
  54.  
  55.             var pageObj = $(this).find('ul.pagination'), preObj = pageObj.find('li.previous'),
  56.                 currentObj = pageObj.find('li').not('.previous,.disabled,.next'),
  57.                 nextObj = pageObj.find('li.next');
  58.  
  59.             function loopPageElement(minPage, maxPage) {
  60.                 var tempObj = preObj.next();
  61.                 for (var i = minPage; i <= maxPage; i++) {
  62.                     if (minPage == 1 && (preObj.next().attr('class').indexOf('hidden')) < 0)
  63.                         preObj.next().addClass('hidden');
  64.                     else if (minPage > 1 && (preObj.next().attr('class').indexOf('hidden')) > 0)
  65.                         preObj.next().removeClass('hidden');
  66.                     if (maxPage == totalPage && (nextObj.prev().attr('class').indexOf('hidden')) < 0)
  67.                         nextObj.prev().addClass('hidden');
  68.                     else if (maxPage < totalPage && (nextObj.prev().attr('class').indexOf('hidden')) > 0)
  69.                         nextObj.prev().removeClass('hidden');
  70.                     var obj = tempObj.next().find('a');
  71.                     if (!isNaN(obj.html()))obj.html(i);
  72.                     tempObj = tempObj.next();
  73.                 }
  74.             }
  75.  
  76.             function callBack(curr) {
  77.                 defaults.callback(curr, defaults.limit, totalCount);
  78.             }
  79.  
  80.             currentObj.click(function (event) {
  81.                 event.preventDefault();
  82.                 var currPage = Number($(this).find('a').html()), activeObj = pageObj.find('li[class="active"]'),
  83.                     activePage = Number(activeObj.find('a').html());
  84.                 if (currPage == activePage) return false;
  85.                 if (totalPage > showPage) {
  86.                     var maxPage = currPage, minPage = 1;
  87.                     if (($(this).prev().attr('class'))
  88.                         && ($(this).prev().attr('class').indexOf('disabled')) >= 0) {
  89.                         minPage = currPage - 1;
  90.                         maxPage = minPage + showPage - 1;
  91.                         loopPageElement(minPage, maxPage);
  92.                     } else if (($(this).next().attr('class'))
  93.                         && ($(this).next().attr('class').indexOf('disabled')) >= 0) {
  94.                         if (totalPage - currPage >= 1) maxPage = currPage + 1;
  95.                         else  maxPage = totalPage;
  96.                         if (maxPage - showPage > 0) minPage = (maxPage - showPage) + 1;
  97.                         loopPageElement(minPage, maxPage)
  98.                     }
  99.                 }
  100.                 activeObj.removeClass('active');
  101.                 $.each(currentObj, function (index, thiz) {
  102.                     if ($(thiz).find('a').html() == currPage) {
  103.                         $(thiz).addClass('active');
  104.                         callBack(currPage);
  105.                     }
  106.                 });
  107.             });
  108.             preObj.click(function (event) {
  109.                 event.preventDefault();
  110.                 var activeObj = pageObj.find('li[class="active"]'), activePage = Number(activeObj.find('a').html());
  111.                 if (activePage <= 1) return false;
  112.                 if (totalPage > showPage) {
  113.                     var maxPage = activePage, minPage = 1;
  114.                     if ((activeObj.prev().prev().attr('class'))
  115.                         && (activeObj.prev().prev().attr('class').indexOf('disabled')) >= 0) {
  116.                         minPage = activePage - 1;
  117.                         if (minPage > 1) minPage = minPage - 1;
  118.                         maxPage = minPage + showPage - 1;
  119.                         loopPageElement(minPage, maxPage);
  120.                     }
  121.                 }
  122.                 $.each(currentObj, function (index, thiz) {
  123.                     if ($(thiz).find('a').html() == (activePage - 1)) {
  124.                         activeObj.removeClass('active');
  125.                         $(thiz).addClass('active');
  126.                         callBack(activePage - 1);
  127.                     }
  128.                 });
  129.             });
  130.             nextObj.click(function (event) {
  131.                 event.preventDefault();
  132.                 var activeObj = pageObj.find('li[class="active"]'), activePage = Number(activeObj.find('a').html());
  133.                 if (activePage >= totalPage) return false;
  134.                 if (totalPage > showPage) {
  135.                     var maxPage = activePage, minPage = 1;
  136. //                    if ((activeObj.next().next().attr('class'))
  137. //                        && (activeObj.next().next().attr('class').indexOf('disabled')) >= 0) {
  138. //                        maxPage = activePage + 2;
  139. //                        if (maxPage > totalPage) maxPage = totalPage;
  140. //                        minPage = maxPage - showPage + 1;
  141. //                        loopPageElement(minPage, maxPage);
  142. //                    }
  143.                     if ((activeObj.next().next().attr('class'))
  144.                             && (activeObj.next().next().attr('class').indexOf('disabled')) >= 0) {
  145.                         maxPage = activePage + 2;
  146.                         if (maxPage > totalPage) maxPage = totalPage;
  147.                         minPage = maxPage - showPage + 1;
  148.                         loopPageElement(minPage, maxPage);
  149.                     }
  150.                 }
  151.                 $.each(currentObj, function (index, thiz) {
  152.                     if ($(thiz).find('a').html() == (activePage + 1)) {
  153.                         activeObj.removeClass('active');
  154.                         $(thiz).addClass('active');
  155.                         callBack(activePage + 1);
  156.                     }
  157.                 });
  158.  
  159.             });
  160.         }
  161.     };
  162. })(jQuery);

action代码

  1. package com.cdv.apollo.action;
  2.  
  3. import java.util.HashMap;
  4. import java.util.List;
  5. import java.util.Map;
  6.  
  7. import javax.annotation.Resource;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpSession;
  10.  
  11. import org.apache.commons.lang.StringUtils;
  12. import org.apache.struts2.ServletActionContext;
  13.  
  14. import com.aliyun.oss.common.comm.ServiceClient.Request;
  15. import com.cdv.apollo.model.CheckinRequest;
  16. import com.cdv.apollo.service.CheckInRequestService;
  17. import com.cdv.apollo.util.PageParameter;
  18. import com.cdv.msf.sdk.UserClient;
  19. import com.opensymphony.xwork2.ActionSupport;
  20.  
  21. import net.sf.json.JSONObject;
  22.  
  23. public class CheckinRequestAction extends ActionSupport {
  24.  
  25.     /**
  26.      *
  27.      */
  28.     private static final long serialVersionUID = -7230950957476388246L;
  29.  
  30.     private Map<String, Object> dataMap = new HashMap<String, Object>();
  31.  
  32.     public Map<String, Object> getDataMap() {
  33.         return dataMap;
  34.     }
  35.  
  36.     @Resource
  37.     private CheckInRequestService checkInRequestService;
  38.  
  39.     public String index(){
  40.         HttpServletRequest request = ServletActionContext.getRequest();
  41.         PageParameter page = new PageParameter();
  42.         int totalCount = checkInRequestService.countTotalRecords();
  43.     //    int totalPage = totalCount%page.getPageSize()==0?totalCount/page.getPageSize():totalCount/page.getPageSize()+1;
  44.         int startNum = 0, stopNum = 0;
  45.         if((startNum+page.getPageSize())<=totalCount){
  46.             startNum = 1;
  47.             stopNum = startNum+page.getPageSize()-1;
  48.         }else if(totalCount>0){
  49.                 startNum = 1;
  50.                 stopNum = totalCount;
  51.         }
  52.         request.setAttribute("startNum", startNum);
  53.         request.setAttribute("stopNum", stopNum);
  54.         request.setAttribute("totalCount", totalCount);
  55.         request.setAttribute("pageNo", page.getPageNo());
  56.         request.setAttribute("pageSize", page.getPageSize());
  57.         return "index";
  58.     }
  59.  
  60.     public String list(){
  61.         dataMap.clear();
  62.         List<CheckinRequest> checkinRequestList = checkInRequestService.list(-1, null, null, null, null, null, 0, 10);
  63.         dataMap.put("checkinRequestList", checkinRequestList);
  64.         return SUCCESS;
  65.     }
  66.  
  67.     public String search(){
  68.         dataMap.clear();
  69.         PageParameter page = new PageParameter();
  70.         int s = 0, max = 10, pageNo = 1, flag=-1;
  71.         int startNum = 0, stopNum = 0;
  72.         HttpServletRequest request = ServletActionContext.getRequest();
  73.         String pageNoStr = (String) request.getParameter("pageNo");
  74.         String terminalid = (String) request.getParameter("terminalid");
  75.         String flagStr = (String) request.getParameter("flag");
  76.         if(StringUtils.isNotEmpty(flagStr)){
  77.             flag = Integer.parseInt(flagStr);
  78.         }
  79.         int totalCount = checkInRequestService.count2Terminal(terminalid, flag);
  80.         int totalPage = totalCount%page.getPageSize()==0?totalCount/page.getPageSize():totalCount/page.getPageSize()+1;
  81.         if(StringUtils.isNotEmpty(pageNoStr)){
  82.             pageNo = Integer.parseInt(pageNoStr);
  83.             pageNo = pageNo<=totalPage?pageNo:1;
  84.             s = (pageNo-1)*10;
  85.         }
  86.         List<CheckinRequest> checkinRequestList = checkInRequestService.list2Terminal(terminalid, flag, s, max);
  87.         if(totalCount>0){
  88.             startNum = (pageNo-1)*page.getPageSize() + 1;
  89.             stopNum = (startNum-1+page.getPageSize())<=totalCount?(startNum-1+page.getPageSize()):totalCount;
  90.         }
  91.         dataMap.put("startNum", startNum);
  92.         dataMap.put("stopNum", stopNum);
  93.         dataMap.put("totalCount", totalCount);
  94.         dataMap.put("pageNo", pageNo);
  95.         dataMap.put("checkinRequestList", checkinRequestList);
  96.         return SUCCESS;
  97.     }
  98.  
  99. }

struts配置

  1.     <package name="homepage" namespace="/" extends="json-default">
  2.  
  3.         <action name="checkinRequest_*" class="com.cdv.apollo.action.CheckinRequestAction"
  4.             method="{1}">
  5.             <result name="index">/page/checkinRequest.jsp</result>
  6.             <result name="success" type="json">
  7.                 <param name="root">dataMap</param>
  8.             </result>
  9.         </action>
  10.  
  11.     </package>

bootstrap 分页的更多相关文章

  1. bootstrap分页

    使用bootstrap分页插件,如下代码是html代码 <title>分页</title> <link href="page/bootstrap-3.3.5-d ...

  2. bootstrap 分页样式代码

    bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  3. Bootstrap 分页插件 ajax获取数据显示

    Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...

  4. bootstrap分页插件的使用

    项目中需要实现文章列表的分页显示,由于使用了bootstrap框架,所以我们选择bootstrap的分页实现方法.网上有一些这方面的介绍文章,并且也有相关的示例程序.这里结合我们的项目,介绍一下使用b ...

  5. Bootstrap分页插件ajax返回数据，工具类的编写

    使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...

  6. yii使用bootstrap分页样式

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

  7. bootstrap 分页表格插件

    找了两个table的插件,一个是bootstrap table ,另一个是bootstrap-paginator 这里只介绍 bootstrap table 插件 使用及简单案例 文档介绍:http: ...

  8. Bootstrap分页插件--Bootstrap Paginator

    开源中国有一篇介绍的很详细,链接:https://my.oschina.net/shunshun/blog/204587 使用这个插件和使用其他Bootstrap内置的插件一样,需要引入如下文件: & ...

  9. bootstrap分页插件--Bootstrap Paginator的使用&AJAX版备份(可单独使用)

    html部分: <ul class="pagination"></ul> <!--bootstrap3版本用ul包裹--> <div cl ...

随机推荐

  1. 使用Condition实现多线程之间调用（生产消费模式）

    一,object 类的wait(),notify()和notifyAll() Java 线程类也是一个object 类,它的实例都继承自java.lang.Thread 或其子类.wait(),not ...

  2. Oracle 10gR2 & 10.2.0.5 的百度网盘下载地址 :)

    如题: https://pan.baidu.com/s/1eSI770m

  3. [原]OpenGL基础教程（二）多边形绘制

    上篇介绍了最基本的三角形绘制,本篇介绍如何使用索引的方式绘制多边行. 为什么要使用索引方式,总体来说提高性能.如何提高:使用顶点数组的好处是避免大量的函数调用.即避免每画一个顶点就调用1次glVert ...

  4. MMS关键指标意义&各数值区间意义

    MMS关键指标意义&各数值区间意义 What's MMS MongoDB Management Service (MMS) is a suite of services for managin ...

  5. 即将放出ITSEC第一期所有培训视频

    课程大概被分为三个章节 客户端安全培训 安全工具培训 服务端安全培训   部分PPT                         详细课程表 FireBug代码调试工具使用:工具介绍 FireBu ...

  6. sqlserver 字符串最后一次的位置，截取字符串

    --reverse:字符串倒排 SUBSTRING(字段,1,len(字段)- CHARINDEX('-',REVERSE(字段)))

  7. [PaPaPa][需求说明书][V2.0]

    前   言 大家好,我是“今晚打老虎”. 什么? 你问我为什么这次亮字号了? 还不是因为哥太出名了,即使我不亮你们也知道是我写的了. 自从发布了V1.0版本之后.群里又进来好多人.30K大大分发的任务 ...

  8. 注解Annotation 详解（转）

    要深入学习注解,我们就必须能定义自己的注解,并使用注解,在定义自己的注解之前,我们就必须要了解Java为我们提供的元注解和相关定义注解的语法. 元注解: 元注解的作用就是负责注解其他注解.Java5. ...

  9. jetty服务器的安装和部署、新增到开机启动服务

    Jetty的首页地址是http://www.mortbay.org/jetty/,点击Downloads进入下载介绍页面,由于Jetty7之后,托管服务有Eclipse接替,所以jetty6.1之前( ...

  10. 由于无法创建应用程序域，因此未能执行请求。错误: 0x80070002 系统找不到指定的文件

    前两天安装了一堆补丁后突然发现,原本正常使用了一年的应用系统打不开了,到事件日志中发现有.net framewok 2.0的补丁安装失败的日志,于从从重装补丁开始.到重新注册.net框架,再到所有.n ...