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();

效果展示

datatables分页,排序,ajax请求等参数设置_第1张图片

***注意***

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


你可能感兴趣的:(datatables填坑之路)