Datatables使用笔记
2017-07-14 本文已影响496人
oNexiaoyao
项目代码部分展示
引入类库
jquery.dataTables.css和jquery.dataTables.js是datatables的基础样式和js.
如果页面需使用bootstrap的样式，则在引入jquery.datatables.js的同时还需引入对应的dataTables.bootstrap.js，但是样式只需要引入dataTables.bootstrap.css就行了
动态赋值条件查询
//表格初始化
function tableInit() {
//测试数据data
var option = {
// data: data,
paging: true,
processing: true,
lengthChange: false,
pageLength: 5,
searching: true,
destroy: true,
info: false,
ordering: false,
dom: "<'row'<'col-sm-12'tr>>" + "<'row'<li><'col-sm-12'p>>",
language: {
"lengthMenu": "<span class='tabinfo'>每页 _MENU_ 条,</span>",
"info": "<span class='tabinfo'>共 _TOTAL_ 项。</span>",
"infoEmpty": "无记录",
"infoFiltered": "(从 _MAX_ 条记录中筛选)",
"zeroRecords": "对不起, 没有发现任何数据记录",
"loadingRecords": "加载中...",
"processing": "处理中...",
"search": "搜索:",
"paginate": {
"first": "首页",
"last": "尾页",
"next": "下一页",
"previous": "上一页"
},
},
showRowNumber: true,
serverSide: true,
ajax: {
url: API.comment.getCommentList,
type: 'POST',
// dataSrc: "rows",
// data: function(d) {
// }
data: {
"sortType": 0
}
},
columns: [{
data: "phone"
}, {
data: "realname"
}, {
data: "itemName"
}, {
data: "type"
}, {
data: "employeeName"
}, {
data: "star"
}, {
data: "image"
}, {
data: "time"
}],
order: [
[0, null]
],
columnDefs: [{
targets: 0,
data: 'phone',
width: '10%',
orderable: false
}, {
targets: 1,
data: 'realname',
width: '10%',
orderable: false
}, {
targets: 2,
data: 'itemName',
width: '10%',
orderable: false
}, {
targets: 3,
data: 'type',
width: '10%',
orderable: false,
render: function(data, type, row, meta) {
var str = "";
if (row.type == "0") {
str = "服务评价";
}
if (row.type == "1") {
str = "商品评价";
}
return str;
}
}, {
targets: 4,
data: 'employeeName',
width: '10%',
orderable: false
}, {
targets: 5,
data: 'star',
width: '20%',
orderable: false,
render: function(data, type, row, meta) {
var str = '';
var levelLen = parseInt(row.star);
for (var i = 0; i < levelLen && i < 5; i++) {
str += '<span class="glyphicon glyphicon-star" aria-hidden="true"></span>';
}
return str != '' ? str : '暂无';
}
}, {
targets: 6,
data: 'image',
width: '10%',
orderable: false,
render: function(data, type, row, meta) {
var str = "";
// console.log(row.image.length);
if (row.image.length>0) {
str = '<button type="button" class="btn btn-primary tab-btn evaluateImgTb" data-toggle="modal" data-target="#evaluatementImageModal">查看</button>';
}
// if (row.image == "false") {
// str = '无';
// }
return str;
}
}, {
targets: 7,
data: 'time',
width: '20%',
orderable: false,
render: function(data, type, row, meta) {
var str = BS.dateFormatter(row.time, 'yyyy.MM.dd');
return str;
}
}],
initComplete: function(setting, json) {
//如果使用ajax选项来获取数据，则得到服务器返回的数据，否则是 undefined
//console.log(json);
},
drawCallback: function() {
//单选按钮样式
// $('input[type="checkbox"],input[type="radio"]').iCheck({
// checkboxClass: 'icheckbox_square-blue',
// radioClass: 'iradio_square-blue',
// increaseArea: '20%'
// });
}
};
var _tableObj=$("#tab").DataTable(option);
return _tableObj;
}
//初始化表格
var oTable = tableInit();
//点击查询按钮
$('#evaluateBtn').on('click', function() {
// var _url=API.reservation.getReservationList;
// var param = {
// "mobile": $('#evaluateTel').val(),
// "star": $('#evaluateLevel').val(),
// "sortType": 0
// };
var param = {
"sortType": ""
};
if ($('#evaluateOrder').val() == "evaluateTimeOrder") {
param.sortType = "0"
}
if ($('#evaluateOrder').val() == "evaluateLevelOrder") {
param.sortType = "1"
}
if ($('#evaluateTel').val() != '' && $('#evaluateTel').val() != null) {
param.mobile = $('#evaluateTel').val();
}
if ($('#evaluateLevel').val() != '' && $('#evaluateLevel').val() != null) {
param.star = $('#evaluateLevel').val();
}
oTable.settings()[0].ajax.data = param;
oTable.ajax.reload();
})
表格重新绘制及客户端及服务器端序号显示
//点击tab切换后重新绘制百分比表格
datatable.columns.adjust().draw();
//客户端前台页面添加序号
//datatable.on('order.dt search.dt',
//function () {
// datatable.column(0, {
// "search": 'applied',
// "order": 'applied'
// }).nodes().each(function (cell, i) {
// cell.innerHTML = i + 1;
// });
//}).draw();
//服务器端分页实现表格索引号
datatable.on('draw.dt', function () {
datatable.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function (cell, i) {
//i 从0开始，所以这里先加1
i = i + 1;
//服务器模式下获取分页信息，使用 DT 提供的 API 直接获取分页信息
var page = datatable.page.info();
//当前第几页，从0开始
var pageno = page.page;
//每页数据
var length = page.length;
//行号等于 页数*每页数据长度+行号
var columnIndex = (i + pageno * length);
cell.innerHTML = columnIndex;
});
});
当需要在ajax中设置媒体请求类型的时候需要严格按照datatable传参的格式来
以json格式提交
$('#tab').DataTable({
ajax:{
url: apiPathBase + 'Menu/GetChildrenAsync',
type: 'post',
contentType: "application/json; charset=utf-8",
data: function(d) {
d.id = 'root';
return JSON.stringify(d);
}
}
})
动态传递参数
function subMenuDataInitialize(event, treeId, treeNode) {
$('#panel-subMenu .panel-heading strong').text(treeNode.title);
$('#modalEdit-parentName').val(treeNode.title);
$('#modalEdit-parentCode').val(treeNode.id);
var param = {
id: treeNode.id
}
dataTable.settings()[0].ajax.data = function(d) {
d.id = treeNode.id;
return JSON.stringify(d);
}
dataTable.ajax.reload();
// dataTable.ajax.url(apiPathBase + '/Menu/SubMenus?id=' + treeNode.id).load();
}
