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"

####操作表####

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() //设定某一单元格的值 并重绘使正常显示