DataTables.js的那些坑

jquery表单插件DataTables.js适合后台列表，它的官方文档很完整，可用于免费商用，有免费社区支持，如果想要获取更好的支持，可在它的官方花钱获取技术支持，放链接：

DataTables.js官方：https://datatables.net/

DataTables.js下载：https://datatables.net/download/index

几个例子都可以当入手，这些先不说，说一下那些坑：

一、调用Ajax接口获取数据渲染表格：

第一次接触时，接口返回明明正常，也按了官方服务器处理的方法做，可是渲染还是出错

返回数据：

 
 

  
  {
 
 
 
 

  
      
  
  "draw"
  
  : 1,
 
 
 
 

  
      
  
  "recordsTotal"
  
  : 57,
 
 
 
 

  
      
  
  "recordsFiltered"
  
  : 57,
 
 
 
 

  
      
  
  "data"
  
  : [
 
 
 
 

  
          
  
  [
 
 
 
 

  
              
  
  "Angelica"
  
  ,
 
 
 
 

  
              
  
  "Ramos"
  
  ,
 
 
 
 

  
              
  
  "System Architect"
  
  ,
 
 
 
 

  
              
  
  "London"
  
  ,
 
 
 
 

  
              
  
  "9th Oct 09"
  
  ,
 
 
 
 

  
              
  
  "$2,875"
 
 
 
 

  
          
  
  ],
 
 
 
 

  
          
  
  [
 
 
 
 

  
              
  
  "Ashton"
  
  ,
 
 
 
 

  
              
  
  "Cox"
  
  ,
 
 
 
 

  
              
  
  "Technical Author"
  
  ,
 
 
 
 

  
              
  
  "San Francisco"
  
  ,
 
 
 
 

  
              
  
  "12th Jan 09"
  
  ,
 
 
 
 

  
              
  
  "$4,800"
  
  
 
 
 
 

  
          
  
  ],
 
 
 
 

  
      
  
  ]
 
 
 
 

  
  }
 
 

DataTables配置：

$( '#example' ).DataTable( {

         "processing" :  true ,

         "serverSide" :  true ,
        "dataSrcd": true,


         "ajax" :  "scripts/server_processing.php"

  } );

json数据明明有data，我想了想，可能是渲染时找不到data,于是，我在ajax配置再追加

$( '#example' ).DataTable( {

         "processing" :  true ,

         "serverSide" :  true ,
        "dataSrcd": true,


         "ajax" :  "scripts/server_processing.php",
        "dataFilter":function (data) {
           var getData = JSON.parse(data);

           var newdata = {
              draw: getData.d.Draw,
              recordsTotal: getData.d.RecordsTotal,
              recordsFiltered: getData.d.RecordsFiltered,
              data: getData.d.Data,
              error: getData.d.Error
         }


  } );

这是我写好的，现在可以了，之前失败原因是因为读取json数据找不到data，如{d:"{.....}"}的第一级是d,而且DataTables只默认从第一级找data，所以找不到，需要转换对象就行

到此为止，下次讲DataTables分页插件,这是我第一次写博客，有不对的地方请多包涵多指教