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