easui Pagination Layout

easui Pagination Layout
分页显示方式有几种
layout: ['first', 'prev', 'next', 'last']
layout: ['list', 'sep', 'first', 'prev', 'sep', 'manual', 'sep', 'next', 'last', 'sep', 'refresh']
layout: ['links']
layout: ['first', 'prev', 'links', 'next', 'last']
layout: ['first', 'prev', 'next', 'last', 'sep', 'links', 'sep', 'manual']

Html
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <title>Pagination Layout - jQuery EasyUI Demo</title>
6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
8. <link rel="stylesheet" type="text/css" href="../demo.css">
9. <script type="text/javascript" src="../../jquery.min.js"></script>
10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
11. </head>
12. <body>
13. <h2>Pagination Layout</h2>
14. <p>The pagination layout supports various types of pages which you can choose.</p>
15. <div style="margin:20px 0;"></div>
16. <div class="easyui-panel">
17. <div id="pp" class="easyui-pagination" data-options="
18. total:114,
19. layout:['first','prev','next','last']
20. "></div>
21. </div>
22. <div style="margin-top:10px">
23. <select onchange="setLayout(this.value)">
24. <option value="1">Previous Next</option>
25. <option value="2">Manual Page Input</option>
26. <option value="3">Numeric Links</option>
27. <option value="4">Previous Links Next</option>
28. <option value="5">Go To Page</option>
29. </select>
30. </div>
31. <script>
32. function setLayout(type){
33. var p = $('#pp');
34. switch(parseInt(type)){
35. case 1:
36. p.pagination({layout:['first','prev','next','last']});
37. break;
38. case 2:
39. p.pagination({
40. layout:['list','sep','first','prev','sep','manual','sep','next','last','sep','refresh'],
41. beforePageText:'Page',
42. afterPageText:'of {pages}'
43. });
44. break;
45. case 3:
46. p.pagination({layout:['links']});
47. break;
48. case 4:
49. p.pagination({layout:['first','prev','links','next','last']});
50. break;
51. case 5:
52. p.pagination({
53. layout:['first','prev','next','last','sep','links','sep','manual'],
54. beforePageText:'Go Page',
55. afterPageText:''
56. });
57. break;
58. }
59. }
60. </script>
61. </body>
62. </html>
相关阅读:
shutil的一些基本用法
 python用random产生验证码，以及random的一些其他用法
 hashlib 文件校验，MD5动态加盐返回加密后字符
 python中logging日志基本用法，和进程安全问题
 用递归函数得到目录下的所有文件
 python装饰器
 列表推导式三种模式和生成器
 vue.js响应式原理解析与实现
 Promise详解
 三分钟教你同步 Visual Studio Code 设置
原文地址：https://www.cnblogs.com/huangf714/p/5834122.html