dataTables的使用
2017-02-10 本文已影响841人
后知不觉1
一、datatable的初始化
引入资源文件
1.原滋原味的datatable样式
<link rel="stylesheet" href="/static/plugins/datatables/dataTables.css">
<script src="jquery.js"><script>
<script src="plugins/datatables/dataTables.js"><script>
<script>
$("#example").dataTable({
})
</script>
2.基于bootstrap样式引入静态资源
<link rel="stylesheet" href="less/bootstrap.css">
<link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css">
<script src="jquery.js"><script>
<script src="bootstrap.js"><script>
<script src="plugins/datatables/dataTables.js"><script>
<script src="../plugins/datatables/dataTables.bootstrap.js"></script>
<script>
$("#example").dataTable({
})
</script>
ps:datatables.bootstrap.js是为了给table中的dom元素加上bootstrap样式类名使页面在渲染的时候能够按照bootstrap的样式进行渲染，这里也必须引入datatable.js
3.基于jqueryUI的资源引入与bootstrap的差不多
二、datatable的数据
1.数据写在页面中
**html**
<table id="dataTable" class="display text-center cell-border table-bordered " cellspacing="0" style="width:100%;line-height:60px;" >
<thead>
<tr>
<th class="tableTrborder">用户ID</th>
<th class="tableTrborder">用户名</th>
<th class="tableTrborder">创建时间</th>
<th class="tableTrborder">更新时间</th>
<th class="tableTrborder">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>用户ID1</td>
<td>用户名$</td>
<td>2016-12-26</td>
<td>2017-1-6</td>
<td>
<button class="btn btn-primary btn-small" >编辑</button>
<button class="btn btn-danger btn-small" >删除</button>
</td>
</tr>
</tbody>
</table>
**js部分**
<script>
//初始化页面配置
var lang = {
"sProcessing": "数据加载中...",
"sLengthMenu": "每页 _MENU_ 项",
"sZeroRecords": "没有匹配结果",
"sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
"sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空,可以尝试修改上面各选项再次查找",
"sLoadingRecords": "数据加载中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页",
"sJump": "跳转"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
};
$("#example").dataTable({
"language":lang，
"destroy":true, //这个如果不加的话不能够再次调用这个函数
//文字中文化
})
</script>
2.Ajax直接请求数据 ps:直接请求的要符合datatable的数据格式要求，无论是object格式的还是arry数组格式的
**html**
<table id="dataTable" class="display text-center cell-border table-bordered " cellspacing="0" style="width:100%;line-height:60px;" >
<thead>
<tr>
<th>用户名称</th>
<th>用户ID</th>
<th>创建日期</th>
<th>更新日期</th>
</tr>
</thead>
</table>
**js部分**
$("#dataTable").dataTable({
"language": lang,
"ajax": '/ajax',
"columns": [
{ "data": "useName" },
{ "data": "userId" },
{ "data": "createTime" },
{ "data": "updateTime" }
]
});
**返回的数据格式**(object)因为使用规定的数据格式，后台修改参数的原因可以使用**自定义Ajax加载数据格式**
{"data":[
{
"useName":"hult",
"userId":"gmbub2",
"createTime":"2012-10-06",
"updateTime":"1976-05-30"
},
{
"useName":"qtik",
"userId":"nsgta6",
"createTime":"1980-12-14",
"updateTime":"2004-07-24"
},
{
"useName":"grqw",
"userId":"bpkci8",
"createTime":"1980-06-06",
"updateTime":"1984-03-17"
}
]}
3.自定义Ajax直接请求数据 ps:就是使用回调函数处理数据然后再返回
**html** ps:直接可以去掉<thead>标签直接在页面中写
<table id="dataTable" class="display text-center cell-border table-bordered " cellspacing="0" style="width:100%;line-height:60px;" >
</table>
**js部分**
$("#dataTable").dataTable({
"language": lang,
"destroy":true, //这个如果不加的话不能够再次调用这个函数
"ajax":function (data,callback,setting) {
$.ajax({
url:"/defined",
success:function (returnData) {
//这边只是为了修改数据的格式使其符合datatable的数据格式
console.log(data);
var result={};
result.data=returnData.tian;
callback(result)
}
})
},
"columns": [
{
"data": "useName",
"title":"用户名称"
},
{
"data": "userId",
"title":"用户ID"
},
{
"data": "createTime",
"title":"创建日期"
},
{
"data": "updateTime",
"title":"更新日期"
}
]
});
**返回数据**
{
"tian":[
{
"useName":"mhrs",
"userId":"eqrho10",
"createTime":"2007-01-21",
"updateTime":"2011-03-29"
},
{
"useName":"llmf",
"userId":"ynycd3",
"createTime":"1985-01-10",
"updateTime":"2003-11-14"
},
{
"useName":"nfmw",
"userId":"hrctz4",
"createTime":"2013-01-19",
"updateTime":"1976-07-13"
}
]
}
4.自定义Ajax直接请求数据开启服务器模式 ps:就是后台数据量非常大的时候这时候就要启用这个模式，因为数据量太大耗费浏览器的资源太多，所以才有服务器模式，就是每次只请求一个分页的数据，这是就要将一个页面的展示多少条，排序的参数，搜索的关键字都要通过回调函数的function(data,callback,setting){}中的data参数获取，处理然后再传给ajax的参数中
**html** ps:直接可以去掉<thead>标签直接在页面中写
<table id="dataTable" class="display text-center cell-border table-bordered " cellspacing="0" style="width:100%;line-height:60px;" >
</table>
**js部分**
function getParamter(event) {
var query={};
query={
"keyWord": event.search.value, //搜索的关键字
"order": event.order, //排序
"currentPage": event.length //当前页多少数据
};
return query
}
$("#dataTable").dataTable({
"language": lang,
"destroy":true, //这个如果不加的话不能够再次调用这个函数
"serverSide": true,
//主要的区别
ajax:function (data,callback,setting) {
console.log(data,'t');//服务器开启的时候会有一个对象，若果不是服务器模式不会有数据
console.log(callback,'z');//回调函数
console.log(setting,'h');
$.ajax({
url:"/defined",
data:JSON.stringify(getParamter(data)),
success:function (data) {
//这边只是为了修改数据的格式使其符合datatable的数据格式
console.log(data);
var result={};
result.data=data.tian;
result.recordsFiltered =100;
result.recordsTotal = 10;
callback(result)
}
})
},
"columns": [
{
"data": "useName",
"title":"用户名称"
},
{
"data": "userId",
"title":"用户ID"
},
{
"data": "createTime",
"title":"创建日期"
},
{
"data": "updateTime",
"title":"更新日期"
}
]
});
