title: DataTables: how can I avoid column sorting if I have checkbox and popup controls in the header?
body: <p>I have a DataTables table, which has checkboxes and popups in some of the header columns. (Plus I use FixedColumn and ColReorder plugins too). A mock-up of what I have in a jsfiddle is at the bottom</p>
  
  <p>My problem is that if a user tries to check the checkboxes or push the popups, the sorting event takes over everything. The jsfiddle page is not functioning fully, because in my app I receive the events for the checkbox click, but it's too late at that time, the sorting also happens.
  The sort icon is just a background CSS for the header cells, and the sorting event is registered for the whole header cell by DataTables. </p>
  
  <p>Plans to solve this problem:</p>
  
  <ol>
  <li>Register handlers and try to prevent the running of Datatables's own handlers. As of now, if I also register an event handler for the header cells, I'll get the event only after DataTable's handler, the events are delivered in registration order. I also registered handlers for the checkbox and the popup itself, but those are also delivered only after DataTables's handlers (bubbling up).
  This could only work if I could somehow register my handler before DataTables's own handler, but I haven't found an entry point to do that. The table DOM should be already generated, when the event is registered. Right now I see too late occasions, I can only register.</li>
  <li>Finding an API call point where I could cancel DataTables's sorting. The order event (<a href="http://datatables.net/reference/event/order" rel="nofollow">http://datatables.net/reference/event/order</a>) seems to be after the fact, I don't see a way for cancellation.</li>
  <li>At some point I restructured the non-fixed column headers to contain two rows: the top row was for sorting and the bottom contained my checbox and popup controls. That seemed to work except that it turned out that it doesn't work with the ColReorder plugin. I need that plugin, and it only reordered the top row of the header, the bottom stayed there. If I could fix that, it would be a solution also.</li>
  </ol>
  
  <p><a href="http://jsfiddle.net/csabatoth/pgue1sf5/8/" rel="nofollow">http://jsfiddle.net/csabatoth/pgue1sf5/8/</a></p>
  
  <pre><code>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": '&lt;div&gt;foo1&lt;/div&gt;&lt;input type="checkbox" class="filterchk" checked="checked"&gt;&amp;nbsp;&lt;select class="paramsel"&gt;&lt;option value="1" selected="selected"/&gt;&lt;option value="2"/&gt;&lt;option value="3"/&gt;&lt;/select&gt;', "class": "dt-head-center dt-body-left" },
          { "title": '&lt;div&gt;foo2&lt;/div&gt;&lt;input type="checkbox" class="filterchk" checked="checked"&gt;&amp;nbsp;&lt;select class="paramsel"&gt;&lt;option value="1" selected="selected"/&gt;&lt;option value="2"/&gt;&lt;option value="3"/&gt;&lt;/select&gt;', "class": "dt-center rulecolumn" },
          { "title": '&lt;div&gt;foo3&lt;/div&gt;&lt;input type="checkbox" class="filterchk" checked="checked"&gt;&amp;nbsp;&lt;select class="paramsel"&gt;&lt;option value="1" selected="selected"/&gt;&lt;option value="2"/&gt;&lt;option value="3"/&gt;&lt;/select&gt;', "class": "dt-center rulecolumn" },
          { "title": '&lt;div&gt;foo4&lt;/div&gt;&lt;input type="checkbox" class="filterchk" checked="checked"&gt;&amp;nbsp;&lt;select class="paramsel"&gt;&lt;option value="1" selected="selected"/&gt;&lt;option value="2"/&gt;&lt;option value="3"/&gt;&lt;/select&gt;', "class": "dt-center rulecolumn" },
          { "title": '&lt;div&gt;bar1&lt;/div&gt;&lt;input type="checkbox" class="filterchk" checked="checked"&gt;&amp;nbsp;&lt;select class="paramsel"&gt;&lt;option value="1" selected="selected"/&gt;&lt;option value="2"/&gt;&lt;option value="3"/&gt;&lt;/select&gt;', "class": "dt-center rulecolumn" },
          { "title": '&lt;div&gt;bar2&lt;/div&gt;&lt;input type="checkbox" class="filterchk" checked="checked"&gt;&amp;nbsp;&lt;select class="paramsel"&gt;&lt;option value="1" selected="selected"/&gt;&lt;option value="2"/&gt;&lt;option value="3"/&gt;&lt;/select&gt;', "class": "dt-center rulecolumn" },
          { "title": '&lt;div&gt;bar3&lt;/div&gt;&lt;input type="checkbox" class="filterchk" checked="checked"&gt;&amp;nbsp;&lt;select class="paramsel"&gt;&lt;option value="1" selected="selected"/&gt;&lt;option value="2"/&gt;&lt;option value="3"/&gt;&lt;/select&gt;', "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
      });
  </code></pre>