bootstrap 分页

最新推荐文章于 2021-06-03 02:55:31 发布

weixin_33859504

最新推荐文章于 2021-06-03 02:55:31 发布

阅读量108

点赞数

文章标签： json javascript java ViewUI

原文链接：http://www.cnblogs.com/rocky-fang/p/5630773.html

版权

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:&nbsp;</b>
                                <input type="text" class="form-control mb-lg" id="terminalid" name="terminalid" value=''>
                            </div>
                <div class="form-group">
                                <b>标志:&nbsp;</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="width: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>名称:&nbsp;</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>描述:&nbsp;</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="width: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>名称:&nbsp;</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>描述:&nbsp;</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">&nbsp;查看&nbsp;</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="#">&laquo;</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="#">&raquo;</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>

转载于:https://www.cnblogs.com/rocky-fang/p/5630773.html