1.data 中使用以下方式可以添加class进行事件定位
1） className可以使用datatable.td.className定位触发事件
例:$('#dataTable').on('click', 'button.show_order_info', function() {});
2） defaultContent可以自己编写通过 datatable.button.classname进行定位
例: $('#dataTable').on( 'click', 'td.details-control', function () {});
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
}
2.获取datatables当前行的值
1）var nRow = $(this).parents('tr')[0];
var audit_status_refund = $('#dataTable').dataTable().fnGetData(nRow)['signup']['audit_status_refund'];
2）var info = table.row(this).data();
var re_id = info['signup']['id'];
3.通过事件点击 显示以及关闭 子td 例：华清后台的财务账号内的助力名单
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) { //判断子tr是否显示
row.child.hide();//是->隐藏
tr.removeClass('shown');//移除class效果
} else {
row.child(format(res)).show();//否->显示
tr.addClass('shown');//添加class效果
}
4.获取当前选中行的数据
table.row( { selected: true } ).data()
5.重新加载数据
table.ajax.reload()
6.datatable触发事件
editor.on('open',function(e, o, action){});
open 打开编辑或添加框
close 关闭模态框
preSubmit 点击确认按钮
7.datatable分页加载数据(非一次性加载)
"ajax": {
url: API_URL,
method: "POST"
},
// 开启服务器端
"serverSide": true,
{
"className": 'details-control',
"orderable": false,
"data": null,
"searchable": false, !!!!禁止搜索框搜索此列
"defaultContent": '
'商品详情图'
}
8.状态保存
$(document).ready(function() {
$('#example').DataTable( {
stateSave: true
} );
} );
DataTables可以保存表的状态（其分页位置，排序状态等），因此可以在用户重新加载页面或在访问子页面后返回该页面时恢复该状态。通过stateSave选项启用此状态保存功能。
9.延迟渲染以提高速度
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data/arrays.txt",
"deferRender": true
} );
} );
10.编辑或添加字段校验
editor.on('preSubmit', function (e, o, action) {
var size = this.field('hqq_goods.size');
if (!size.val()) texture.error('请输入商品尺寸');
if (this.inError()) {
return false;
}
});
11.字段转换对应值以及格式处理
Field::inst('teacher.class_ids')
->options(
Options::inst()
->table("student_class")
->value("id")
->label("name")
)
->getFormatter(function ($val) {
return explode(',', $val);
})
->setFormatter(function ($val) {
return implode(',', $val);
}),
12.弹出框
var index = layer.open({
type: 2,
title: '报名该课程学生列表',
closeBtn: 1,
area: ['900px', '600px'],
maxmin: true,
content: '{:addon_url("yh://TeacherManageController/getStudentList")}?uid=' + uid + '&course_id=' + course_id
});
layer.full(index);
13.打印部分数据
{
'text': "打印",
extend: 'print',
autoPrint: true,
exportOptions: {
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
},
}
https://datatables.net/reference/api/buttons.exportData()
14.动态显示 增加或编辑框 字段
//依赖字段
editor.on('open', function(e, o, action) {
editor.dependent('info.role', function(val, data, callback) {
val = parseInt(val);
if (val == 0) {
return {
show: ["info.student_ids", "info.amount", "info.role"]
};
} else if (val == 1) {
return {
hide: ["info.student_ids", "info.amount"]
};
}
});
});
//不依赖字段
editor.on('open', function (e, data, action) {
if (action == 'create') {
$('#DTE_Field_t-headimgurl_0').parents('.DTE_Field_Type_radio').hide();
$('#DTE_Field_yh_appointment-appointment_type_0').parents('.DTE_Field_Type_radio').show();
}
else if (action == 'edit') {
$('#DTE_Field_yh_appointment-appointment_type_0').parents('.DTE_Field_Type_radio').hide();
$('#DTE_Field_t-headimgurl_0').parents('.DTE_Field_Type_radio').show();
}
});
15.自定义按钮
{
extend: "selectedSingle", //必须选中其中一条数据才可操作
text: '图文详情',
action : function (e, dt, node, config) {
var id = table.row( { selected: true } ).data().banana_org_courses.org_cou_id;
layer.open({
type:2,
title: "图文详情",
maxmin: true,
area: ['800px', '550px'],
content:"{:url('BananaOrgCourses/getOrgCouDetail')}?org_cou_id=" + id
});
}
},