jQuery插件DataTables分頁開發(fā)心得體會(huì)-創(chuàng)新互聯(lián)

寫B(tài)log目的：不是為人氣，只是留份筆記；啰嗦不要緊，只怕有遺漏，以后想不起來。

成都創(chuàng)新互聯(lián)致力于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作,成都網(wǎng)站設(shè)計(jì),集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化，推過標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本，并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付，讓企業(yè)網(wǎng)站從市場競爭中脫穎而出。 選擇成都創(chuàng)新互聯(lián)，就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)！

官網(wǎng)：https://datatables.net/
中文官網(wǎng)：http://datatables.club/

開發(fā)環(huán)境：Python 3.6.0、Anaconda 4.3.1、Django、JetBrains PyCharm 2017.1.5

按我項(xiàng)目的開發(fā)過程簡單整理。

1、第一版本，無分頁。

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

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

        "ajax": {
          "type": "POST",
          "url": "/manage/getlist/",
          "data":{'csrfmiddlewaretoken': '{{ csrf_token }}'}, //Django的token值
          "dataSrc": function (result) { //使用dataSrc屬性來設(shè)置獲取到的數(shù)據(jù)格式，其值是服務(wù)端拼好的key-value（數(shù)據(jù)字段名稱-字段值）【服務(wù)端走了彎路，后續(xù)有時(shí)間再寫文章說明】
            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" , //此列名要與服務(wù)端返回的JSON串中的值一致
            "render": function ( data, type, full, meta ) {
              return '<div >'+data+'</div>';
            }
          },
          //其余字段定義省略
          ]
        });

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前標(biāo)題：jQuery插件DataTables分頁開發(fā)心得體會(huì)-創(chuàng)新互聯(lián)
標(biāo)題URL：http://bm7419.com/article42/dpdeec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)頁設(shè)計(jì)公司、虛擬主機(jī)、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)