DjangoWeb使用Datatable進(jìn)行后端分頁的實(shí)現(xiàn)

更新時(shí)間：2020年05月18日 11:11:59 作者：豆芽胡

這篇文章主要介紹了DjangoWeb使用Datatable進(jìn)行后端分頁的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

使用場景：不使用Django的模版語言進(jìn)行分頁（網(wǎng)上大多數(shù)都使用該方式），使用Jquery DataTable.js 插件進(jìn)行分頁處理。

本人做的是一個(gè)表格監(jiān)控頁面，該頁面中的table內(nèi)容每5s刷新一次。

注意：這種方式非長連接（websocket）模式，長連接模式也有弊端，因網(wǎng)絡(luò)波動導(dǎo)致，倘若一次連接斷開，后面將無法繼續(xù)刷新數(shù)據(jù)（不重連的話），且比較吃服務(wù)器帶寬。

故使用Ajax定時(shí)刷新獲取最新數(shù)據(jù)，兩種方案各有優(yōu)劣，根據(jù)實(shí)際場景進(jìn)行抉擇。

代碼如下：

1.Html頁面內(nèi)容（本人用的是Admin.lte的前端框架），

引入Datatable css 和 Js，并創(chuàng)建一個(gè)table：

<link rel="stylesheet" href="{% static '/plugins/bootstrap-datatable/bootstrap-table.css' %}" rel="external nofollow" >
<link rel="stylesheet" href="{% static '/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css' %}" rel="external nofollow" >
 
<table class="table table-bordered table-striped table-hover" id="monitorTable" style="width: 100%">
</table>
<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>

2.頁面加載時(shí)本人對表格內(nèi)容進(jìn)行了初始化，下面的兩種方式對表格都能進(jìn)行初始化，但是獲取到的var 對象是不一樣的。

這里一定要注意（分不清楚就是個(gè)坑）:

以var table1=$("#xxx").Datatable({})

以var table2=$("#xxx").datatable({})

即table1!=table2

這里要說明下，上面的table1是對象，table2是API對象（請對這句話保持警惕），建議初始化表格時(shí)使用table1的方式。

根據(jù)官網(wǎng)的描述DataTables的真正威力可以通過使用它提供的API來利用。

關(guān)于table2的使用，以后會說明！?。?/p>

3.因?yàn)橥豁撁婵赡苁褂枚鄠€(gè)表格，所以我要多個(gè)表格共用的部分提取出來，避免代碼反復(fù)編寫：

下面的方法定義了3個(gè)參數(shù)，

lengthMenuParam：table表格左上角的分頁列表“右側(cè)”需要顯示哪些內(nèi)容（這部分可以自定義）

urlParam：table中的數(shù)據(jù)從哪里獲取

columnsParam：table中有哪些列內(nèi)容

這里要注意下，bProcessing=True這個(gè)屬性很重要，這個(gè)屬性能很友好的提醒用戶數(shù)據(jù)正在讀取中，因?yàn)樽x取服務(wù)器數(shù)據(jù)是要時(shí)間的。

// table初始化方法
function initDataTable(lengthMenuParam, urlParam, columnsParam) {
 return {
   sPaginationType: "full_numbers", //分頁風(fēng)格，full_number會把所有頁碼顯示出來
   searching: false,//搜索
   ordering: false,//是否啟用排序
   bProcessing: true, //是否顯示加載
   sAjaxSource: urlParam, //請求資源路徑
   serverSide: true, //開啟服務(wù)器處理模式
   /*
    使用ajax，在服務(wù)端處理數(shù)據(jù)
    sSource:即是"sAjaxSource"
    aoData:要傳遞到服務(wù)端的參數(shù)
    fnCallback:處理返回?cái)?shù)據(jù)的回調(diào)函數(shù)
    */
   fnServerData: function (sSource, aoData, fnCallback) {
    $.ajax({
     'type': 'POST',
     "url": sSource,
     "dataType": "json",
     "data": {"aodata": JSON.stringify(aoData)},
     "success": function (resp) {
      fnCallback(resp);
     }
    });
   },
   "oLanguage": {//語言設(shè)置
    "sLengthMenu": '<select class="form-control" style="width:150px">'
    + '<option value="10" selected>每頁10條</option>'
    + '<option value="20">每頁20條</option>'
    + '<option value="50">每頁50條</option>'
    + '<option value="100">每頁100條</option>'
    + '</select>'
 + lengthMenuParam,,
    "sProcessing": "處理中...",
    "sZeroRecords": "沒有匹配結(jié)果",
    "sInfo": "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)",
    "sInfoEmpty": "沒有數(shù)據(jù)",
    "sInfoFiltered": "(獲取 _MAX_ 項(xiàng)結(jié)果)",
    "sInfoPostFix": "",
    "sSearch": "搜索:",
    "sUrl": "",
    "sEmptyTable": "表中數(shù)據(jù)為空",
    "sLoadingRecords": "載入中...",
    "sInfoThousands": ",",
    "oPaginate": {
     "sFirst": "首頁",
     "sPrevious": "上頁",
     "sNext": "下頁",
     "sLast": "末頁"
    },
   },
   "bProcessing": true, //開啟讀取服務(wù)器數(shù)據(jù)時(shí)顯示正在加載中……特別是大數(shù)據(jù)量的時(shí)候，開啟此功能比較好
   "bServerSide": true, //開啟服務(wù)器模式，使用服務(wù)器端處理配置datatable。
   // 注意：sAjaxSource參數(shù)也必須被給予為了給datatable源代碼來獲取所需的數(shù)據(jù)對于每個(gè)畫。
   // 這個(gè)翻譯有點(diǎn)別扭。開啟此模式后，你對datatables的每個(gè)操作 每頁顯示多少條記錄、下一頁、上一頁、排序（表頭）、搜索，這些都會傳給服務(wù)器相應(yīng)的值。
   "columns": columnsParam,
 }
}

