bootstrap 分页-白红宇

bootstrap 分页

阅读量：6321 次

发布时间：2019-06-22

本文共 16009 字，大约阅读时间需要 53 分钟。

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+"/";    %>
     
     
     
     
     
     Apollo - 签入记录
     
     
     
     
     
     
     
     
     
     
     
          
        
           
           
              
        签入记录      
                           
                          
         
      
      
               
              
                
                   
           
            
             
              
              终端ID:  
               
             
 
              
              标志:  
               
             
 
              
              搜索 
             
 
              
            
 
           
 
            
            
                                             标题                 节目ID                 创建时间                 媒体类型                 标志                 进度                 供应商                 操作                
              
                            
                                            
                           
 
           
 
            
             
              
               
              
 
             
 
             
 
             
 
            
 
           
 
          
        
         
      
        
      
                   
       
    
          
      
  
       
     
      
     
       
          
             
                
                 
         新建签入记录
      
        
       
                          
                     
           
            
             
              
              名称:  
               
             
 
 
           
 
            
             
              
              描述:  
               
             
 
 
           
 
          
          
         
        
        
           
                
                 
                     
        
                 
       
    
      
  
     
          
       
          
             
                
                 
         编辑签入记录
      
        
       
                          
                     
           
            
             
              
              名称:  
               
             
 
 
           
 
            
             
              
              描述:

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
     
      ');            html.push(''+checkinRequest.title+'');            html.push(''+checkinRequest.assetguid+'');            html.push(''+checkinRequest.createtime+'');            html.push(''+checkinRequest.mediatype+'');            html.push(''+checkinRequest.flag+'');            html.push(''+checkinRequest.progress+'');            html.push(''+checkinRequest.provider+'');            html.push('
       查看 ');            html.push('');        }        $("#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(' 
     
      ');            html.push(' 
      «
');            html.push('
      ...
');            if (totalPage <= showPage) {                for (var i = 1; i <= totalPage; i++) {                    if (i == defaults.pageId) html.push(' 
      ' + i + '
');                    else html.push(' 
      ' + i + '
');                }            } else {                for (var j = 1; j <= showPage; j++) {                    if (j == defaults.pageId) html.push(' 
      ' + j + '
');                    else html.push(' 
      ' + j + '
');                }            }            html.push('
      ...
');            html.push('
      »
     
');            $(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
     
       dataMap = new HashMap
      
       ();    public Map
       
         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
        
          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
         
           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配置


             
                  
       
        /page/checkinRequest.jsp
                   
                       
        dataMap

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

你可能感兴趣的文章

kubernetes介绍

查看>>

python的import与from...import的不同之处

查看>>

据说 wiz 2.0 版有了可以发布到博客的功能

查看>>

android-----带你一步一步优化ListView(一)

ASP.NET连接SQL、Access、Excel数据库（三）——工厂模式

查看>>

php使用ffmpeg向视频中添加文字字幕

查看>>

bootstrap之 Badge 角标

查看>>

java 通过Apache poi导出excel代码demo实例

查看>>

Windows程序设计_21_Win32文件操作

查看>>

常用DOS命令

查看>>

SuperSocket 中内置的 Flash/Silverlight 策略服务器

《算法导论》读书笔记之第15章动态规划—矩阵链乘法

查看>>

自学ng2 -侦探指令spy

查看>>

shell 获得调用的python脚本的print值和错误log

查看>>

全国Ⅱ卷文科数学2013-2018年高考分析及2019年高考预测

查看>>

签入记录 新建

签入记录