bs_pagination

彪悍一只猫、

于 2022-11-17 11:19:15 发布

阅读量140

点赞数

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/weixin_52561455/article/details/127899594

版权

官方文档链接。

1,引入开发包：
2,创建容器:<div>
3,当容器加载完成之后，对容器调用工具函数:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">

    <!--  JQUERY -->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>

    <!--  BOOTSTRAP -->
    <link rel="stylesheet" type="text/css" href="jquery/bootstrap_3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

    <!--  PAGINATION plugin -->
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
    <script type="text/javascript">
        //函数：如果一段用来完成特定功能的代码到处出现，可以封装成函数。
   函数的参数：在编写函数的过程中，如果有一个或者多个数据无法确定，可以把这些数据定义成函数的参数(形参)，将来由函数的调用者来传递参数的具体的值(实参)
        function queryActivityByConditionForPage(pageNo,pageSize){
            //收集参数
            let name=$.trim($("#query-name").val());
            let owner=$.trim($("#query-owner").val());
            let startDate=$.trim($("#query-startDate").val());
            let endDate=$.trim($("#query-endDate").val());
            // let pageNo=1;
            // let pageSize=10;
            $.ajax({
                url:'workbench/activity/queryActivityByConditionForPage.do',
                data:{
                    name:name,
                    owner:owner,
                    startDate:startDate,
                    endDate:endDate,
                    pageNo:pageNo,
                    pageSize:pageSize
                },
                type: 'post',
                dataType: 'json',
                success:function (data){
                    //显示总条数
                    // $("#totalRowsB").text(data.totalRows);
                    //显示市场活动列表
                    //拼接HTML字符串
                    let htmlStr="";
                    $.each(data.activityList,function (index,obj){
                        htmlStr+="<tr class=\"active\">";
                        htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
                        htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/activity/queryActivityDetail.do?id="+obj.id+"'\">"+obj.name+"</a></td>";
                        htmlStr+="<td>"+obj.owner+"</td>";
                        htmlStr+="<td>"+obj.startDate+"</td>";
                        htmlStr+="<td>"+obj.endDate+"</td>";
                        htmlStr+="</tr>";
                    });
                    $("#tBody").html(htmlStr);
                    //显示列表之后，取消全选按钮的选定状态
                    $("#checkedAll").prop("checked",false);

                    //计算总页数
                    let totalPages=1;
                    if (data.totalRows%pageSize==0){
                        totalPages=data.totalRows/pageSize;
                    } else{
                        totalPages=parseInt(data.totalRows/pageSize)+1;
                    }

                    $("#demo_pag1").bs_pagination({
                        currentPage: pageNo,//当前页号，pageNo

                        rowsPerPage: pageSize,//每页显示的条数pageSize
                        totalRows: data.totalRows,//总条数
                        totalPages: totalPages,//总页数,必填
                                                

                        visiblePageLinks: 5,//页面链接的个数
                        showGoToPage: true,
                        showRowsPerPage: true,
                        showRowsInfo: true,
                        onChangePage: function(event,pageObj) { // returns page_num and rows_per_page after a link has clicked
                            queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
                        }
                    });

                }
            });
        }
    </script>
</head>
<body>
<!--  Just create a div and give it an ID -->

<div id="demo_pag1"></div>
</body>
</html>
---------------------------------------
//在js中可以通过通过选择器,选择当前的分页容器(div),通过bs_pagination方法可以当前对象的参数,两个形参,第一个为固定值,第二为对象中的属性名,从而得到属性的值()
$("#demo_pag1").bs_pagination("getOption","rowsPerPage")
//显示第一页数据,保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'))
//保持页号和每页显示条数不变
queryActivityByConditionForPage($("#demo_pag1").bs_pagination('getOption', 'currentPage'),$("#demo_pag1").bs_pagination('getOption', 'rowsPerPage'))
//显示第一页。默认每页显示10条数据
queryActivityByConditionForPage(1,10)