第二百零九節，jQuery EasyUI，Pagination(分頁)組件

jQuery EasyUI，Pagination(分頁)組件

 

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

 

本節課重點了解 EasyUI 中 Pagination(分頁)組件的使用方法，這個組件依賴於 LinkButton(按鈕)組件。

 

一．加載方式

class 加載方式

<div id="box" class="easyui-pagination"
     data-options="total:2000,pageSize:10"
     style="background:#efefef;border:1px solid #ccc;">
</div>

JS 加載調用

pagination()將元素執行分頁方法

$('#box').pagination({
　　total : 2000,
　　pageSize : 10,
});

實現一個 panel (面板)結合 pagination(分頁)分頁例子，需要一個 PHP 分頁文件

<div id="content" class="easyui-panel" style="height:200px"
     data-options="href:'user.php?page=1'"></div>
<div class="easyui-pagination" style="border:1px solid #ccc;"
     data-options="
    total : 5,
    pageSize : 1,
    pageNumber : 1,
    pageList : [1],
    onSelectPage : function (pageNumber, pageSize) {
        $('#content').panel('refresh', 'user.php?page='+pageNumber);
    }
"></div>

 

二．屬性列表

 

 

total number 總記錄數，在分頁控件創建時初始的值。默認值1。也就是數據庫總條數

$(function () {
    $('#box').pagination({
        total:50,    //總記錄數,也就是數據庫總條數
        pageSize:5      //每頁顯示條數,就是每頁顯示多少條
    });
});

 

pageSize number 每頁顯示條數。默認值10。就是每頁顯示多少條

$(function () {
    $('#box').pagination({
        total:50,    //總記錄數,也就是數據庫總條數
        pageSize:5      //每頁顯示條數,就是每頁顯示多少條
    });
});

 

pageNumber number 在分頁控件創建的時候顯示的頁數。默認值為1。

$(function () {
    $('#box').pagination({
        total:50,    //總記錄數,也就是數據庫總條數
        pageSize:5,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber:1    //創建的時候顯示的頁數。默認值為1。
    });
});

 

pageList array用戶可以改變頁面大小。pageList 屬性定義了頁 面 導 航 展 示 的 頁 碼 。 默 認 值 為[10,20,30,50]。每頁顯示多少條的選擇

$(function () {
    $('#box').pagination({
        total:50,    //總記錄數,也就是數據庫總條數
        pageSize:10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber:1,    //創建的時候顯示的頁數。默認值為1。
        pageList:[10,20]   //每頁顯示多少條的選擇
    });
});

 

loading boolean 定義數據是否正在載入。默認值為 false。，有點異常

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        loading:false,          //義數據是否正在載入。默認值為 false。
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        }
    });
});

 

buttons array自定義按鈕，可用值有：，新增按鈕
　　1.每個按鈕都有2個屬性：
　　　　iconCls：顯示背景圖片的 CSS 類 ID
　　　　handler：當按鈕被點擊時調用的一個句柄函數。
　　2.頁面已存在元素的選擇器對象（例如：
　　　　buttons:'#btnDiv'）。默認值為 null。

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        buttons:[{
            iconCls : 'icon-add',
            handler:function () {
               alert('點擊時操作')
            }
        },{
            iconCls : 'icon-edit',
            handler:function () {
               alert('點擊時操作') } }],
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        }
    });
});

 

layout array分頁控件布局定義。布局選項可以包含一個或多個值：數組方式布局
　　1) list：頁面顯示條數列表。
　　2) sep：頁面按鈕分割線。
　　3) first：首頁按鈕。
　　4) prev：上一頁按鈕。
　　5) next：下一頁按鈕。
　　6) last：尾頁按鈕。
　　7) refresh：刷新按鈕。
　　8) manual：手工輸入當前頁的輸入框。
　　9) links：頁面數鏈接。

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        layout:['list','sep','first','prev','links','next','last','manual']
    });
});

 

showPageList boolean 定義是否顯示頁面導航列表。是否顯示可選每頁顯示多少條

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        showPageList:false      //是否顯示可選每頁顯示多少條
    });
});

 

showRefresh boolean 定義是否顯示刷新按鈕。

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        showRefresh:false      //定義是否顯示刷新按鈕。
    });
});

 

beforePageText string 在輸入組件之前顯示一個 label 標簽。輸入頁前的文字

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        beforePageText:'目前第',      //輸入頁前的文字
        afterPageText:'一共{pages}頁'  //輸入頁后的文字
    });
});

 

