Bootstrap分页插件之Bootstrap Paginator实例详解

简介

Bootstrap Paginator是Bootstrap的分页插件之一，它通过简单的配置，可以让你快速地在页面上创建一个标准格式的分页控件。本文将对Bootstrap Paginator插件进行详细介绍，并提供两个实例说明。

使用方式

1. 引入jQuery和Bootstrap框架，以及Bootstrap Paginator插件的CSS和JS文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-paginator/1.4.1/css/bootstrap-paginator.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-paginator/1.4.1/js/bootstrap-paginator.min.js"></script>

1. 设置分页参数，包括数据总数、当前页数、每页展示数量和需要显示的分页数量等。

var totalCount = 100, // 数据总数
    pageSize = 10, // 每页展示数量
    totalPages = Math.ceil(totalCount/pageSize), // 总页数
    currentPage = 1, // 当前页数
    numberOfPages = 5; // 显示分页数量

1. 初始化分页控件。

$('#pagination').bootstrapPaginator({
    totalPages: totalPages, // 总页数
    currentPage: currentPage, // 当前页数
    numberOfPages: numberOfPages, // 显示分页数量
    onPageChanged: function (e, oldPage, newPage) { // 页面更改回调函数
        currentPage = newPage;
        loadList();
    }
});

1. 在页面上定义分页控件的结构。

<div id="pagination" class="pagination"></div>

示例一

示例一是一个基本的分页控件，包括7页数据，每页5条，最多展示5个分页按钮。

var totalCount = 35, // 数据总数
    pageSize = 5, // 每页展示数量
    totalPages = Math.ceil(totalCount/pageSize), // 总页数
    currentPage = 1, // 当前页数
    numberOfPages = 5; // 显示分页数量

$('#pagination').bootstrapPaginator({
    totalPages: totalPages, // 总页数
    currentPage: currentPage, // 当前页数
    numberOfPages: numberOfPages, // 显示分页数量
    onPageChanged: function (e, oldPage, newPage) { // 页面更改回调函数
        currentPage = newPage;
        loadList();
    }
});

示例二

示例二是一个包含跳转到指定页面的分页控件，包括10页数据，每页10条，最多展示5个分页按钮。

var totalCount = 100, // 数据总数
    pageSize = 10, // 每页展示数量
    totalPages = Math.ceil(totalCount/pageSize), // 总页数
    currentPage = 1, // 当前页数
    numberOfPages = 5; // 显示分页数量

$('#pagination').bootstrapPaginator({
    totalPages: totalPages, // 总页数
    currentPage: currentPage, // 当前页数
    numberOfPages: numberOfPages, // 显示分页数量
    onPageChanged: function (e, oldPage, newPage) { // 页面更改回调函数
        currentPage = newPage;
        loadList();
    },
    shouldShowPage: function(type, page, current) { // 是否要显示指定页
        if(type === 'first' || type === 'last') {
            return false;
        }
        return true;
    },
    itemTexts: function(type, page, current) { // 不同类型的按钮文本
        switch(type) {
            case 'first': return '首页';
            case 'prev': return '上一页';
            case 'next': return '下一页';
            case 'last': return '尾页';
            case 'page': return page;
        }
    },
    tooltipTitles: function(type, page, current) { // 不同类型按钮的title
        switch(type) {
            case 'first': return '跳转到首页';
            case 'prev': return '跳转到上一页';
            case 'next': return '跳转到下一页';
            case 'last': return '跳转到尾页';
            case 'page': return '跳转到第'+page+'页';
        }
    },
    useBootstrapTooltip: true, // 是否使用Bootstrap内置的Tooltip
    bootstrapTooltipOptions: { // Tooltip配置选项
        placement: 'bottom'
    },
    onPageClicked: function(e,originalEvent,type,page){ // 页面点击事件
        currentPage = page;
        loadList();
    }
});

结语

以上就是对Bootstrap Paginator插件的详细介绍和两个实例说明，希望对大家有所帮助。