国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

jQuery插件DataTables分頁開發心得體會

來源:懂視網 責編:小采 時間:2020-11-27 22:32:00
文檔

jQuery插件DataTables分頁開發心得體會

jQuery插件DataTables分頁開發心得體會:寫Blog目的:不是為人氣,只是留份筆記;啰嗦不要緊,只怕有遺漏,以后想不起來。 官網:https://datatables.net/ 中文官網:http://datatables.club/ 開發環境:Python 3.6.0、Anaconda 4.3.1、Django、JetBrains PyCharm
推薦度:
導讀jQuery插件DataTables分頁開發心得體會:寫Blog目的:不是為人氣,只是留份筆記;啰嗦不要緊,只怕有遺漏,以后想不起來。 官網:https://datatables.net/ 中文官網:http://datatables.club/ 開發環境:Python 3.6.0、Anaconda 4.3.1、Django、JetBrains PyCharm

寫Blog目的:不是為人氣,只是留份筆記;啰嗦不要緊,只怕有遺漏,以后想不起來。

官網:https://datatables.net/
中文官網:http://datatables.club/

開發環境:Python 3.6.0、Anaconda 4.3.1、Django、JetBrains PyCharm 2017.1.5

按我項目的開發過程簡單整理。

1、第一版本,無分頁。

在此之前有用到過DataTables(更多的是easyui中的Datagrid,另之前服務端是PHP),因此想著前端/客戶端差異不大,服務端反正都是按規范格式返回JSON串(Django的代碼后續再整理)。另外,剛開始也沒想著表格分頁,只是有三個字段排序需求(排序已在服務端做好并返回)。
DataTables基礎代碼:

//表格的HTML代碼略過
$('#dtList').DataTable({
 "bPaginate": false, //翻頁功能
 "bInfo": false,//頁腳信息
 "ordering": false, //不排序
 "searching": false, //搜索框,不顯示
 "bLengthChange": false, //改變每頁顯示數據數量,不顯示
 "iDisplayLength": 10, //每頁默認顯示數量(不顯示了,這個設置也起不了作用)
 "serverSide":true, //服務端
 "retrieve":false, //意思是如果已經初始化了,則繼續使用之前的Datatables實例。

 "ajax": {
 "type": "POST",
 "url": "/manage/getlist/",
 "data":{'csrfmiddlewaretoken': '{{ csrf_token }}'}, //Django的token值
 "dataSrc": function (result) { //使用dataSrc屬性來設置獲取到的數據格式,其值是服務端拼好的key-value(數據字段名稱-字段值)【服務端走了彎路,后續有時間再寫文章說明】
 var json = JSON.parse(result).data;
 return json;
 }
 },
 "columns": [ //表格要顯示的列定義(字段名稱做了處理)
 { "data": "field0",
 "visible":false,
 "render": function ( data, type, full, meta ) {
 //return '<input type="checkbox"/>';
 return data;
 }
 },
 { "data": "field1" },
 { "data": "field2" , //此列名要與服務端返回的JSON串中的值一致
 "render": function ( data, type, full, meta ) {
 return '<div style="text-align:left">'+data+'</div>';
 }
 },
 //其余字段定義省略
 ]
 });

2、加上分頁功能

第一個程序寫好幾天后就準備加上分頁功能。
DataTables的JSON串格式要求:

{
 "draw": n, 
 "recordsTotal": n, //總記錄數
 "recordsFiltered": n, //條件過濾后的記錄數,與總記錄數可能會不同
 "data": [{}] //獲取到的記錄集合
}

按照之前處理easyui中Datagrid組件的經驗,得到總記錄數,篩選后的記錄數等值,拼好JSON串回傳就行,客戶端可以直接實現分頁。

可是,問題來了:draw的值怎么控制?

查了資料,也跟蹤了下瀏覽器的header,知道draw是DataTables本身的一個屬性值 ,每次獲取數據時都會向服務端傳,不需要改這個值,直接在JSON串中回傳就好。試了下,不知道問題出在哪,好像分頁也不行,而且總感覺這種控制方法有點累。