afterPageText string 在輸入組件之后顯示一個 label 標簽。輸入頁后的文字

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        beforePageText:'目前第',      //輸入頁前的文字
        afterPageText:'一共{pages}頁'  //輸入頁后的文字
    });
});

 

displayMsg string 設置顯示頁面信息。

 

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        beforePageText:'目前第',      //輸入頁前的文字
        afterPageText:'一共{pages}頁',  //輸入頁后的文字
        displayMsg:'顯示{from}到{to}個會員,共{total}會員'
    });
});

 

 

 

 

三．事件列表

onSelectPage   pageNumber,pageSize用戶選擇一個新頁面的時候觸發。回調函數包含2個參數：
　　pageNumber：新的頁數。
　　pageSize: 每頁顯示的條數。

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize); }
    });
});

 

onBeforeRefresh   pageNumber,pageSize在點擊刷新按鈕刷新之前觸發，返回false 可以取消刷新動作。

　　pageNumber：新的頁數。
　　pageSize: 每頁顯示的條數。

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        onBeforeRefresh:function (pageNumber,pageSize) {
            alert('在點擊刷新按鈕刷新之前觸發');
        }
    });
});

 

onRefresh   pageNumber,pageSize 刷新之后觸發。

　　pageNumber：新的頁數。
　　pageSize: 每頁顯示的條數。

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        onRefresh:function (pageNumber,pageSize) {
            alert('刷新之后觸發'); }
    });
});

 

onChangePageSize   pageSize '改變每頁顯示條數觸發。

　　pageSize: 每頁顯示的條數。

 

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
        onChangePageSize:function (pageSize) {
            alert('改變每頁顯示條數觸發'); }
    });
});

 

 

 

三．方法列表

options none 返回參數對象。

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //用戶選擇一個新頁面的時候觸發
            // pageNumber：新的頁數。
            // pageSize: 每頁顯示的條數。
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);
        },
    });
    alert($('#box').pagination('options'));    //返回參數對象
});

 

loading none 提醒分頁控件正在加載中。在加載分頁時刷新按鈕旋轉

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //點擊分頁時觸發
            $('#box').pagination('loading');    //在加載分頁時刷新按鈕旋轉
            $('#content').panel('refresh','user.php?page=' + pageNumber + '&pagesize=' + pageSize);  //重新加載數據
            setTimeout(function () {
                $('#box').pagination('loaded'); //分頁加載完成時刷新按鈕停止
            }, 1000);
        }
    });
});

 

loaded none 提醒分頁控件加載完成。分頁加載完成時刷新按鈕停止

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //點擊分頁時觸發
            $('#box').pagination('loading');    //在加載分頁時刷新按鈕旋轉
            $('#content').panel('refresh','user.php?page=' + pageNumber + '&pagesize=' + pageSize);  //重新加載數據
            setTimeout(function () {
                $('#box').pagination('loaded'); //分頁加載完成時刷新按鈕停止
            }, 1000);
        }
    });
});

 

refresh options 刷新並顯示分頁欄信息。值為一個對象里面寫要改變的信息屬性

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //點擊分頁時觸發
            $('#box').pagination('loading');    //在加載分頁時刷新按鈕旋轉
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);  //重新加載數據
            setTimeout(function () {
                $('#box').pagination('loaded'); //分頁加載完成時刷新按鈕停止
            }, 1000);
        }
    });
    $(document).click(function () {
        $('#box').pagination('refresh', {
            pageSize: 20, }); });
});

 

select page 選擇一個新頁面，頁面索引從1開始。值為要改變的分頁索引

/**
<div id="content" class="easyui-panel" style="height:200px"
    data-options="href:'user.php?page=1&pagesize=1'"></div>     //傳遞數據，第一頁，第一條
<div id="box">
</div>
 **/

$(function () {
    $('#box').pagination({
        total: 50,    //總記錄數,也就是數據庫總條數
        pageSize: 10,      //每頁顯示條數,就是每頁顯示多少條
        pageNumber: 1,    //創建的時候顯示的頁數。默認值為1。
        pageList: [10, 20],   //每頁顯示多少條的選擇
        onSelectPage: function (pageNumber, pageSize) {     //點擊分頁時觸發
            $('#box').pagination('loading');    //在加載分頁時刷新按鈕旋轉
            $('#content').panel('refresh', 'user.php?page=' + pageNumber + '&pagesize=' + pageSize);  //重新加載數據
            setTimeout(function () {
                $('#box').pagination('loaded'); //分頁加載完成時刷新按鈕停止
            }, 1000);
        }
    });
    $(document).click(function () {
        $('#box').pagination('select', 2); });
});

 

PS：我們可以使用$.fn.pagination.defaults 重寫默認值對象。見前面章節