datatableajax⽰例，表格插件之⼀datatables（⽰例代码）datatables的基础使⽤
引⼊css⽂件dataTables.bootstrap.css
引⼊js插件dataTables
引⼊js⽂件：jquery.dataTables.js，dataTables.bootstrap.js
Js调⽤：
$(".dataTables-example").dataTable();
html部分：
展⽰效果如下，功能都能操作
但是⼀般我们不需要按条分页还有搜索，只需要分页，我们可以配置相关参数
例如 去掉排序：
$(".dataTables-example").dataTable(
{
"ordering": false,
"searching": false
}
);
去掉搜索
$(".dataTables-example").dataTable(
{
"ordering": false,
"searching": false,
"lengthChange": false
}
这样上⾯图⽚就只有分页了。
ajax 异步取数
参数是ajax，相信⼤家不陌⽣，⽤过jQuery的⼈对这个应该很熟悉。dt是基于jquery做的表格插件，所以dt在读取数据时也⽤了jquery的ajax，虽然是类似，但是有加强，下⾯看ajax的⽤法吧。 基本语法：
js 调⽤：
$("#example").DataTable({
ajax:"dada.json",
colunms:[
{data,"name"},
{data,"age"}
]
});
json部分是：
{
"data":[
{
"name"："datatable中⽂⽹","age"："2"
},
{
"name"："datatable中⽂⽹","age"："3"
}
]
}
js 调⽤可以更简单：
$("#example").DataTable({
ajax:"dada.json"
});
json 使⽤数组格式
{
"data":[
["name"："datatable中⽂⽹","age"："2"], ["name"："datatable中⽂⽹","age"："3"]
jquery ajax例子]
}
如果想让表格头部固定⾼度可以增加配置参数scrollY: "300px" 300px 是⾃⼰⾃定义的数Datatables更多应⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。