【EasyUI篇】Pagination分頁元件
阿新 • • 發佈：2018-12-10
微信公眾號： 關注可瞭解更多的教程。問題或建議，請公眾號留言;
17.Pagination分頁元件
注意
這個元件需要配合後臺實現，老規矩，使用SSM
JSP檔案
<%-- Created by IntelliJ IDEA. User: ooyhao Date: 2018/7/29 0029 Time: 9:21 --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Pagination</title> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/js/Pagination.js"></script> <style rel="stylesheet" type="text/css"> </style> </head> <body> <%--class載入方式--%> <%--<div id="box" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background: #efefef;border: 1px solid #ccc;"> </div> --%> <div id="content" class="easyui-panel" style="height: 250px;" data-options="href:'http://localhost:8081/easyui/getUserByPagination.action?page=1&pageSize=2'" > </div> <div id="box" style="background: #efefef;border: 1px solid #ccc;"> </div> </body> </html>
JS檔案
$(function () { var size = 4; $('#box').pagination({ total:11, pageSize:2, pageNumber:1, pageList:[2,4,6,8], buttons:[ { iconCls:'icon-add', handler:function () { alert("add"); } },'-',{ iconCls:'icon-edit', handler:function () { alert("edit"); } } ], /*layout:[ /!*設定顯示的分頁按鈕*!/ 'first','sep','last','sep','list','prev','next','refresh','manual','links' ],*/ showPageList:true, showRefresh:true, // beforePageText:'第', // afterPageText:'共6頁', // displayMsg:'顯示1到2,共11記錄', onSelectPage : function (pageNumeber,pageSize) { $("#content").panel('refresh',"http://localhost:8081/easyui/getUserByPagination.action?page="+pageNumeber+"&pageSize="+pageSize); }, onBeforeRefresh:function (pageNumber,pageSize) { //返回false可以在取消重新整理操作 alert("pageNumeber:"+pageNumber+", pageSize:"+pageSize); }, onRefresh:function (pageNumber,pageSize) { alert("pageNumeber:"+pageNumber+", pageSize:"+pageSize); }, onChangePageSize:function (pageSize) { //改變pageSize時觸發 alert("pageSize:"+pageSize); }, }); //------------- 方法列表 ------------------- //返回屬性物件 console.log($("#box").pagination('options')); //將重新整理按鈕變成loading狀態 $("#box").pagination('loading'); //將重新整理按鈕變成已載入完loaded狀態 $("#box").pagination('loaded'); $(document).click(function () { //這裡只是改變了前端控制元件 $("#box").pagination('refresh',{ pageSize:size, }); //會重新訪問伺服器 // $("#box").pagination('select',2); }); });
Mapper檔案
<select id="getUserByPagination" resultType="User">
select * from tb_user limit #{start} , #{pageSize} ;
</select>
ServiceImpl檔案
@Override public List<User> getUserByPagination(int page, int pageSize) { int start = (page-1)*pageSize; return userMapper.getUserByPagination(start,pageSize); }
效果圖
------------------------------------------------
關注小編微信公眾號獲取更多資源
