分頁有兩種方式: 1. 前臺分頁:ajax一次請求獲取全部數據,適合少量數據(萬條數據以下); 註意:1. bootstrap3中分頁的HTML部分要求使用ul標簽;2. 前臺寫分頁演算法。 2. 後臺分頁:發送多次ajax,每次獲取指定頁數的數據(萬條數據以上)。 註意:1. bootstrap3中 ...
分頁有兩種方式:
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. 後臺寫分頁演算法。