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

datatables分页，排序，ajax请求等参数设置相关推荐

ajax请求到参数太大获取参数失败问题,Ajax请求参数较长导致请求失败
Ajax请求参数比较长,第5行参数大概1100个字符吧,是接口的请求报文. $.ajax({ type:"POST", url:"${ctx}/test.action?m ...
Hadoop streaming 排序、分桶参数设置
编写hadoop任务经常需要用到partition和排序.这里记录一下几个参数. 1. 概念 Partition:分桶过程,用户输出的key经过partition分发到不同的reduce里,因而par ...
ajax请求传递参数的方式,Ajax请求一般处理程序参数传递的几种方式
简介这篇文章主要介绍了Ajax请求一般处理程序参数传递的几种方式以及相关的经验技巧,文章约869字,浏览量397,点赞数3,值得参考! //第一种Ajax请求 $.ajax({ type:" ...
Jquery.dataTables分页排序参数详解
属性名称取值局限申明 bAutoWidth true or false, default true 是否主动策画表格各列宽度 bDeferRender true or false, default ...
分页插件 ajax请求,jquery ajax分页插件的简单实现
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...
使用ajax发送数组请求,Ajax请求传递数组参数
var ids = []; var rows=$("#tt").datagrid("getSelections"); for(var i=0; i ids.pu ...
ajax请求参数为中文乱码的情况
解决中文乱码问题的方法有很多. 一.前提是ajax请求传递参数对象到后台,对象中的某个参数的值为中文,到后台之后出现乱码,导致报错.问题解决如下: rest层: 二.在tomcat的server.xm ...
使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
iframe解决跨域ajax请求的方法
iframe跨域的基本前提是,一个页面可以嵌套非同源站点的html文件,以及某一个域名下的html页面可以通过脚本向同域名服务器发出ajax请求.当一个域名为domain1下的页面A想要向domain ...
基于浏览器的http普通请求与ajax请求
发起一个http请求,可以通过浏览器,也可以通过程序去发起.通过程序去发起http请求(比如java中HttpURLConnection),只要是http层的东西都是能够伪造的,当然大部分还是伪造he ...

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

datatables分页，排序，ajax请求等参数设置相关推荐

最新文章

热门文章