我有一个 DataTables 表，其中一些标题列中有复选框和弹出窗口。 （另外我也使用FixedColumn和ColReorder插件）。我在 jsfiddle 中的模型位于底部
我的问题是，如果用户尝试检查复选框或推送弹出窗口，排序事件就会接管一切。 jsfiddle 页面无法完全运行，因为在我的应用程序中，我收到了复选框单击的事件，但当时为时已晚，排序也会发生。
排序图标只是标题单元格的背景 CSS，排序事件由 DataTables 为整个标题单元格注册。
解决这个问题的计划：
- 注册处理程序并尝试阻止 Datatables 自己的处理程序运行。截至目前，如果我还为标题单元格注册了一个事件处理程序，那么我只会在 DataTable 的处理程序之后获取该事件，事件按注册顺序传递。我还为复选框和弹出窗口本身注册了处理程序，但这些处理程序也仅在 DataTables 的处理程序（冒泡）之后传递。
只有当我能够在 DataTables 自己的处理程序之前注册我的处理程序时，这才有效，但我还没有找到执行此操作的入口点。当事件注册时，表 DOM 应该已经生成。现在我看到时机已经晚了，我只能报名了。
- 找到一个 API 调用点，我可以在其中取消 DataTables 的排序。订单事件 (http://datatables.net/reference/event/order http://datatables.net/reference/event/order）似乎是事后，我看不到取消的方法。
- 在某些时候，我重组了非固定列标题以包含两行：顶行用于排序，底部包含我的复选框和弹出控件。这似乎有效，但事实证明它不适用于 ColReorder 插件。我需要那个插件，它只重新排序了标题的顶行，底部保留在那里。如果我能解决这个问题，这也将是一个解决方案。
http://jsfiddle.net/csabath/pgue1sf5/8/ http://jsfiddle.net/csabatoth/pgue1sf5/8/
var initPage = function () {
var columnsArray = [
{ "title": "index", "class": "dt-center" },
{ "title": "lastname", "class": "dt-head-center dt-body-left" },
{ "title": "firstname", "class": "dt-head-center dt-body-left" },
{ "title": '<div>foo1</div><input type="checkbox" class="filterchk" checked="checked"> <select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-head-center dt-body-left" },
{ "title": '<div>foo2</div><input type="checkbox" class="filterchk" checked="checked"> <select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
{ "title": '<div>foo3</div><input type="checkbox" class="filterchk" checked="checked"> <select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
{ "title": '<div>foo4</div><input type="checkbox" class="filterchk" checked="checked"> <select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
{ "title": '<div>bar1</div><input type="checkbox" class="filterchk" checked="checked"> <select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
{ "title": '<div>bar2</div><input type="checkbox" class="filterchk" checked="checked"> <select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" },
{ "title": '<div>bar3</div><input type="checkbox" class="filterchk" checked="checked"> <select class="paramsel"><option value="1" selected="selected"/><option value="2"/><option value="3"/></select>', "class": "dt-center rulecolumn" }
];
var dataArray = [
[ 1, "aaa", "rrr", "x", "x", "x", "x", "x", "x", "x" ],
[ 2, "bbb", "qqq", "x", "x", "x", "x", "x", "x", "x" ],
[ 3, "ccc", "ppp", "x", "x", "x", "x", "x", "x", "x" ],
[ 4, "ddd", "ooo", "x", "x", "x", "x", "x", "x", "x" ],
[ 5, "eee", "nnn", "x", "x", "x", "x", "x", "x", "x" ],
[ 6, "fff", "mmm", "x", "x", "x", "x", "x", "x", "x" ],
[ 7, "ggg", "lll", "x", "x", "x", "x", "x", "x", "x" ],
[ 8, "hhh", "kkk", "x", "x", "x", "x", "x", "x", "x" ],
[ 9, "iii", "jjj", "x", "x", "x", "x", "x", "x", "x" ]
];
viewModel.table = $('#MyTable').DataTable({
dom: "Rrtip",
autoWidth: false,
deferRender: true,
info: true,
lengthChange: false,
ordering: true,
orderMulti: true,
orderFixed: {
pre: [0, 'asc'],
post: [1, 'asc']
},
paging: true,
pagingType: "full_numbers",
renderer: "bootstrap",
processing: true,
scrollX: true,
scrollY: false,
searching: false,
columns: columnsArray,
data: dataArray,
initComplete: function (settings, json) {
viewModel.attachTableEventHandlers();
},
displayLength: 5,
colReorder: {
fixedColumnsLeft: 3,
fixedColumnsRight: 0
}
});
new $.fn.dataTable.FixedColumns(viewModel.table, {
leftColumns: 3
});
