bootstrap-paginator分頁插件的簡單使用實例

時間 2019-11-09

標籤 bootstrap paginator 分頁插件簡單使用實例欄目 Bootstarp 简体版

原文原文鏈接

Documentphp

21:36:40css

簡述：bootstrap-paginator是一款基於bootstrap的jQuery分頁插件。

githup項目地址：https://github.com/lyonlai/bootstrap-paginator

兼容： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+

參數介紹：

標記爲紅色的爲必選參數html

參數名稱	數據類型	默認值	描述
bootstrapMajorVersion	number	2	搭配使用的bootstrap版本，若是bootstrap的版本是2.X的分頁必須使用div元素。3.X分頁的必須使用ul>li元素。注意與bootstrap版本對應上。
size	string	"normal"	設置控件的顯示大小，容許的值：mini，small，normal，large。
alignment	string	"left"	設置控件的對齊方式，容許的值：left，center，right。
itemContainerClass	function	無	該參數接收一個函數，返回一個字符串，該字符串是咱們定義的一個class類樣式。當控件內的每一個操做按鈕被渲染（render）時，都會調用該函數，同時把有關該按鈕的信息做爲參數傳入。jquery 參數：type，page，current。git type：該控件的操做按鈕的類型。（first、prev、page、next、last）github page：該按鈕爲第幾頁。ajax current：整個控件的當前頁是第幾頁。json
currentPage	number	1	設置當前頁。bootstrap
numberOfPages	number	5	設置控件顯示的頁碼數。即：類型爲「page」的操做按鈕數量。數組
totalPages	number	1	設置總頁數。
pageUrl	function	無	實際上，控件內的每一個操做按鈕都會被渲染成超連接，這樣就能夠爲每一個操做按鈕動態設置連接地址。該參數是個函數，接受的參數爲：type，page，current。如："http://baidu.com/list/page/"+page
shouldShowPage	boolean/function	true	該參數用於設置某個操做按鈕是否顯示，但是個布爾值也但是個函數。當爲true時，顯示。當爲false時，不顯示。若是該參數是個函數，須要返回個布爾值，經過這個返回值判斷是否顯示。函數有3個參數: type, page, current。使用函數的好處是，能夠對每一個操做按鈕進行顯示控制。
itemTexts	function	無	控制每一個操做按鈕的顯示文字。爲函數傳遞3個參數: type, page, current。經過這個參數咱們就能夠將操做按鈕上的英文改成中文。如first-->首頁，last-->尾頁。
tooltipTitles	function	無	設置操做按鈕的title屬性。傳遞3個參數: type, page, current。
useBootstrapTooltip	boolean	false	設置是否使用Bootstrap內置的tooltip。 true是使用，false是不使用,默認是不使用。注意：若是使用，則須要引入bootstrap-tooltip.js插件。
bootstrapTooltipOptions	object	無	Default:{ 　　animation: true, 　　html: true, 　　placement: 'top', 　　selector: false, 　　title: "", 　　container: false } 該參數爲js對象，當參數useBootstrapTooltip（樓上那個）爲true時，會將該對象傳給bootstrap-tooltip插件。
onPageClicked	function	無	爲操做按鈕綁定click事件。參數：*event, originalEvent, type,page。*
onPageChanged	function	無	爲操做按鈕綁定頁碼改變事件。參數：*event, oldPage, newPage。*

公共命令：

如：

$('#example').bootstrapPaginator("show",3) 調用show命令

$('#example').bootstrapPaginator("getPages") 調用getPages命令

命令名	參數	返回值	描述
show	page	無	show命令用於直接跳轉到特定的page，與直接點擊操做按鈕的效果是同樣的。使用方法：$('#example').bootstrapPaginator("show",3) 直接跳轉到第3頁， $('#example').bootstrapPaginator("show",100)直接跳轉到100頁。
showFirst	無	無	showFirst 命令用於直接跳轉到首頁，與點擊first按鈕相同。使用方法：$('#example').bootstrapPaginator("showFirst")
showLast	無	無	showFirst 命令用於直接跳轉到最後一頁，與點擊last按鈕相同。使用方法：$('#example').bootstrapPaginator("showLast")
showPrevious	無	無	showPrevious 命令用於直接跳轉到上一頁。使用方法：$('#example').bootstrapPaginator("showPrevious")
showNext	無	無	showNext命令用於直接跳轉到下一頁。使用方法：$('#example').bootstrapPaginator("showNext")
getPages	無	object	getPages命令用於返回當前控件中顯示的頁碼，以數組形式返回。使用方法：var arra = $('#example').bootstrapPaginator("getPages")
setOptions	object	無	setOptions 命令用於從新設置參數。使用方法：$('#example').bootstrapPaginator("setOptions",newoptions)

事件：

Bootstrap Paginator 提供了倆個事件：page-clicked和page-changed。這倆個事件做爲參數使用，分別對應onPageClicked和onPageChanged。

事件名	回調函數	描述
page-clicked	function(event，originalEvent，type，page){}	參數event, originalEvent是倆個jquery事件對象，可參考jquery相關文檔
page-changeed	function(event, oldPage, newPage)	同上文

Demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
    <table class="table table-border table-hover">
        <thead>
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div class="page">
        <ul class="pagination"></ul>
    </div>
    <script type="text/template" id="tableTemp">
        <%for(let i = 0; i < item.length; i++){%>
            <tr>
                <td><%=(item[i].page * item[i].pageSize )+ i + 1%></td>
                <td><%=item[i].name%></td>
                <td><%=item[i].gender%></td>
                <td><%=item[i].age%></td>
            </tr>
        <%}%>
    </script>
</body>
</html>
<!--使用bootstrap插件必須使用引入jquery,由於bootstrap是基於jquery開發的-->
<script src="./lib/jquery-2.1.1.min.js"></script>
<!--bootstrap插件-->
<script src="./lib/bootstrap.js"></script>
<!--分頁插件-->
<script src="./lib/bootstrap-paginator.js"></script>
<!--模板插件-->
<script src="./lib/template-native.js"></script>
<script>
    let currentPage = 1;
    let pageSize = 3;
    function render() {
        $.ajax({
            url: "./setPage.php",
            data: {
              page: currentPage,
              pageSize: pageSize
            },
            dataType: "json",
            success: function (result) {
                // 將數據渲染到頁面
                $("tbody").html(template("tableTemp",{item:result}))
                // 調用分頁函數.參數:當前所在頁, 總頁數(用總條數 除以 每頁顯示多少條,在向上取整), ajax函數
                setPage(currentPage, Math.ceil(result[0].size/pageSize), render)
            }
        })
    }
    render()

    /**
     *
     * @param pageCurrent 當前所在頁
     * @param pageSum 總頁數
     * @param callback 調用ajax
     */
    function setPage(pageCurrent, pageSum, callback) {
        $(".pagination").bootstrapPaginator({
            //設置版本號
            bootstrapMajorVersion: 3,
            // 顯示第幾頁
            currentPage: pageCurrent,
            // 總頁數
            totalPages: pageSum,
            //當單擊操做按鈕的時候, 執行該函數, 調用ajax渲染頁面
            onPageClicked: function (event,originalEvent,type,page) {
                // 把當前點擊的頁碼賦值給currentPage, 調用ajax,渲染頁面
                currentPage = page
                callback && callback()
            }
        })
    }
</script>