datatables分页，排序，ajax请求等参数设置
1.引入必要的css和js
2.html结构| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320.800,00 |
| Donna Snider | Customer Support | New York | 27 | 2011/01/25 | $112.000,00 |
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() //设定某一单元格的值 并重绘使正常显示
————————————————
版权声明：本文为CSDN博主「cyyy1223」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/cyyy1223/article/details/78725438