換個思路再查資料,就是服務端分頁(按需請求相應數據),還真有:django-datatables-view(datatables for django,https://pypi.python.org/pypi/django-datatables-view),按其安裝步驟來就好,這樣子就不用考慮JSON串幾個值怎么拼的問題了,這個組件會做好。

改進后的前端代碼:

$('#dtList').DataTable({
 "bPaginate": true, //翻頁功能
 "bInfo": true,//頁腳信息
 "ordering":true, //開啟排序
 "searching": false, //搜索框,不顯示
 "bLengthChange": true, //改變每頁顯示數據數量,不顯示
 "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]], //每頁顯示記錄菜單選項
 "iDisplayLength": 10, //每頁默認顯示數量
 "serverSide":true, //開啟服務端請求模式
 'pagingType': 'full_numbers',
 "retrieve":true,

 "ajax": { //這邊就不需要dataSrc屬性來處理值了
 "type": "GET",
 "url": "{% url 'scheme_list_json' %}",
 "data":{
 'sSearch':'',
 'csrfmiddlewaretoken': '{{ csrf_token }}'},
 },
 "columns": [ //表格要顯示的列定義
 { "data": 0,
 "visible":false,
 "render": function ( data, type, full, meta ) {
 //return '<input type="checkbox"/>';
 return data;
 }
 },
 { "data": 1
 "bSortable":false
 },
 { "data": 2,
 "bSortable":false, //此字段不排序
 "render": function ( data, type, full, meta ) {
 return '<div style="text-align:left">'+data+'</div>';
 }
 },
 //其余字段定義省略
 ......
 ],
 "aaSorting": [ //指定排序的列(索引從0開始)及規則
 [ 8, "asc" ],
 [ 9, "asc" ],
 [ 10, "desc" ]
 ],
 "drawCallback": function( settings ) { //繪制表格時的回調函數
 $("th").removeClass("sorting_asc"); //刪除排序圖標,升序樣式
 $("th").removeClass("sorting_desc");//降序樣式 
 });

排序成功,但問題來了:開啟排序功能后,表頭行中會有排序的圖標,但我們不需要它(只是排序,不需要點擊),所以加上上面代碼中的drawCallback回調函數,去掉其樣式就好。
PS:
有個坑-服務端的回傳字段和排序字段的列數一定要一一對應,前端DataTables顯示字段columns定義也要按這個順序來,否則前端排序會亂,如:

 # 需要顯示的字段
 columns = ['jyjhbid', 'tzbd', 'clsc', 'clzt', 'jlscrq', 'jlxgrq', 'clcz'] 

 # 排序
 order_columns = ['jyjhbid', 'tzbd', 'clsc', 'clzt', 'jlscrq', 'jlxgrq', 'clcz']

剛接觸django-datatables-view,以為這兩個集合值可以不同,所以。。多走了些路。

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

jQuery插件DataTables分頁開發心得體會

jQuery插件DataTables分頁開發心得體會:寫Blog目的:不是為人氣,只是留份筆記;啰嗦不要緊,只怕有遺漏,以后想不起來。 官網:https://datatables.net/ 中文官網:http://datatables.club/ 開發環境:Python 3.6.0、Anaconda 4.3.1、Django、JetBrains PyCharm
推薦度:
標簽: 插件 分頁 總結
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 久久se精品一区二区国产 | 国产欧美日韩视频在线观看 | 国产一区二区精品久久 | 精品久久久久久久一区二区手机版 | 国产亚洲欧美另类一区二区三区 | 亚洲精品日韩中文字幕久久久 | 亚洲精品国产精品精 | 国产成人精品日本亚洲11 | 二区久久国产乱子伦免费精品 | 北条麻妃在线观看 | 欧洲精品一区二区三区 | 亚洲精品乱码久久久久久v 亚洲精品免费观看 | 亚洲一区二区在线成人 | 久久精品国产999久久久 | 国产精品高清一区二区三区 | 亚洲一级二级 | 97一区二区三区四区久久 | 国产精品亚洲片在线观看不卡 | 在线观看日韩精品 | 欧美高清在线精品一区二区不卡 | 国产a免费视频 | 中文字幕一区二区三区不卡 | 日韩亚洲欧美一区二区三区 | 国产高清在线播放免费观看 | 久操视频免费看 | 免费精品国产日韩热久久 | 国产偷窥女洗浴在线观看 | 亚洲免费久久 | 欧美亚洲综合在线观看 | 欧美成人一区二区三区在线视频 | 精品国产一区二区三区成人 | 边做边爱边吃奶叫床的视频 | 女人与公拘交酡全过程 | 久久精品视频一区二区三区 | 在线国产视频 | 欧美曰韩 | 日韩成人精品在线 | 国产一区精品在线观看 | 亚洲图区欧美 | 国产成人精品免费视频大全五级 | 在线不欧美 |