我有一个数据表的表，其中有复选框和弹出窗口中的一些标题列。 （另外，我使用FixedColumn和ColReorder插件太）。 什么我有一个的jsfiddle实物模型是在底部
我的问题是，如果用户尝试检查复选框或推弹出窗口，分拣事件接管一切。 该页面的jsfiddle没有完全发挥作用，因为在我的应用我收到事件的复选框点击，但它是在那个时候为时已晚，排序也发生了。 排序图标只是为标题单元格背景CSS和排序事件被登记作为数据表整个头单元格。
计划来解决这个问题：
- 注册处理程序，并试图阻止数据表自己的处理程序的运行。 截至目前，如果我还注册了头细胞的事件处理程序，我会得到之后才DataTable的处理程序，这些事件在注册顺序传递的事件。 我也注册了该复选框，并在弹出的本身处理，但只有在数据表的处理这些也传送（冒泡）。 如果我能以某种方式之前，数据表自己的处理程序来注册我处理这只能工作，但我还没有找到一个切入点来做到这一点。 该表DOM应该已经产生，当登录的事件。 现在，我看到过晚的场合，我只能注册。
- 找到一个API调用地步，我可以取消数据表的排序。 订单事件（ http://datatables.net/reference/event/order ）似乎是事实后，我看不到取消的方式。
- 在某些时候，我重新调整了非固定列标题包含两行：最上面一行是为排序和底部载我checbox和弹出控制。 这似乎只是它横空出世，它不与ColReorder插件努力工作。 我需要的插件，并且只重新排序标题的最上面一行，底部在那里呆了。 如果我能解决这个问题，这将是一个解决方案也。
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
});