定義左側(cè)顯示參數(shù)：

   var lengthMenuParam =
    '<div class="btn-group">' +
    '<button type="button" class="btn btn-default" data-toggle="modal" data-target="#addResources_modal">添加</button>' +
    '<button type="button" class="btn btn-default selectAllCheck">全選</button>' +
    '<button type="button" class="btn btn-default" id="selectAllDelete">刪除</button>' +
    '</div>';

定義url地址：

var urlParam = "{% url 'Monitor:monitor' %}";

定義列內(nèi)容：

var columnsParam = [
    {title: "id", data: "id", sClass: "hidden"},
    {
     data: null,
     sWidth: "1%",
     'render': function (data, type, full, meta) {
      return meta.row + 1 + meta.settings._iDisplayStart;
     }
    },
    {
     title: '<input type="checkbox" class="selectAllCheck">',
     sWidth: "1%",
     data: null,
     'render': function (data, type, full, meta) {
      return '<div><input type="checkbox"></div>';
     }
    },
    {title: "名稱", data: "name"},
    {
     title: "IP",
     data: "ip",
     "render": function (data, type, full, meta) {
      var strDelete = '<a href="/docker/container?ip=' + data + '" rel="external nofollow" class="text-blue">' + data + '</a>';
      return strDelete;
     }
    },
    {title: "操作系統(tǒng)", data: "os"},
    {title: "狀態(tài)", data: "status"},
    {title: "創(chuàng)建日期", data: "createTime"},
    {
     data: null,
     "render": function (data, type, full, meta) {
      var strModify = "<button type='button' class='btn btn-warning btn-xs btn-flat modifyResources' data-toggle='modal' data-target='#modifyResources_modal'> <i class='fa fa-pencil'></i>修改</button > ";
      var strDelete = "<button type='button' class='btn btn-danger btn-xs btn-flat deleteResources' > <i class='fa fa-pencil'></i>刪除</button > ";
      return strModify + strDelete;
     }
    },
   ];

上面的列內(nèi)容中，第1列是隱藏內(nèi)容，第2列是行序號，第3列check（用來多選的），

第4,6,7,8列是要顯示的信息，第5列是超鏈接。

第9列是操作按鈕（根據(jù)自己的選擇增加、刪除）。

一般情況下，上述內(nèi)容已經(jīng)夠用了。

4.完成表格的初始化：

   $("#monitorTable").DataTable(
    initDataTable(lengthMenuParam, urlParam, columnsParam)
   )

注意，我這里的datatable分頁使用的是post請求，因?yàn)榉猪摰臅r(shí)候需要向服務(wù)端傳遞很多參數(shù)，使用get請求的話，這里就很難受了。

5.服務(wù)端代碼，返回結(jié)果的內(nèi)容格式是固定的，不要想著去修改：

