CMS之datatable插件使用心得

近期做了些CMS的功能子產品，部分用到了datatable插件，記錄一下使用中的心得。

在使用前引入datatable插件的js和css檔案，這應該不用過多介紹了，接下來進入正題。

1.datatable的初始化，首先在頁面寫一個table就可以，包含一些列标題，給了table一個id，到時候用id初始化datatable。

<table class="display table table-bordered table-striped"  id="blogtable">
       <thead>
              <tr>
                  <th>列标題1</th>
                  <th>列标題2</th>
                  <th>列标題3</th> 
                  <th>列标題4</th>                 
                  <th>列标題5</th>
                  <th>列标題6</th>
                  <th>列标題7</th>               
              </tr>
        </thead>
</table>
           

2.js代碼執行個體化datatable，datatable提供了很多初始化配置，我就以我自己所涉及到的來介紹

var table=$("#blogtable").DataTable({
        order:[["5",'desc']],//清單按照第6列降序排序，升序使用asc，order:[[列的索引，排序類型]]，
        searching:true,//是否在datatable中加入搜尋框
        page:false,
        info:true,
        processing: true,//顯示加載動畫
        serverSide: true,//開啟伺服器模式，即每次隻從伺服器中取出一頁内容，使用者有請求時再操作
        ajax:"<?php echo APP_URL_ROOT.'/controller/function'?>",//datatable擷取資料調用的方法，我是php的即  控制器名/方法名
        columns:[//列定義，每一個{}對應一列的定義,由第一列開始
          {data:"BID",width: "10%"},
          {data:"BTITLE",width: "15%",render:function(data,type,row,meta) {//render可以在表格渲染時對某些列資料做處理，很便捷，過會會細說
            if (data.length>=15) {
              var res=data.substr( 0, 15 )+'...';
            }else{
              var res=data;
            }
             return '<span title="'+data+'">'+res+'</span>' ;
          }},
          {data:"UID",width: "5%"},
          {data:"BCONTENT",width: "40%",render:function(data,type,row,meta) {
          var dd=data.replace(/<\/?.+?>/g,""); 
          var dd2=data;
          return '<span title="'+dd2+'">'+dd.substr( 0, 50 )+'...</span>' ;
          }},
          {data:"BTIME",width: "10%"},
          {data:"BAD",width: "10%"},
          {data:null,width: "10%"}
        ],
        columnDefs:[{//對于特定列的定義
          targets:-1,
          data:null,//選中的特定列為data為null的列，即我這裡的最後一列
          defaultContent:"<button class='btn btn-info btn-xs openblog col-md-3' type='button' title='預覽'><i class='fa fa-eye'></i></button><button class='btn btn-danger btn-xs col-md-3 col-md-offset-3' type='button' id='del' title='删除'><i class='fa fa-trash-o'></i></button>",
        }//在這列我是加入了一些要用的小按鈕，比如編輯呀、删除呀、修改呀等等的自己需要的功能，按需添加
        ]
      });
           

datatable初始化的render裡面的方法，是對datatable渲染時對應列的一些更具體的操作，就舉一個例子吧，如果從背景我們自己傳給datatable的個别列資料的長度太長或者是帶有html格式的文本内容，表格的個别列可能就會換行，導緻個别行過寬，影響整體的美觀，這時候你想對某些列的資料做一些處理時，就可以使用render，之後寫出自己對于傳入資料的處理方法即可。我這裡就是取我需要的部落格内容，可是部落格内容一般很長，可能有些取出來就會讓表格顯示不美觀，我就用了substr來截取部分内容，而把全部内容放入title中，由編輯操作的時候就可以通過去title來取得内容，而不用再一次的向背景請求需要編輯的資料。

最基礎的先寫到這裡，之後會記錄一些用php寫的封裝好的datatable的類用作背景處理和傳回資料，如有不足請各位批評指正。