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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
{% 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"
>
{# <
h5
>Uhost信息</
h5
>#}
<
h5
style
=
"font-size: large"
>Uhost信息</
h5
>
<
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文件，内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
/**
* 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文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!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文件来调整
本文转自 曾哥最爱 51CTO博客，原文链接：http://blog.51cto.com/zengestudy/2059909，如需转载请自行联系原作者