@csrf_exempt
def monitor(request):
 if request.method == 'GET':
  return render(request, 'monitor/Monitor.html', )
 else:
  dataTable = {}
  aodata = json.loads(request.POST.get("aodata"))
  for item in aodata:
   if item['name'] == "sEcho":
    sEcho = int(item['value']) # 客戶端發(fā)送的標(biāo)識
   if item['name'] == "iDisplayStart":
    iDisplayStart = int(item['value']) # 起始索引
   if item['name'] == "iDisplayLength":
    iDisplayLength = int(item['value']) # 每頁顯示的行數(shù)
  # 獲取最新的時(shí)間
  last_time = T_Monitor.objects.order_by('-createTime').first().createTime
  # 根據(jù)最新的時(shí)間獲取監(jiān)控?cái)?shù)據(jù)
  monitor_list = T_Monitor.objects.filter(createTime=last_time).order_by('createTime')
  #monitor_list = T_Monitor.objects.order_by('updateTime').all()
  resultLength = monitor_list.count()
  # 對list進(jìn)行分頁
  paginator = Paginator(monitor_list, iDisplayLength)
  # 把數(shù)據(jù)分成10個(gè)一頁。
  try:
   monitor_list = paginator.page(iDisplayStart / 10 + 1)
  # 請求頁數(shù)錯(cuò)誤
  except PageNotAnInteger:
   monitor_list = paginator.page(1)
  except EmptyPage:
   monitor_list = paginator.page(paginator.num_pages)
  data=[]
  for item in monitor_list:
   row = {"id": str(item.id),
     "name": item.name,
     "ip": item.ip,
     "os": item.os[0:6],
     "status": item.status,
     "createTime": item.createTime.strftime('%Y-%m-%d %H:%M:%S')}
   data.append(row)
  #對最終的數(shù)據(jù)進(jìn)行排序
  data = sorted(data, key=lambda item: item['createTime'])
  dataTable['iTotalRecords'] = resultLength # 數(shù)據(jù)總條數(shù)
  dataTable['sEcho'] = sEcho + 1
  dataTable['iTotalDisplayRecords'] = resultLength # 顯示的條數(shù)
  dataTable['aaData'] = data
 
  return HttpResponse(json.dumps(dataTable, ensure_ascii=False))

最終的表現(xiàn)結(jié)果如下圖：

6.添加定時(shí)刷新table的JS

 <script>
 
  //刷新方法
  function runRefresh() {
   var interval = setInterval(refreshMonitor, "5000");
  }
  {#定時(shí)器運(yùn)行方法#}
  function refreshMonitor() {
   var table = $('#monitorTable').DataTable();
   table.ajax.reload(null, false); // 刷新表格數(shù)據(jù)，分頁信息不會重置
  }
  runRefresh();
 </script>

最后強(qiáng)調(diào)一點(diǎn)，table數(shù)據(jù)也是可以通過get請求進(jìn)行加載的。

但是使用了get方式后，在某頁進(jìn)行操作再進(jìn)行上面的JS刷新時(shí)會出現(xiàn)行序號紊亂或者分頁信息被重置的問題。

這也是我碰到的一個(gè)坑。

特此記錄一下。

補(bǔ)充知識：關(guān)于python的web框架django和Bootstrap-table的使用

這幾天工作中發(fā)現(xiàn)要使用到Bootstrap的分頁，django也有分頁，但是當(dāng)兩者結(jié)合起來時(shí)發(fā)現(xiàn)，是一個(gè)強(qiáng)大的分頁。

第一次接觸這兩者，結(jié)合起來時(shí)踩了不少坑，因?yàn)樽约菏且粋€(gè)python初學(xué)者，以前是學(xué)的Java，在公司做的python。

自己在網(wǎng)上找到一些資料，但發(fā)現(xiàn)這些資料都說的不明白，所以自己也去看了文檔。

我把自己的代碼貼出來吧。

這個(gè)方法是將你的數(shù)據(jù)跟據(jù)你的頁碼，頁面大小，分好頁

def page(deploy_list ,limit,offset):#查詢分頁，調(diào)用此方法需要傳獲取的數(shù)據(jù)列表，頁面大小，頁碼
  # 取出該表所有數(shù)據(jù)
 try:
  paginator = Paginator(deploy_list, limit) # 每頁顯示10條數(shù)據(jù)
 except Exception:
  print "error"
 page = int(int(offset) / int(limit) + 1)
 data=paginator.page(page)
 response_data = {'total': deploy_list.count(), 'rows': []} # 必須帶有rows和total這2個(gè)key，total表示總頁數(shù)，rows表示每行的內(nèi)容，這兩個(gè)是Bootstrap需要的
 return {"data":data,"response_data":response_data}

調(diào)用上述方法時(shí)將自己需要的數(shù)據(jù)獲取到

def list(request):
 J_data=page(modename.object.all().values(),request.GET.get("limit"),request.GET.get("offset"))#modelname，這個(gè)是你需要查詢的model，modename.object.all().values()，這個(gè)可以根據(jù)自己的查詢條件去更改，例如：modename.object.filter(username=requset.GET.get("username")).values()
 for asset in J_data:
  J_data['response_data']['youmodel ziduan '].append({
   "asset_id":asset["asset_id"],"asset_id":asset["asset_id"],
})
 return HttpResponse(json.dumps(J_data["response_data"])) # 需要json處理下數(shù)據(jù)格式

前臺代碼百度很多，可以自己去寫，這里就不再陳述