使用場景：不使用Django的模版語言進行分頁（網上大多數都使用該方式），使用Jquery DataTable.js 插件進行分頁處理。

本人做的是一個表格監控頁面，該頁面中的table內容每5s刷新一次。

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

故使用Ajax定時刷新獲取最新數據，兩種方案各有優劣，根據實際場景進行抉擇。

代碼如下：

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

引入Datatable css 和 Js，并創建一個table：

<link rel='stylesheet' href='http://m.b3g6.com/bcjs/{% static ’/plugins/bootstrap-datatable/bootstrap-table.css’ %}' rel='external nofollow' ><link rel='stylesheet' href='http://m.b3g6.com/bcjs/{% static ’/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css’ %}' rel='external nofollow' > <table style='width: 100%'></table><script src='http://m.b3g6.com/bcjs/{% static ’/bower_components/datatables.net/js/jquery.dataTables.min.js’ %}'></script><script src='http://m.b3g6.com/bcjs/{% static ’/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js’ %}'></script>

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

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

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

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

即table1!=table2

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

根據官網的描述DataTables的真正威力可以通過使用它提供的API來利用。

關于table2的使用，以后會說明！！！

3.因為同一頁面可能使用多個表格，所以我要多個表格共用的部分提取出來，避免代碼反復編寫：

下面的方法定義了3個參數，

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

urlParam：table中的數據從哪里獲取

columnsParam：table中有哪些列內容

這里要注意下，bProcessing=True這個屬性很重要，這個屬性能很友好的提醒用戶數據正在讀取中，因為讀取服務器數據是要時間的。

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

定義左側顯示參數：

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

定義url地址：

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

定義列內容：

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='http://m.b3g6.com/docker/container?ip=’ + data + ’' rel='external nofollow' class='text-blue'>’ + data + ’</a>’; return strDelete; } }, {title: '操作系統', data: 'os'}, {title: '狀態', data: 'status'}, {title: '創建日期', 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; } }, ];

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

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

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

一般情況下，上述內容已經夠用了。

4.完成表格的初始化：

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

注意，我這里的datatable分頁使用的是post請求， 因為分頁的時候需要向服務端傳遞很多參數，使用get請求的話，這里就很難受了。

5.服務端代碼，返回結果的內容格式是固定的，不要想著去修改：

@csrf_exemptdef 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’]) # 客戶端發送的標識 if item[’name’] == 'iDisplayStart': iDisplayStart = int(item[’value’]) # 起始索引 if item[’name’] == 'iDisplayLength': iDisplayLength = int(item[’value’]) # 每頁顯示的行數 # 獲取最新的時間 last_time = T_Monitor.objects.order_by(’-createTime’).first().createTime # 根據最新的時間獲取監控數據 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進行分頁 paginator = Paginator(monitor_list, iDisplayLength) # 把數據分成10個一頁。 try: monitor_list = paginator.page(iDisplayStart / 10 + 1) # 請求頁數錯誤 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) #對最終的數據進行排序 data = sorted(data, key=lambda item: item[’createTime’]) dataTable[’iTotalRecords’] = resultLength # 數據總條數 dataTable[’sEcho’] = sEcho + 1 dataTable[’iTotalDisplayRecords’] = resultLength # 顯示的條數 dataTable[’aaData’] = data return HttpResponse(json.dumps(dataTable, ensure_ascii=False))

最終的表現結果如下圖：

6.添加定時刷新table的JS

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

最后強調一點，table數據也是可以通過get請求進行加載的。

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

這也是我碰到的一個坑。

特此記錄一下。

補充知識：關于python的web框架django和Bootstrap-table的使用

這幾天工作中發現要使用到Bootstrap的分頁，django也有分頁，但是當兩者結合起來時發現，是一個強大的分頁。

第一次接觸這兩者，結合起來時踩了不少坑，因為自己是一個python初學者，以前是學的Java，在公司做的python。

自己在網上找到一些資料，但發現這些資料都說的不明白，所以自己也去看了文檔。

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

這個方法是將你的數據跟據你的頁碼，頁面大小，分好頁

def page(deploy_list ,limit,offset):#查詢分頁，調用此方法需要傳獲取的數據列表，頁面大小，頁碼 # 取出該表所有數據 try: paginator = Paginator(deploy_list, limit) # 每頁顯示10條數據 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個key，total表示總頁數，rows表示每行的內容，這兩個是Bootstrap需要的 return {'data':data,'response_data':response_data}

調用上述方法時將自己需要的數據獲取到

def list(request): J_data=page(modename.object.all().values(),request.GET.get('limit'),request.GET.get('offset'))#modelname，這個是你需要查詢的model，modename.object.all().values()，這個可以根據自己的查詢條件去更改，例如：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處理下數據格式

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

以上這篇DjangoWeb使用Datatable進行后端分頁的實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。