zoukankan      html  css  js  c++  java

  • 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>
  • 相关阅读:
    Tensorflow CIFAR10 (二分类)
    2018年阿里巴巴重要开源项目汇总
    环境变量备份
    ubuntu Qt5 librealsense opencv
    ubuntu16.04 qt opencv3.4
    时间作为文件名
    ubuntu16.04 安装opencv3
    Visual studio 2015/2017 opencv3.4 kineck2.0 osg realsense配置
    开源监控系统整合Nagios+Cacti+Nconf详解
    nagios系列(八)之nagios通过nsclient监控windows主机
  • 原文地址：https://www.cnblogs.com/huangf714/p/5834122.html
Copyright © 2011-2022 走看看