您现在的位置是：首页 > 后端

当前栏目

jquery pagination 实现jsp页面分页效果

jQuery JSP 实现页面效果分页 Pagination

2023-09-27 14:26:05 时间

这里分享使用插件和不使用插件的方法，只有jsp和js代码不同，controller和service，dao，mapper的代码都一样（不使用插件有一点缺陷，就是页数太多的时候页面宽度显示问题）

1.引入jquery.pagination.js和pagination.css

2.1不使用插件的jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/common_taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <%@ include file="/WEB-INF/jsp/common/common_css.jsp"%>
    <style>
    .tree li {
        list-style-type: none;
        cursor:pointer;
    }
    table tbody tr:nth-child(odd){background:#F4F4F4;}
    table tbody td:nth-child(even){color:#C00;}
    </style>
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top" advert="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 广告管理</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <%@include file="/WEB-INF/jsp/common/top.jsp" %>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="tree">
                <jsp:include page="/WEB-INF/jsp/common/menu.jsp"></jsp:include>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
              </div>
              <div class="panel-body">
                <form class="form-inline" advert="form" style="float:left;">
                  <div class="form-group has-feedback">
                    <div class="input-group">
                      <div class="input-group-addon">查询条件</div>
                      <input id="queryText" class="form-control has-success" type="text" placeholder="请输入查询条件">
                    </div>
                  </div>
                  <button id="queryBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
                </form>
                <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                <button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='${CWF_PATH}/advert/toAdd.htm'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                <br>
                 <hr style="clear:both;">
                  <div class="table-responsive">
                    <table class="table  table-bordered">
                      <thead>
                        <tr >
                          <th width="30">#</th>
                          <th width="30"><input id="allCheckBox" type="checkbox"></th>
                          <th>广告描述</th>
                          <th>状态</th>
                          <th width="100">操作</th>
                        </tr>
                      </thead>
                      <tbody id="tbodyConcat">
                    
                      </tbody>
                      <tfoot>
                         <tr >
                             <td colspan="5" align="center">
                                <ul class="pagination">
                                    分页的数据显示在这里
                                </ul>
                             </td>
                         </tr>
        
                      </tfoot>
                    </table>
                  </div>
              </div>
            </div>
        </div>
      </div>
    </div>

    <%@ include file="/WEB-INF/jsp/common/common_js.jsp"%>
        <script type="text/javascript">
            $(function () {
                $(".list-group-item").click(function(){
                    if ( $(this).find("ul") ) {
                        $(this).toggleClass("tree-closed");
                        if ( $(this).hasClass("tree-closed") ) {
                            $("ul", this).hide("fast");
                        } else {
                            $("ul", this).show("fast");
                        }
                    }
                });
                queryPageList(1);
                showMenu();
            });
                        
            $("tbody .btn-success").click(function(){
                window.location.href = "assignadvert.html";
            });
            $("tbody .btn-primary").click(function(){
                window.location.href = "edit.html";
            });

            function pageChange(pageNo){                
                queryPageList(pageNo);              
            } 
            var loadingIndex = -1;
            //分页查询
            function queryPageList(pageNo){
                var queryText = $("#queryText").val();
                var jsonData = {"pageNo":pageNo,
                                "pageSize":10,
                                "queryText":queryText}               
                $.ajax({
                    type:"POST",
                    data:jsonData,
                    url:"${CWF_PATH}/advert/doIndex.do",
                    beforeSend : function(){
                        loadingIndex = layer.load(2,{time:10*1000});
                        return true;
                        
                    },success:function(data){
                        layer.close(loadingIndex);
                        if(data.success){
                            var page = data.page;
                            var pageData = data.page.pageList;
                            var html ="";
                            $.each(pageData,function (i,n){
                                
                                html += '<tr>';
                                html += '  <td>'+(i+1)+'</td>';
                                html += '  <td><input type="checkbox"  id="'+n.id+'" name="'+n.name+'"></td>';
                                html += '  <td>'+n.name +'</td>';
                                html += '  <td>'+n.status +'</td>';
                                html += '  <td>';
                                html += '      <button type="button" class="btn btn-success btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toAssignPermission.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-check"></i></button>';
                                html += '      <button type="button" class="btn btn-primary btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toUpdate.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-pencil"></i></button>';
                                html += '      <button type="button" class="btn btn-danger btn-xs" onclick="deleteUser('+n.id+',\''+n.name+'\')"><i class=" glyphicon glyphicon-remove"></i></button>';
                                html += '  </td>';
                                html += '</tr>';
                            });
                            $("#tbodyConcat").html(html);
                            //分页页码处理
                            var content ="";
                            if(page.pageNo == 1){
                                content += '<li class="disabled"><a href="#">上一页</a></li>';
                            }else{
                                content += '<li><a href="#" onclick="pageChange('+(page.pageNo-1)+')">上一页</a></li>';
                            }
                            for(var i = 1;i<=page.totalPage;i++){
                                content +='<li><a href="#" onclick="pageChange('+i+')">'+i+'</a></li>';
                                
                            }
                            
                            if(page.pageNo == page.totalPage){
                                content += '<li class="disabled"><a href="#">下一页</a></li>';
                            }else{
                                content += '<li><a href="#" onclick="pageChange(('+(page.pageNo+1)+'))">下一页</a></li>';
                            }
                            
                            $(".pagination").html(content);

                        }else{
                            layer.msg(data.message, {time:1000, icon:6, shift:6});
                        }
                    },error:function(){
                        layer.msg("加载数据失败！", {time:1000, icon:6, shift:6});
                    }                    
                });
            }
            $("#queryBtn").click(function (){
                queryPageList(1)
            });
            
            function deleteUser(id,name){
                layer.confirm("确认要删除"+name+"吗",{icon:3,title:"提示"},function(confirmIndex){ 
                    layer.close(confirmIndex);
                    $.ajax({
                        type:"POST",
                        data:{"id":id},
                        url:"${CWF_PATH}/advert/delete.do",
                        beforeSend:function(){
                            return true;
                        },success:function(data){
                            if(data.success){
                                window.location.href="${CWF_PATH}/advert/index.htm";
                            }else{
                                layer.msg(data.message, {time:1000, icon:6, shift:6});
                            }
                        },errot:function(){
                            layer.msg("删除数据失败！", {time:1000, icon:6, shift:6});
                        }
                    });
                    },function(confirmIndex){
                        layer.close(confirmIndex);
                    }                          
                );                
            }
            $("#allCheckBox").click(function(){
                var checkBoxStatus = this.checked;
                $("#tbodyConcat input[type='checkbox']").prop("checked",checkBoxStatus);                
    
            }); 

             $('#tbodyConcat').on('change',"input[type='checkbox']",function(e){                
                 var selectedCheckBox = $("#tbodyConcat input[type='checkbox']");
                 var isAllCehcked = true;
                $.each(selectedCheckBox,function(){
                    if(!this.checked){
                        $("#allCheckBox").prop("checked",false);
                        isAllCehcked = false;
                        return false;
                        }
                    });
                $("#allCheckBox").prop("checked",isAllCehcked);

            }); 

        </script>
  </body>
</html>

2.2使用插件的jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/common_taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <%@ include file="/WEB-INF/jsp/common/common_css.jsp"%>
    <style>
    .tree li {
        list-style-type: none;
        cursor:pointer;
    }
    table tbody tr:nth-child(odd){background:#F4F4F4;}
    table tbody td:nth-child(even){color:#C00;}
    </style>
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top" advert="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 广告管理</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <%@include file="/WEB-INF/jsp/common/top.jsp" %>
          </ul>
          <form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div>
      </div>
    </nav>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="tree">
                <jsp:include page="/WEB-INF/jsp/common/menu.jsp"></jsp:include>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
              </div>
              <div class="panel-body">
                <form class="form-inline" advert="form" style="float:left;">
                  <div class="form-group has-feedback">
                    <div class="input-group">
                      <div class="input-group-addon">查询条件</div>
                      <input id="queryText" class="form-control has-success" type="text" placeholder="请输入查询条件">
                    </div>
                  </div>
                  <button id="queryBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
                </form>
                <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                <button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='${CWF_PATH}/advert/toAdd.htm'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                <br>
                 <hr style="clear:both;">
                  <div class="table-responsive">
                    <table class="table  table-bordered">
                      <thead>
                        <tr >
                          <th width="30">#</th>
                          <th width="30"><input id="allCheckBox" type="checkbox"></th>
                          <th>广告描述</th>
                          <th>状态</th>
                          <th width="100">操作</th>
                        </tr>
                      </thead>
                      <tbody id="tbodyConcat">
                      </tbody>
                      <tfoot>
                         <tr >
                             <td colspan="5" align="center">
                                <!-- <ul class="pagination">    
                                </ul> -->
                                <div id="Pagination" class="pagination">分页数据显示到这里</div>
                             </td>
                         </tr>
        
                      </tfoot>
                    </table>
                  </div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <%@ include file="/WEB-INF/jsp/common/common_js.jsp"%>
        <script type="text/javascript">
            $(function () {
                $(".list-group-item").click(function(){
                    if ( $(this).find("ul") ) {
                        $(this).toggleClass("tree-closed");
                        if ( $(this).hasClass("tree-closed") ) {
                            $("ul", this).hide("fast");
                        } else {
                            $("ul", this).show("fast");
                        }
                    }
                });
                queryPageList(0);//插件0表示第一页
                showMenu();
            });            
            $("tbody .btn-success").click(function(){
                window.location.href = "assignadvert.html";
            });
            $("tbody .btn-primary").click(function(){
                window.location.href = "edit.html";
            });

            var loadingIndex = -1;
            function queryPageList(pageNo){
                var queryText = $("#queryText").val();
                var jsonData = {"pageNo":(pageNo+1),//插件0表示第一页，但是后台查询还是从1开始
                                "pageSize":10,
                                "queryText":queryText}               
                $.ajax({
                    type:"POST",
                    data:jsonData,
                    url:"${CWF_PATH}/advert/doIndex.do",
                    beforeSend : function(){
                        loadingIndex = layer.load(2,{time:10*1000});
                        return true;
                        
                    },success:function(data){
                        layer.close(loadingIndex);
                        if(data.success){
                            var page = data.page;
                            var pageData = data.page.pageList;
                            var html ="";
                            $.each(pageData,function (i,n){
                                
                                html += '<tr>';
                                html += '  <td>'+(i+1)+'</td>';
                                html += '  <td><input type="checkbox"  id="'+n.id+'" name="'+n.name+'"></td>';
                                html += '  <td>'+n.name +'</td>';
                                html += '  <td>'+n.status +'</td>';
                                html += '  <td>';
                                html += '      <button type="button" class="btn btn-success btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toAssignPermission.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-check"></i></button>';
                                html += '      <button type="button" class="btn btn-primary btn-xs" onclick="window.location.href=\'${CWF_PATH}/advert/toUpdate.htm?id='+n.id+'\'"><i class=" glyphicon glyphicon-pencil"></i></button>';
                                html += '      <button type="button" class="btn btn-danger btn-xs" onclick="deleteUser('+n.id+',\''+n.name+'\')"><i class=" glyphicon glyphicon-remove"></i></button>';
                                html += '  </td>';
                                html += '</tr>';
                            });
                            $("#tbodyConcat").html(html);                            
                            // 创建分页，page.totalSize表示分页数据的总条数（比如返回97条数据，10条一页，按每页10条数据表示，一共有10页），totalsize就是97
                            $("#Pagination").pagination(page.totalSize, {
                                num_edge_entries: 1, //边缘页数
                                num_display_entries: 4, //主体页数
                                callback: queryPageList,
                                items_per_page:10, //每页显示1项
                                current_page:(page.pageNo-1),
                                prev_text:"上一页",
                                next_text:"下一页"
                            });
                            /* var content ="";
                            if(page.pageNo == 1){
                                content += '<li class="disabled"><a href="#">上一页</a></li>';
                            }else{
                                content += '<li><a href="#" onclick="pageChange('+(page.pageNo-1)+')">上一页</a></li>';
                            }
                            for(var i = 1;i<=page.totalPage;i++){
                                content +='<li><a href="#" onclick="pageChange('+i+')">'+i+'</a></li>';
                                
                            }
                            
                            if(page.pageNo == page.totalPage){
                                content += '<li class="disabled"><a href="#">下一页</a></li>';
                            }else{
                                content += '<li><a href="#" onclick="pageChange(('+(page.pageNo+1)+'))">下一页</a></li>';
                            }
                            
                            $(".pagination").html(content); */

                        }else{
                            layer.msg(data.message, {time:1000, icon:6, shift:6});
                        }
                    },error:function(){
                        layer.msg("加载数据失败！", {time:1000, icon:6, shift:6});
                    }                    
                });
            }
            $("#queryBtn").click(function (){
                queryPageList(0)
            });
            
            function deleteUser(id,name){
                layer.confirm("确认要删除"+name+"吗",{icon:3,title:"提示"},function(confirmIndex){ 
                    layer.close(confirmIndex);
                    $.ajax({
                        type:"POST",
                        data:{"id":id},
                        url:"${CWF_PATH}/advert/delete.do",
                        beforeSend:function(){
                            return true;
                        },success:function(data){
                            if(data.success){
                                window.location.href="${CWF_PATH}/advert/index.htm";
                            }else{
                                layer.msg(data.message, {time:1000, icon:6, shift:6});
                            }
                        },errot:function(){
                            layer.msg("删除数据失败！", {time:1000, icon:6, shift:6});
                        }
                    });
                    },function(confirmIndex){
                        layer.close(confirmIndex);
                    }                          
                );                
            }
            $("#allCheckBox").click(function(){
                var checkBoxStatus = this.checked;
                $("#tbodyConcat input[type='checkbox']").prop("checked",checkBoxStatus);                
    
            }); 

             $('#tbodyConcat').on('change',"input[type='checkbox']",function(e){                
                 var selectedCheckBox = $("#tbodyConcat input[type='checkbox']");
                 var isAllCehcked = true;
                $.each(selectedCheckBox,function(){
                    if(!this.checked){
                        $("#allCheckBox").prop("checked",false);
                        isAllCehcked = false;
                        return false;
                        }
                    });
                $("#allCheckBox").prop("checked",isAllCehcked);

            }); 

        </script>
  </body>
</html>

3.Page类

package com.stuwork.crowdfunding.util;

import java.util.List;

public class Page {
    
    private Integer pageNo;//当前页数
    private Integer pageSize;//每页显示数
    private Integer totalPage;//总页数
    private Integer totalSize;//总记录数
    private List pageList;
    
    public Page(Integer pageNo,Integer pageSize){
        
        if(pageNo <=0){
            pageNo = 1;
        }else{
            this.pageNo = pageNo;
        }
        if(pageSize <= 0){
            pageSize = 10;
        }else{
            this.pageSize = pageSize;
        }
        
    }
    
    public Integer getPageNo() {
        return pageNo;
    }
    public void setPageNo(Integer pageNo) {
        this.pageNo = pageNo;
    }
    public Integer getPageSize() {
        return pageSize;
    }
    public void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }
    public Integer getTotalPage() {
        return totalPage;
    }
    private void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }
    public Integer getTotalSize() {
        return totalSize;
    }
    public void setTotalSize(Integer totalSize) {
        this.totalSize = totalSize;
        this.totalPage = (totalSize%pageSize)==0?(totalSize/pageSize):(totalSize/pageSize+1);
    }
    public List getPageList() {
        return pageList;
    }
    public void setPageList(List pageList) {
        this.pageList = pageList;
    }
    
    //数据库查询开始索引
    public Integer getStartIndex(){
        return (this.pageNo - 1)*pageSize;
    }
    

}

4.controller的方法

        //分页同步请求（参数改为map接受，json封装）条件查询
        @ResponseBody
        @RequestMapping("/doIndex")
        public Object index(@RequestParam(value="pageNo",required=false,defaultValue="1") Integer pageNo,
                            @RequestParam(value="pageSize",required=false,defaultValue="10")Integer pageSize,
                            String queryText){
            AjaxResult result = new AjaxResult();
            
            try {
                Map<String,Object> map = new HashMap<String,Object>();
                map.put("pageNo", pageNo);
                map.put("pageSize", pageSize);
                if(StringUtil.isNotEmpty(queryText)){
                    if(queryText.equals("%")){
                        //斜线本身需要转译,regex中两个\\表示一个\ ; Java中也是两个\\表示一个\;所以,需要四个斜线
                        queryText = queryText.replaceAll("%", "\\\\%");
                    }
                    map.put("queryText", queryText);
                }        
                Page page = advertService.getPage(map);                
                result.setSuccess(true);
                result.setPage(page);
            } catch (Exception e) {
                result.setSuccess(false);
                result.setMessage("查询数据失败");
                e.printStackTrace();
            }
            return result;
        }

5.service方法

    public Page getPage(Map<String, Object> map) {

        //通过当前页，和每页显示的条数，取得mysql的查询索引startIndex 
        Page page = new Page((Integer) map.get("pageNo"), (Integer) map.get("pageSize"));
        Integer startIndex = page.getStartIndex();
        map.put("startIndex", startIndex);
        List<Advertisement> pageList = advertisementMapper.queryList(map);
        //取得分页的总记录数据
        Integer totalSize = advertisementMapper.queryCount(map);
        page.setPageList(pageList);
        page.setTotalSize(totalSize);
        return page;
    }

6.mapper方法

    <select id="queryList" parameterType="map" resultMap="BaseResultMap">
        SELECT
        id,
        name,
        iconpath,
        status,
        url,
        userid
        FROM t_advertisement
        <where>
            <if test="queryText != null">
                name like concat("%",#{queryText},"%")
            </if>
        </where>
        ORDER BY id DESC
        LIMIT #{startIndex}, #{pageSize}

    </select>

猜你喜欢

maven profile动态选择配置文件
入门 Kotlin 和 Java 混合开发
Elasticsearch Hot & Warm 架构与 Shard Filtering
数据库 SQL Server 到 MySQL 迁移方法总结
NOIP 2009 潜伏者
虚火已去：月收入超2亿元的虚商在创新中寻找新机遇
git删除本地的资源，如何恢复？
SMTP 554错误，记住是免费引起的
2013第44周日小结
在鹅厂工作1到11年的程序媛
leetcode 380. Insert Delete GetRandom O(1) O(1) 时间插入、删除和获取随机元素 (中等)
非甲烷总烃分析仪工作原理介绍
tesseract的编译安装
数据库简介之SQL语言（四）
web API help pages with Swagger / OpenAPI
【linux】：进程控制

相关主题

jQuery 方法

zl程序教程

当前栏目

jquery pagination 实现jsp页面分页效果

相关文章