您的位置:首页 > Web前端 > JavaScript

Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

老庄先生 2019-07-14 18:00 856 查看

版本:

django:2.1.7

python:3.7

Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换。

优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢。

后端分页python3代码如下:

paginator=Paginator(stat_list,numtmp)
try:
flight_stats=paginator.page(1)
exceptPageNotAnInteger:
flight_stats=paginator.page(1)
exceptEmptyPage:
flight_stats=paginator.page(paginator.num_pages)
ifmessageinfo_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自带的分页,使用JqueryDataTable.js插件进行前端分页处理。

JS通过DataTable实现表格前端分页,参数可以都为空,只是默认显示都为英文。

具体包括了表格前端分页,每页显示几条数据,快速搜索功能,按表头排序,自定义提示等功能。

优缺点:前端分页使用与处理数据量不是非常大的场景,页面的切换速度非常快,因为数据都在前端缓存了。

JS代码如下:

<!--DataTables-->
<linkrel="stylesheet"href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">

<!--DataTables-->
<scriptsrc="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<scriptsrc="/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,可以复用到多个表格中。
但是,对于有些表格,可能不想要每页显示几条数据,快速搜索的功能,则可以增加如下设置:
$('#dyntable1').dataTable({
searching:false,//去掉搜索框方法一:百度上的方法,但是我用这没管用
sDom:'"top"i',//去掉搜索框方法二:这种方法可以,动态获取数据时会引起错误
bFilter:false,//去掉搜索框方法三:这种方法可以
bLengthChange:false,//去掉每页显示多少条数据方法
});

CSS样式部分也可以根据类名设置:

{%blockstyle%}
<style>
.tabletrth{
font-size:12px;
text-align:center;
vertical-align:middle;
}
.tabletrtd{
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>
{%endblockstyle%}

最后,效果如下:

 

 

 


                                            
标签: