datatables是一个jq的table插件,可以很方便的操作表格元素
1、引用dataTables插件
(1)引入css样式
<link rel="stylesheet" type="text/css" href="/css/jquery.dataTables.css">
(2)引入jquery
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
(3)引入jquer.dataTables.js
<script type="text/javascript" src="/js/jquery.dataTables.js"></script>
2、准备table模板
<table class="table table-striped table-bordered table-hover" id="student">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
</table>
3、初始化模板(获取数据信息,以服务器模式)
var initGrid = function () {
configMap.studentGrid = $('#student').DataTable({
"dom": 'rt<"row"<"col-md-6"<"pull-left"i><"pull-left"l>><"col-md-6"p>><"clear">',
"order": [[0, 'asc']],
columnDefs: [{
orderable: false,//禁用排序
targets: [1, 2, 3, 4], //指定的列
}],
"ordering": false, //屏蔽排序
"searching": false,//屏蔽datatales的查询框
"paging":true,
"autoWidth": false,
// "bInfo" : false,
"lengthMenu": [5,10],
// "pagingType": "full_numbers",
// "processing": true,
"serverSide" : true,//是否开启服务器模式,true 分页,过滤,排序处理都放在服务器端进行
ajax:{
'url':'',//请求的url地址
'type':'GET',
'dataSrc':function (data) { //定义从服务区返回什么样的数据
console.info(data);
if(data.success){
return data;
}else{
return "";
}
},
'data':function (data) {//设置请求的参数
data.state=true;//参数以data.加参数名的形式设置 如传惨数查询条件 data.search='hh'
data.dataTime='';
}
},
"columns": [//设置列对应的参数
{"data": "product.name"},
{
"data": "name"
}
},
{
"data": "age"
},
{
"data": "sex"
}
],
"language": {
url: ‘datatables/chinese.json’ //语言包
},
"drawCallback": function () { // 数据加载完成后执行
}
});
};