Bootstrap table两种分页示例

Bootstrap Table 是基于Bootstrap的一个开源的支持响应式的好用的数据表格插件。

Bootstrap Table有默认的分页功能，用起来也非常方便。但是，有时候默认的分页还不够满足我们的需求，我们需要自定义一些分页功能。下面我们将介绍Bootstrap Table两种分页示例。

示例1：自定义分页

首先，我们需要将Bootstrap Table引入到我们的网站中。可以通过以下代码来引入：

<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

接下来，我们需要自定义分页功能。可以通过以下代码来实现：

function setPage(number, size) {
    $('#table').bootstrapTable('selectPage', number); 
} 

function customPagination(total, pageSize, pageNumber) {  
    var html = [];  
    html.push('<ul class="pagination">');  
    var totalPages = Math.ceil(total / pageSize);  
    var middle = Math.floor(totalPages / 2);  
    var currentPage = pageNumber > totalPages ? totalPages : pageNumber;  
    var firstPage = currentPage == 1 ? true : false;  
    var lastPage = currentPage == totalPages ? true : false;  
    var startPage, endPage;  

    if (totalPages > 5) {  
        if (currentPage <= middle) {  
            startPage = 1;  
            endPage = 5;  
        } else if (currentPage + 2 >= totalPages) {  
            startPage = totalPages - 4;  
            endPage = totalPages;  
        } else {  
            startPage = currentPage - 2;  
            endPage = currentPage + 2;  
        }  
    } else {  
        startPage = 1;  
        endPage = totalPages;  
    }  

    if (firstPage) {  
        html.push('<li class="disabled"><a href="javascript:void(0);">上一页</a></li>');  
    } else {  
        html.push('<li><a href="javascript:void(0);" onclick="setPage(' + (currentPage - 1) + ',' + pageSize + ');">上一页</a></li>');  
    }  

    for (var i = startPage; i <= endPage; i++) {  
        if (currentPage == i) {  
            html.push('<li class="active"><a href="javascript:void(0);">' + i + '</a></li>');  
        } else {  
            html.push('<li><a href="javascript:void(0);" onclick="setPage(' + i + ',' + pageSize + ');">' + i + '</a></li>');  
        }  
    }  

    if (lastPage) {  
        html.push('<li class="disabled"><a href="javascript:void(0);">下一页</a></li>');  
    } else {  
        html.push('<li><a href="javascript:void(0);" onclick="setPage(' + (currentPage + 1) + ',' + pageSize + ');">下一页</a></li>');  
    }  

    html.push('</ul>');  
    return html.join('');  
}  

$(function() {
    $('#table').bootstrapTable({
        pagination: true,
        pageSize: 10,
        pageList: [10, 20, 50, 100],
        paginationPreText: "上一页",
        paginationNextText: "下一页",
        paginationFirstText: "第一页",
        paginationLastText: "最后一页",
        paginationLoop: false,
        paginationShowPageGo: true,
        paginationPrePageText: "<",
        paginationNextPageText: ">",
        paginationDetailHAlign: "right",
        paginationHAlign: "left",
        paginationVAlign: "bottom",
        paginationSuccessivelySize: 2,
        paginationPagesBySide: 1,
        paginationUseIntermediate: true,
        onPageChange: function(pageNumber, pageSize) {
            alert("onPageChange: " + pageNumber + "," + pageSize);
        },
        onPagePre: function(pageNumber, pageSize) {
            alert("onPagePre: " + pageNumber + "," + pageSize);
            return true;
        },
        onPageNext: function(pageNumber, pageSize) {
            alert("onPageNext: " + pageNumber + "," + pageSize);
            return true;
        },
        onPageFirst: function(pageNumber, pageSize) {
            alert("onPageFirst: " + pageNumber + "," + pageSize);
            return true;
        },
        onPageLast: function(pageNumber, pageSize) {
            alert("onPageLast: " + pageNumber + "," + pageSize);
            return true;
        },
        onPageGo: function(pageNumber, pageSize) {
            alert("onPageGo: " + pageNumber + "," + pageSize);
        },
        onPageRowsPerPage: function(pageNumber, pageSize) {
            alert("onPageRowsPerPage: " + pageNumber + "," + pageSize);
        },
        onPageTotalRows: function(pageNumber, pageSize) {
            alert("onPageTotalRows: " + pageNumber + "," + pageSize);
        },
        onPageCached: function(pageNumber, pageSize) {
            alert("onPageCached: " + pageNumber + "," + pageSize);
        },
        paginationPrePage: function() {
            alert("paginationPrePage");
        },
        paginationNextPage: function() {
            alert("paginationNextPage");
        },
        paginationSwitchDown: function() {
            alert("paginationSwitchDown");
        },
        paginationSwitchUp: function() {
            alert("paginationSwitchUp");
        },
        paginationVisible: false,
        paginationInfo: true,
        paginationItem: true,
        paginationInfoFragment: "共{totalRows}条记录，当前显示第{startRow}到第{endRow}条",
        paginationNiceText: false,
        paginationPrependPage: true,
        paginationBold: false,
        onPageChangeLive: function(tableData) {
            console.log("onPageChangeLive: " + tableData);
        },
        customPagination: customPagination
    });
});

示例2：使用自带的ajax分页

要使用自带的ajax分页，需要将data-url改为指向我们的数据源，并且将pageNumber和pageSize参数设置为true。示例代码如下：

$(function () {
    $('#table').bootstrapTable({
        url: 'testdata.json', // 数据源
        pagination: true, // 启用分页
        sidePagination: 'server', // 设置分页模式，server端分页
        pageSize: 10, // 每页显示记录数
        pageList: [10, 20, 50, 100], // 每页显示记录数列表
        pageNumber: true, // 显示分页按钮
        queryParamsType: '', // 重写queryParam
        queryParams: function (params) {
            params.pageNumber = params.pageNumber || 1; // 分页参数
            params.pageSize = params.pageSize || 10; // 分页参数
            return params;
        }
    });
});

以上就是Bootstrap Table自定义分页和使用自带的ajax分页的示例代码和攻略，希望对你有所帮助。