bootstrap paginat 分页插件的使用详解

Q_Q 忙里偷闲

已于 2023-09-15 14:39:57 修改

阅读量4.8k

点赞数 5

分类专栏：前端知识（拧螺丝）文章标签： bootstrap paginat分页插件分页插件实现分页demo ajax实现分页

于 2019-02-17 10:13:02 首次发布

本文链接：https://blog.csdn.net/qq_36410795/article/details/87516455

版权

前端知识（拧螺丝）专栏收录该内容

1 篇文章 0 订阅

订阅专栏

bootstrap paginat 分页插件的使用详解

【目录】

1. 实现效果

在这里插入图片描述

2. 插件下载

下载地址：http://www.jq22.com/jquery-info17338

3. 插件demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分页测试</title>
<link href="resources/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="resources/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="resources/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="resources/js/bootstrap-paginator.js" type="text/javascript"></script>
<style>
        #page li{
            cursor:pointer;
        }
    </style>
</head>
<body>
<div class="container">
<div style="margin-top: 100px;">
<ul id="page"></ul>
</div>
</div>
<script type="text/javascript">
        $(function () {
           var currentPage = 1;
           var totalPages = 25;
           $("#page").bootstrapPaginator({
               bootstrapMajorVersion:3, //对应的bootstrap版本
               currentPage: currentPage, //当前页数
               numberOfPages: 10, //每次显示页数
               totalPages:totalPages, //总页数
               shouldShowPage:true,//是否显示该按钮
               useBootstrapTooltip:true,
               //点击事件
               onPageClicked: function (event, originalEvent, type, page) {
               		// 业务处理
               }
           });

        });
    </script>
</body>
</html>

4. 案例demo

4.1 接口文档

在这里插入图片描述

4.2 实现代码

JS 代码

$(function () {
    /* 1. 渲染用户信息列表
        1. 使用ajax请求用户信息的数据
        2. 创建表格模板去渲染页面
         */
    // page 表示当前页码数 默认为1 当点击分类按钮的时候 要变成点击的页码数
    var page = 1;
    // 页面刚加载的时候 调用公共函数查询数据
    queryUser();
    
    // 1. 封装的公共查询用户数据的函数
    function queryUser() {
        $.ajax({
            url: '/user/queryUser',
            data: {
                page: page,
                pageSize: 5
            },
            success: function (data) {
                // 2. 判断如果返回数据有错跳转到登录
                if (data.error) {
                    location = 'login.html';
                } else {
                    var html = template('userInfo', data);
                    $('.user-info tbody').html(html);
                    
                    // 3. 渲染完模板后 计算当前要分的页数 使用数据总条数 / 每页大小
                    var totalPages = Math.ceil(data.total / data.size);
                    // 4. 计算好了总页数之后才能调用初始化分页插件
                    $("#page").bootstrapPaginator({
                        bootstrapMajorVersion: 3, //对应的bootstrap版本
                        currentPage: page, //当前页数
                        numberOfPages: 5, //每次显示多少个分页按钮
                        totalPages: totalPages, //总页数
                        shouldShowPage: true, //是否显示分类按钮
                        useBootstrapTooltip: true, // 是否添加工具提示
                        // 点击任意的分页按钮的时候会触发事件
                        // 通过nowPage参数获取当前点击的分页的页数
                        onPageClicked: function (event, originalEvent, type, nowPage) {                        
                            // 把全局page修改了
                            page = nowPage;
                            // 重新调用查询
                            queryUser() 
                        }
                    });
                }
            }
        });
    }
})

模板引擎代码

<script id="userInfo" type="text/html">
    {{each data value index}}
        <tr>
            <th scope="row">{{value.id}}</th>
            <td>{{value.username}}</td>
            <td>{{value.mobile}}</td>
            <td>
                {{if value.isDelete == 1}}
                    已启用
                {{else}}
                    已禁用
                {{/if}}
            </td>
            <td>
                {{if value.isDelete == 1}}
                    <button type="button" class="btn btn-danger btn-option" data-id={{value.id}} data-is-delete={{value.isDelete}}>禁用</button>
                {{else}}
                    <button type="button" class="btn btn-success btn-option" data-id={{value.id}} data-is-delete={{value.isDelete}}>启用</button>
                {{/if}}
            </td>
        </tr>
    {{/each}}
</script>