datatables分页，排序，ajax请求等参数设置

1.引入必要的css和js

 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
 <script src="js/jquery.js"></script>
 <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

2.html结构

<table id="example" class="display" cellspacing="0" width="100%">
       <thead>
       <tr>
           <th>Name</th>
           <th>Position</th>
           <th>Office</th>
           <th>Age</th>
           <th>Start date</th>
           <th>Salary</th>
       </tr>
       </thead>
       <tbody>
       <tr>
           <td>Tiger Nixon</td>
           <td>System Architect</td>
           <td>Edinburgh</td>
           <td>61</td>
           <td>2011/04/25</td>
           <td>$320.800,00</td>
       </tr>
       <tr>
           <td>Donna Snider</td>
           <td>Customer Support</td>
           <td>New York</td>
           <td>27</td>
           <td>2011/01/25</td>
           <td>$112.000,00</td>
       </tr>
       </tbody>
   </table>

3.js中只需调用Datatable()方法即可

  $("#example").DataTable();

效果展示

***注意***

Datatable()中只有一个参数即为对象，可更改表格默认设置 格式为Datatable({'属性1:'值1','属性2:'值2'....})

#####参数说明#####

一：常规配置参数

info 控制总数信息(右下角显示总数和过滤条件)的显示 ，默认true

order:[[参数1,'参数2']]  参数1为某一列的索引值（0开始），参数2值为desc,asc //指定某一列为降序或者升序

paging 是否有分页功能，默认true

lengthChange是否显示分页下拉列表，默认true

ordering:是否排序，默认true

searching:是否有搜索功能，默认true

pagingType:值有number,simple,simple_numbers等

language:{

 zeroRecords:'抱歉,没有检索到数据',

 search:'xx',  // 将英文search改为中文

 searchPlaceholder:'请输入',//搜索框提示功能

 lengthMenu:'每页显示_MENU_条记录',

 info:'显示第_START_到第_END_条记录，共_TOTAL_条',

 paginate:{'next':'下页','previous':'下页','first':'第一页','last':'最后一页'},

 infoEmpty:'没有数据',

 infoFiltered:"(从_MAX_条数据检索)",

    }  //中文显示

二：ajax数据请求参数

ajax:{"url": "", 请求地址
    "type": "",请求的方式
    "data": {},请求时传递到服务器的参数
    "dataType": "",返回类型，有json，text，jsonp,xml等格式

    "dataSrc":function(data){

return data.xx //获取服务器返回的数据

}

    }

columns:[{'data':'值1'}，{"data":"值2"，"render":function(data,type,full){return xx //此方法中的参数data指的是json文件中值2所对应的值}},{"data":null,"render":function(data,type,full){return 值1 //该值1将被显示在表上,此方法中的参数data指的是整个json文件中的数据}

  ]

columnDefs:[{'targets':[3],'visiblie':'true','searchable':false}]

值1,值2为json文件中data属性对应的值（数组）中多个对象的属性名（一一对应）

值1也可为null,代表不显示

值2后的render对应的方法代表可对获取的数据进行进一步处理

详情参考ajax数据请求

注意：columns和columnDefs的区别

   columns中的个数必须与表中列的个数一致

 columnDefs可对某一列进行处理 例如columnDefs:[{'targets':[3],'visiblie':true,'searchable':false,'sortable':false}]  //使表格第四列不显示不可搜索不可排序

举个例子

 以下文件是ajax请求的文件 "data/objects.txt"

{"data" : [

     {

       "name" :  "Tiger Nixon" ,

       "position" :  "System Architect" ,

       "salary" :  "$320,800" ,

       "start_date" :  "2011/04/25" ,

       "office" :  "Edinburgh" ,

       "extn" :  "5421"

     }]

}

则要是表能显示请求的数据则"data/objects.txt"中的属性名应该与columns中的data的属性值一致

"columns" : [

             {  "data" :  "name"  },

             {  "data" :  "position"  },

             {  "data" :  "office"  },

             {  "data" :  "extn"  },

             {  "data" :  "start_date"  },

             {  "data" :  "salary"  }

         ]

3.不进行ajax请求时的参数

data:[[行1值，行1值],[行2值，行2值]] //传入表中的每一行数据


columns:[{'title','标题1'}] //设置表的标题

则HTML结构仅写一个空的div即可

####操作表####

let table=$("#example").Datatable()

  1.操作行

table.data() 或 table.rows().data() 获取表中的数据 ，可使用.toArray()做进一步处理

table.row.add([值1，值2，值3]).draw()   向表中添加一行数据添加数据后需要重绘\

table.rows().remove().draw() 删除所有行

table.rows(selector).remove().draw()根据选择器删除指定行

table.row(xx).remove().draw()//通常用于点击该行按钮删除该行

    2.操作列

table.column(index).data() index是0开始的某一列索引//获取某一列的数据

table.columns('selector').data() //根据选择器获取列的数据

 3.单元格

table.cell(num1,num2).data()获取某一单元格的值

table.cell(num1,num2).data(值).draw() //设定某一单元格的值 并重绘使正常显示