做爰高潮a片〈毛片〉,尤物av天堂一区二区在线观看,一本久久A久久精品VR综合,添女人荫蒂全部过程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
主站蜘蛛池模板: 平定县| 郴州市| 南岸区| 武邑县| 永寿县| 江西省| 嘉黎县| 玉树县| 东宁县| 惠安县| 上犹县| 杭州市| 上林县| 濮阳市| 鄢陵县| 大同市| 永仁县| 广东省| 横山县| 金门县| 湘阴县| 塘沽区| 柏乡县| 甘孜县| 武穴市| 阜新市| 贺兰县| 荔浦县| 襄垣县| 宿州市| 白朗县| 舟山市| 宜君县| 无为县| 阳信县| 普洱| 襄樊市| 康保县| 洪江市| 曲阳县| 封丘县|