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

版本：

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%}

最后，效果如下：