datatable插件实现分页功能
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，如需转载请自行联系原作者