datatable插件实现分页功能
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 %}
{% endblock %}
{% block content %}
{# Uhost信息
#}
Uhost信息
主机名称
IP地址
价格
可用区
业务组
到期时间
{% for host in uhosts %}
{{ host.name }}
{{ host.ip }}
{{ host.price }}
{{ host.zone.name }}
{{ host.tag }}
{{ host.expiretime }}
{% endfor %}
{% endblock %}
{% block 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文件
CMDB管理 {% block css %}{% endblock %}{% include "common/menu.html" %}{% block script %}{% endblock %}{% block content %}{% endblock %}
效果:

每页显示多少行结果也可以通过修改js文件来调整
网页标题:datatable插件实现分页功能
文章源于:http://www.jxjierui.cn/article/jeiedg.html


咨询
建站咨询
