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

最後，效果以下：