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 %}{% endblock %} {% block script %} {% endblock %}{#Uhost信息
#}Uhost信息
{% for host in uhosts %} 主机名称 IP地址 价格 可用区 业务组 到期时间 {% endfor %} {{ host.name }} {{ host.ip }} {{ host.price }} {{ host.zone.name }} {{ host.tag }} {{ host.expiretime }}
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://hbruida.cn/article/jeiedg.html