bootstrap-paginator分頁插件的兩種使用方式


分頁有兩種方式:

1. 前台分頁:ajax一次請求獲取全部數據,適合少量數據(萬條數據以下);

$.ajax({
        type: "GET",
        url: "",//后台接口地址
        dataType: "json",
        success: function (msg) {
            var pages = Math.ceil(msg.data / 5);//data是數據總量  
            var element = $('#id');//對應ul的id 
            element.bootstrapPaginator({
                bootstrapMajorVersion: 3,//bootstrap版本
                currentPage: page,//當前頁面  
                numberOfPages: 5,//一頁顯示幾個按鈕(在ul里面生成5個li)  
                totalPages: pages //總頁數 
            });
        }
    });

  注意:1. bootstrap3中分頁的HTML部分要求使用ul標簽;2. 前台寫分頁算法。

2. 后台分頁:發送多次ajax,每次獲取指定頁數的數據(萬條數據以上)。

$('#id').bootstrapPaginator({
                bootstrapMajorVersion: 3,//bootstrap版本
                currentPage: 1,//當前頁碼
                totalPages: data.cn,//總頁數(后台傳過來的數據)
                numberOfPages: 5,//一頁顯示幾個按鈕
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first": return "首頁";
                        case "prev": return "上一頁";
                        case "next": return "下一頁";
                        case "last": return "末頁";
                        case "page": return page;
                    }
                },//改寫分頁按鈕字樣
                onPageClicked: function (event, originalEvent, type, page) {
                    $.ajax({
                        url: '../../interface/xw_zxdt_list.php',
                        type: 'post',
                        data: {page: page},
                        dataType: 'json',
                        success: function (data) {
                            tplData(data);//處理成功返回的數據
                        }
                    });
                }
            });

  注意:1. bootstrap3中分頁的HTML部分要求使用ul標簽;2. 后台寫分頁算法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM