Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能
版本:
django:2.1.7
python:3.7
Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换。
优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢。
后端分页python3代码如下:
paginator = Paginator(stat_list, numtmp)
try:
flight_stats = paginator.page(1)
except PageNotAnInteger:
flight_stats = paginator.page(1)
except EmptyPage:
flight_stats = paginator.page(paginator.num_pages)
if messageinfo_list:
msg_num = len(messageinfo_list)
msg_last = models_frame.TabAlarmInfo.objects.latest('id')
msg_last_content = msg_last.alarm_content
tim_last = (datetime.datetime.now() - msg_last.alarm_time).seconds / 60
else:
msg_num = 0
msg_last_content = ''
tim_last = ''
我们也可以根据自己的使用场景:不使用Django自带的分页,使用Jquery DataTable.js 插件进行前端分页处理。
JS通过DataTable实现表格前端分页,参数可以都为空,只是默认显示都为英文。
具体包括了表格前端分页,每页显示几条数据,快速搜索功能,按表头排序,自定义提示等功能。
优缺点:前端分页使用与处理数据量不是非常大的场景,页面的切换速度非常快,因为数据都在前端缓存了。
JS代码如下:
<!-- DataTables -->
<link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css"> <!-- DataTables -->
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> $('#table1').DataTable({
autoWidth:true,////不开启自动宽度,用bootstrap的自适应去调整
"lengthMenu": [10, 20, 50, 100],//表格行数选择框内数目 显示2条,4条,20条,50条
"displayLength": 10,//默认的显示行数 (也就是每页显示几条数据)
"order": [],
"language": {//自定义语言提示
"processing": "处理中...",
"lengthMenu": "显示 _MENU_ 项结果",
"zeroRecords": "没有找到相应的结果",
"info": "第 _START_ 至 _END_ 行,共 _TOTAL_ 行",
"infoEmpty": "第 0 至 0 项结果,共 0 项",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"url": "",
"thousands": "'",
"emptyTable": "表中数据为空",
"loadingRecords": "载入中...",
"infoThousands": ",",
"paginate": {
"first": "首页",
"previous": "上页",
"next": "下页",
"last": "末页"
}
}
});
table1为自己表格的id,可以复用到多个表格中。
但是,对于有些表格,可能不想要每页显示几条数据,快速搜索的功能,则可以增加如下设置:
$('#table1').dataTable({
searching : false, //去掉搜索框方法一:百度上的方法,但是我用这没管用
sDom : '"top"i', //去掉搜索框方法二:这种方法可以,动态获取数据时会引起错误
bFilter: false, //去掉搜索框方法三:这种方法可以
bLengthChange: false, //去掉每页显示多少条数据方法
});
CSS样式部分也可以根据类名设置:
{% block style %}
<style>
.table tr th {
font-size: 12px;
text-align: center;
vertical-align: middle;
}
.table tr td {
font-size: 12px;
text-align: center;
vertical-align: middle;
}
[aria-controls="example1"] {
font-size: 12px;
} li{list-style: none; margin: 0px; padding: 0px;}/*这里设置*/
ul{margin: 0px; padding: 0px;}/*这里设置*/ </style>
{% endblock style %}
最后,效果如下:
Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能的更多相关文章
- Django中载入js和css文件
Django中载入js和css文件 项目的文件夹结构例如以下: mysite |-mysite |-|-static |-|---js和css文件 |-|-|-init.py |-| |-models ...
- js如何实现动态显示表格数据(点奇数显示奇数单元格内容)
js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一.总结 一句话总结: 1.动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值. 2.弄了 ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- Django 中使用 js 操作 cookies
session与cookie对比 Cookie: 保存在用户浏览器端的键值对 本地可以修改:如果有敏感信息,可以被看到 Session: 保存在服务器端的键值对 服务端:保存键值对{'随机字符串':{ ...
- 解决Django中在.js文件中用ajax请求后端,找不到CSRF问题
function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie != ...
- django中的django admin插件
一.django admin前言 1.admin的作用 为了方便后台开发者快速的部署测试环境,于是就产生了admin,admin主要是操作models中的类从而实现对数据库中的数据增删改查的操作. 2 ...
- MVC学习随笔----如何在页面中添加JS和CSS文件
http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...
- easyui combogrid下拉表格的分页/按键/动态搜索
作者:xfl4629712 < easyui combogrid下拉表格的分页/按键/动态搜索 > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...
- Django中简单添加HTML、css、js等文件(非正规添加,适合小白)
Django中简单添加HTML.css.js等文件 首先申明下自己的环境, python版本3.65(亲测3.7版本有毒,没解决掉!) Django版本1.11.15(版本比较成熟,也可以用最新的版本 ...
随机推荐
- gnuradio companion 找不到第三方模块gr-osmosdr的问题
我使用了来自Ettus的gnuradio软件包,之后安装了gr-osmosdr 以在gnuradio中调用RTL电视棒. 但是在gnuradio companion找不到来自rtlsdr-source ...
- HTTP协议入门(一)- 版本
当我们在浏览器的地址栏输入URL后,信息会被发送到WEB服务器,服务器得到响应,将数据传输回来,展示到WEB页面上,这其中的传输方法就是HTTP协议. 一.HTTP 0.9 发布于1991年,是首个H ...
- 图像滤镜艺术--Toaster滤镜
原文:图像滤镜艺术--Toaster滤镜 根据Instagram CEO的说法,Toaster滤镜是Instagram所有滤镜中最复杂的滤镜,这个滤镜给人一种新奇的红色烘烤感,很能让人联想起这 ...
- WPF之MahApps.Metro下载和WPF学习经验
这几天一直在学习WPF的东西.刚开始以为和Winform一样.拖拽控件来进行布局.结果远远没有那么简单.很多东西都需要自己写.包括样式.今天给大家分享一个 MahApps.Metro. 首先在NuGe ...
- 错误代码: 0x800700b7 配置错误:定义了重复的“system.web.extensions/scripting/scriptResourceHandler”节
操作环境:Windows 8.1 IIS8.5 VS2008 解决方法: 把应用程序池的.Net CLR 版本从4.0修改为2.0即可.如下图所示:
- List<T>多字段排序的一个通用类
本文中的方法旨在解决通用的问题,非常注重效率的地方,还应该针对具体的类去写排序方法. 废话不多说,直接上代码 具体使用场景: 要排序的类 1 public class bb 2 { 3 public ...
- Android Java调用Qt写的so库
有时候,我们反编译apk得到一个so库,如果直接使用这个so库的话,必须使用原来so库同样的package名字,才能用.这样人家反编译你的apk,就知道你侵犯了人家的版权.为了达到混淆的目的,我们可以 ...
- [转]UE的职责
最近开始负责产品工作,从产品定位到需求文档再到原型设计,以及后续产品的路线规划,渐渐感觉忙不过来了.所以准备招一个UE/X来辅助. 以前做项目,也没接触过什么UE,所以对UE的工作不是很清楚,尤其是P ...
- python机器学习系列之环境搭建
Windows系统下python2.7,numpy,matplotlib安装 1. python2.7从https://www.python.org/downloads/release/python ...
- ZooKeeper学习第三期---Zookeeper命令操作(转)
转载来源:https://www.cnblogs.com/sunddenly/p/4031881.html 一.Zookeeper的四字命令 Zookeeper支持某些特定的四字命令字母与其的交互.他 ...