查看: 4115|回复: 0

[HTML代码] datatable插件实现分页功能

发表于 2018-1-22 08:00:06

1、下载datatable插件,下载地址:http://www.datatables.club/


2、安装方法:http://www.datatables.club/manual/install.html

注意:按照官方文档的方法引入插件后会有点问题,样式也不是很美观,所以我做了修改。

由于通常djangotemplate 下的html文件使用了模板语法,所以要把CSS、JS文件放在对应的模板标签下面

下面是我的一个样例:


注意:table的id要改成“dataTables”,样式会好看一些。

  1. id="dataTables"
复制代码

DataTable_Test.html

  1. {% extends 'common/base.html' %}
  2. {% block css %}
  3. <link rel="stylesheet" type="text/css" href="/static/DataTables-1.10.15/media/css/jquery.dataTables.css">
  4. <link rel="stylesheet" type="text/css" href="/static/DataTables-1.10.15/media/css/dataTables.bootstrap.min.css">
  5. {% endblock %}
  6. {% block content %}
  7. <div class="row">
  8. <div class="ibox">
  9. <div class="ibox-title">
  10. {# <h5>Uhost信息</h5>#}
  11. <h5 style="font-size: large">Uhost信息</h5>
  12. <div class="ibox-content">
  13. <div class="row">
  14. <table id="dataTables" class="table table-striped table-hover">
  15. <thead>
  16. <tr>
  17. <th class="col-lg-2">主机名称</th>
  18. <th class="col-lg-2">IP地址</th>
  19. <th class="col-lg-2">价格</th>
  20. <th class="col-lg-2">可用区</th>
  21. <th class="col-lg-2">业务组</th>
  22. <th class="col-lg-2">到期时间</th>
  23. </tr>
  24. </thead>
  25. <tbody>
  26. {% for host in uhosts %}
  27. <tr>
  28. <td>{{ host.name }}</td>
  29. <td>{{ host.ip }}</td>
  30. <td>{{ host.price }}</td>
  31. <td>{{ host.zone.name }}</td>
  32. <td>{{ host.tag }}</td>
  33. <td>{{ host.expiretime }}</td>
  34. </tr>
  35. {% endfor %}
  36. </tbody>
  37. </table>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </div>
  43. {% endblock %}
  44. {% block script %}
  45. <script type="text/javascript" charset="utf8" src="/static/DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
  46. <!-- 由于base.html文件中引入了jquery.js文件所以这里要注释掉,否则可能引起函数方法冲突 -->
  47. <!-- <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script> -->
  48. <script type="text/javascript" charset="utf8" src="/static/DataTables-1.10.15/media/js/dataTables.bootstrap.min.js"></script>
  49. <script type="text/javascript" src="/static/js/datatable_custom.js"></script>
  50. {% endblock %}
复制代码


datatable_custom.js是为了样式好看,自定义样式的一个js文件,内容如下:

  1. /**
  2. * Created by cengchengpeng on 2018/1/10.
  3. */
  4. $(document).ready(function () {
  5. $('#dataTables').DataTable({
  6. language: {
  7. "sProcessing": "处理中...",
  8. "sLengthMenu": "显示 _MENU_ 项结果",
  9. "sZeroRecords": "没有匹配结果",
  10. "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
  11. "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
  12. "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
  13. "sInfoPostFix": "",
  14. "sSearch": "搜索:",
  15. "sUrl": "",
  16. "sEmptyTable": "表中数据为空",
  17. "sLoadingRecords": "载入中...",
  18. "sInfoThousands": ",",
  19. "oPaginate": {
  20. "sFirst": "首页",
  21. "sPrevious": "上页",
  22. "sNext": "下页",
  23. "sLast": "末页"
  24. },
  25. "oAria": {
  26. "sSortAscending": ": 以升序排列此列",
  27. "sSortDescending": ": 以降序排列此列"
  28. }
  29. }
  30. });
  31. });
复制代码




base.html文件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>CMDB管理</title>
  7. <link rel="icon" href="/static/images/bitbug_favicon.ico">
  8. <link href="/static/inspinia/css/bootstrap.min.css" rel="stylesheet">
  9. <link href="/static/inspinia/font-awesome/css/font-awesome.css" rel="stylesheet">
  10. <link href="/static/inspinia/css/animate.css" rel="stylesheet">
  11. <link href="/static/inspinia/css/style.css" rel="stylesheet">
  12. <link href="/static/css/css.css?v={{ verion }}" rel="stylesheet">
  13. {% block css %}{% endblock %}
  14. </head>
  15. <body>
  16. <div id="wrapper">
  17. {% include "common/menu.html" %}
  18. <div id="page-wrapper" class="white-bg dashbard-1">
  19. {% block content %}{% endblock %}
  20. </div>
  21. </div>
  22. </body>
  23. <script src="/static/inspinia/js/jquery-2.1.1.js"></script>
  24. <script src="/static/inspinia/js/bootstrap.min.js"></script>
  25. <script src="/static/inspinia/js/plugins/metisMenu/jquery.metisMenu.js"></script>
  26. <script src="/static/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
  27. <script src="/static/inspinia/js/inspinia.js"></script>
  28. <script src="/static/inspinia/js/plugins/pace/pace.min.js"></script>
  29. <script src="/static/inspinia/js/bootstrap-typeahead.js"></script>
  30. <script src="/static/js/jquery.numeric.js"></script>
  31. <script src="/static/js/common.js?v={{ verion }}"></script>
  32. <!--<script src="/static/js/workflow.js?v={{ verion }}"></script>-->
  33. <script>
  34. $('#side-menu').find('li>a[href]').each(function(){
  35. if(location.href.indexOf($(this).attr('href').toLowerCase()) != -1){
  36. $(this).closest('li').addClass('active');
  37. }
  38. });
  39. $('#foldPage').click(function(){
  40. var fold = $(this).data('fold');
  41. var $div = $('#accordion div[id]');
  42. if(fold == "0"){
  43. $div.addClass('in').removeAttr('style');
  44. $(this).data('fold', 1);
  45. }
  46. else{
  47. $div.removeClass('in');
  48. $(this).data('fold', 0);
  49. }
  50. });
  51. </script>
  52. {% block script %}{% endblock %}
  53. </html>
复制代码


效果:

1.png


每页显示多少行结果也可以通过修改js文件来调整





回复

使用道具 举报