javascript - JQuery - DataTables - 在初始化期间无法分配 on() 方法
问题描述
试图在我的 DataTable 上设置重新排序,但我不想将它分配给一个变量来这样做。没有收到任何错误,但也没有收到任何控制台日志(使用第一种方法,第二种方法我确实得到了它们)。
不工作的代码:
$("#records-table-rowreorder").DataTable({
responsive:!0,
"searching": true,
"ordering": false,
buttons:[
{extend:"print",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"copyHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"excelHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"csvHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"pdfHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'}
],
dom:"<'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'p>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
lengthMenu:[[10, 25, 50, -1], [10, 25, 50, "All"]],
pageLength:10,
language:{lengthMenu:"Results _MENU_"},
order:[[1,"asc"]],
rowReorder: {
selector: '.dt-reorder', //'tr>td:not(:last-child)', // I allow all columns for dragdrop except the last
update: false
},
columnDefs:[{
targets:0,
orderable:!1,
className:"dt-checkbox",
render:function(e,t,c,a){return'<label class="kt-checkbox kt-checkbox--single kt-checkbox--solid kt-checkbox--brand"><input type="checkbox" value="'+e+'" class="kt-checkable"><span></span></label>'}
}, {
targets:-2,
orderable:!1,
className:"dt-actions"
}]
}),$(this).on('row-reorder', function (e, diff, edit) {
var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
console.log(result);
for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
var rowData = rrtable.row( diff[i].node ).data();
result += rowData[1]+' updated to be in position '+
diff[i].newData+' (was '+diff[i].oldData+')<br>';
}
console.log('Event result:');
console.log(result);
bootstrapNotify('Event result:<br>'+result);
}), $(this).on("change",".kt-group-checkable",function(){var e=$(this).closest("table").find("td:first-child .kt-checkable"),t=$(this).is(":checked");$(e).each(function(){t?($(this).prop("checked",!0),$(this).closest("tr").addClass("active")):($(this).prop("checked",!1),$(this).closest("tr").removeClass("active"))})}),$(this).on("change","tbody tr .kt-checkbox",function(){$(this).parents("tr").toggleClass("active")});
如果我将它分开,工作正常,但想在初始化期间分配 .on() 如上所述。
var rrtable = $("#records-table-rowreorder").DataTable({
responsive:!0,
"searching": true,
"ordering": false,
buttons:[
{extend:"print",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"copyHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"excelHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"csvHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"pdfHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'}
],
dom:"<'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'p>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
lengthMenu:[[10, 25, 50, -1], [10, 25, 50, "All"]],
pageLength:10,
language:{lengthMenu:"Results _MENU_"},
order:[[1,"asc"]],
rowReorder: {
selector: '.dt-reorder', //'tr>td:not(:last-child)', // I allow all columns for dragdrop except the last
update: false
},
columnDefs:[{
targets:0,
orderable:!1,
className:"dt-checkbox",
render:function(e,t,c,a){return'<label class="kt-checkbox kt-checkbox--single kt-checkbox--solid kt-checkbox--brand"><input type="checkbox" value="'+e+'" class="kt-checkable"><span></span></label>'}
}, {
targets:-2,
orderable:!1,
className:"dt-actions"
}]
});
rrtable.on('row-reorder', function (e, diff, edit) {
var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
console.log(result);
for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
var rowData = rrtable.row( diff[i].node ).data();
result += rowData[1]+' updated to be in position '+
diff[i].newData+' (was '+diff[i].oldData+')<br>';
}
console.log('Event result:');
console.log(result);
bootstrapNotify('Event result:<br>'+result);
});
rrtable.on("change",".kt-group-checkable",function(){var e=$(this).closest("table").find("td:first-child .kt-checkable"),t=$(this).is(":checked");$(e).each(function(){t?($(this).prop("checked",!0),$(this).closest("tr").addClass("active")):($(this).prop("checked",!1),$(this).closest("tr").removeClass("active"))})}),$(this).on("change","tbody tr .kt-checkbox",function(){$(this).parents("tr").toggleClass("active")});
解决方案
你可以像这样链接它:
$("#records-table-rowreorder").DataTable({
responsive:!0,
"searching": true,
"ordering": false,
buttons:[
{extend:"print",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"copyHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"excelHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"csvHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'},
{extend:"pdfHtml5",exportOptions:{columns:":not(.no-export)"},title: 'Export'}
],
dom:"<'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-6'i><'col-sm-12 col-md-6'p>><'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-6 text-left'f><'col-sm-12 col-md-6 text-right'l>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
lengthMenu:[[10, 25, 50, -1], [10, 25, 50, "All"]],
pageLength:10,
language:{lengthMenu:"Results _MENU_"},
order:[[1,"asc"]],
rowReorder: {
selector: '.dt-reorder', //'tr>td:not(:last-child)', // I allow all columns for dragdrop except the last
update: false
},
columnDefs:[{
targets:0,
orderable:!1,
className:"dt-checkbox",
render:function(e,t,c,a){return'<label class="kt-checkbox kt-checkbox--single kt-checkbox--solid kt-checkbox--brand"><input type="checkbox" value="'+e+'" class="kt-checkable"><span></span></label>'}
}, {
targets:-2,
orderable:!1,
className:"dt-actions"
}]
})
.on('row-reorder', function (e, diff, edit) {
var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>';
console.log(result);
for ( var i=0, ien=diff.length ; i<ien ; i++ ) {
var rowData = rrtable.row( diff[i].node ).data();
result += rowData[1]+' updated to be in position '+
diff[i].newData+' (was '+diff[i].oldData+')<br>';
}
console.log('Event result:');
console.log(result);
bootstrapNotify('Event result:<br>'+result);
})
.on("change",".kt-group-checkable",function(){var e=$(this).closest("table").find("td:first-child .kt-checkable"),t=$(this).is(":checked");$(e).each(function(){t?($(this).prop("checked",!0),$(this).closest("tr").addClass("active")):($(this).prop("checked",!1),$(this).closest("tr").removeClass("active"))})}),$(this).on("change","tbody tr .kt-checkbox",function(){$(this).parents("tr").toggleClass("active")});
推荐阅读
- java - android 凌空超时错误
- raspberry-pi3 - OpenDayLight 控制器不显示 Open vSwitch
- python - 如何将扫描数据(主题)保存在 npy 文件中?
- javascript - 如何从网站获取 HTML 元素?
- c++ - 加载 OBJ 文件时出现分段错误
- html5-canvas - 即使在慢速计算机上也可以使用 CanvasCaptureMediaStream 以恒定 fps 录制
- c++ - 在unordered_set中,find和count比较快,编译器优化对其效率有什么影响?
- java - Fragment onStart 在当前 Fragment 中被激活
- java - 如何以编程方式从android上已安装的应用程序中显示特定应用程序的图标?
- android - 如何使用 VideoSupportFragment 在 TV 倾斜应用程序中捕获触摸事件以显示视频控件?