李炎恢_PHP_jQuery EasyUI[021] ~ Pagination(分頁)組件
李炎恢_PHP_jQuery EasyUI[021] ~ Pagination(分頁)組件
參考資料: https://github.com/jash-git/jash-WebSI
GITHUB: https://github.com/jash-git/richie_jQuery_EasyUI
My code:
$(function () {
$('#box').pagination({
total : 5,
pageSize : 1,
pageNumber : 1,
pageList : [1,2],
//loading : true,
buttons : [{
iconCls : 'icon-add',
},'-',{
iconCls : 'icon-edit',
}],
//layout : ['first','prev','links','next','last'],
//showPageList : false,
//showRefresh : false,
//beforePageText : '弟弟',
//afterPageText : '有{pages}个',
displayMsg : '从{from}到{to}，有{total}人',
onSelectPage : function (pageNumber, pageSize) {
$('#box').pagination('loading');
$('#content').panel('refresh', 'user.php?page='+pageNumber+'&pagesize='+pageSize);
setTimeout(function () {
$('#box').pagination('loaded');
}, 1000);
},
onBeforeRefresh : function (pageNumber, pageSize) {
alert('刷新之前');
},
onRefresh : function (pageNumber, pageSize) {
alert('刷新之后');
},
onChangePageSize : function (pageSize) {
alert('每页显示的条数被改变！');
}
});
$(document).click(function () {
/*
$('#box').pagination('refresh', {
pageSize : 2,
pageNumber : 2,
});
*/
$('#box').pagination('select', 2);
});
});
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="../../easyui_15/jquery.min.js"></script> <script type="text/javascript" src="../../easyui_15/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../easyui_15/locale/easyui-lang-zh_TW.js" ></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/icon.css" /> </head> <body> <!-- <div class="easyui-pagination" data-options="total:2000,pageSize:10" style="border:1px solid #ccc;"></div> --> <div id="content" class="easyui-panel" style="height:200px;" data-options="href:'user.php?page=1&pagesize=1'"></div> <div id="box" style="border:1px solid #ccc;"></div> </body> </html>
PDF:
執行結果:
