您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
1、下载datatable插件,下载地址:http://www.datatables.club/
2、安装方法:http://www.datatables.club/manual/install.html
注意:按照官方文档的方法引入插件后会有点问题,样式也不是很美观,所以我做了修改。
由于通常djangotemplate 下的html文件使用了模板语法,所以要把CSS、JS文件放在对应的模板标签下面
下面是我的一个样例:
注意:table的id要改成“dataTables”,样式会好看一些。
id="dataTables"
DataTable_Test.html
{% extends 'common/base.html' %} {% block css %} <link rel="stylesheet" type="text/css" href="/static/DataTables-1.10.15/media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="/static/DataTables-1.10.15/media/css/dataTables.bootstrap.min.css"> {% endblock %} {% block content %} <div class="row"> <div class="ibox"> <div class="ibox-title"> {# <h6>Uhost信息</h6>#} <h6 style="font-size: large">Uhost信息</h6> <div class="ibox-content"> <div class="row"> <table id="dataTables" class="table table-striped table-hover"> <thead> <tr> <th class="col-lg-2">主机名称</th> <th class="col-lg-2">IP地址</th> <th class="col-lg-2">价格</th> <th class="col-lg-2">可用区</th> <th class="col-lg-2">业务组</th> <th class="col-lg-2">到期时间</th> </tr> </thead> <tbody> {% for host in uhosts %} <tr> <td>{{ host.name }}</td> <td>{{ host.ip }}</td> <td>{{ host.price }}</td> <td>{{ host.zone.name }}</td> <td>{{ host.tag }}</td> <td>{{ host.expiretime }}</td> </tr> {% endfor %} </tbody> </table> </div> </div> </div> </div> </div> {% endblock %} {% block script %} <script type="text/javascript" charset="utf8" src="/static/DataTables-1.10.15/media/js/jquery.dataTables.js"></script> <!-- 由于base.html文件中引入了jquery.js文件所以这里要注释掉,否则可能引起函数方法冲突 --> <!-- <script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script> --> <script type="text/javascript" charset="utf8" src="/static/DataTables-1.10.15/media/js/dataTables.bootstrap.min.js"></script> <script type="text/javascript" src="/static/js/datatable_custom.js"></script> {% endblock %}
datatable_custom.js是为了样式好看,自定义样式的一个js文件,内容如下:
/** * Created by cengchengpeng on 2018/1/10. */ $(document).ready(function () { $('#dataTables').DataTable({ language: { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } } }); });
base.html文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CMDB管理</title> <link rel="icon" href="/static/images/bitbug_favicon.ico"> <link href="/static/inspinia/css/bootstrap.min.css" rel="stylesheet"> <link href="/static/inspinia/font-awesome/css/font-awesome.css" rel="stylesheet"> <link href="/static/inspinia/css/animate.css" rel="stylesheet"> <link href="/static/inspinia/css/style.css" rel="stylesheet"> <link href="/static/css/css.css?v={{ verion }}" rel="stylesheet"> {% block css %}{% endblock %} </head> <body> <div id="wrapper"> {% include "common/menu.html" %} <div id="page-wrapper" class="white-bg dashbard-1"> {% block content %}{% endblock %} </div> </div> </body> <script src="/static/inspinia/js/jquery-2.1.1.js"></script> <script src="/static/inspinia/js/bootstrap.min.js"></script> <script src="/static/inspinia/js/plugins/metisMenu/jquery.metisMenu.js"></script> <script src="/static/inspinia/js/plugins/slimscroll/jquery.slimscroll.min.js"></script> <script src="/static/inspinia/js/inspinia.js"></script> <script src="/static/inspinia/js/plugins/pace/pace.min.js"></script> <script src="/static/inspinia/js/bootstrap-typeahead.js"></script> <script src="/static/js/jquery.numeric.js"></script> <script src="/static/js/common.js?v={{ verion }}"></script> <!--<script src="/static/js/workflow.js?v={{ verion }}"></script>--> <script> $('#side-menu').find('li>a[href]').each(function(){ if(location.href.indexOf($(this).attr('href').toLowerCase()) != -1){ $(this).closest('li').addClass('active'); } }); $('#foldPage').click(function(){ var fold = $(this).data('fold'); var $div = $('#accordion div[id]'); if(fold == "0"){ $div.addClass('in').removeAttr('style'); $(this).data('fold', 1); } else{ $div.removeClass('in'); $(this).data('fold', 0); } }); </script> {% block script %}{% endblock %} </html>
效果:
每页显示多少行结果也可以通过修改js文件来调整
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。