How to disable drag and drop on jquery datatables

2.9k views Asked by At

So I'm using jquery datatables along with colReorder to setup a table. This table has a few features, like how you can click a column header, and select a column to switch with. In order to make this feature work I had to enable colReorder. The only issue is now, all my columns are draggable. How can I fix this?

Here's what I've tried

  • Setting draggable to false
  • Setting bsort to false
  • Setting bsortable to false

Please let me know what I'm doing wrong. Also, here's my constructor:

        window.table =
        $table.DataTable({
            data: window.apiData['data'],
            /**
            dat
             * Specify which columns we're going to show
             */
            columns: window.columnMapping,
            /**
             * we want to disable showing page numbers, but still limit the number of results
             */
            dom: "t",
            /**
             * let's disable some dynamic custom css
             */
            asStripClasses: [],
            /**
             * let's keep the pages reasonable to prevent scrolling
             */
            pageLength: 8,

            /**
             * this helps with hotswapping columns
             */
            colReorder: true
        });

Thanks!

1

There are 1 answers

1
davidkonrad On BEST ANSWER

You can overwrite ColReorders event-bindings to the <th> elements. Luckily the events is enriched with a namespace so they easily can be tracked down, and it turns out that ColReorder.mousedown is responsible for triggering the column dragging. So you can reset the feature by

function resetColReorderMD() {
  $('.dataTable thead th').each(function() {
    var md = $._data($(this)[0]).events.mousedown;
    for (var i=0, l=md.length; i<l; i++) {
      if (md[i].namespace == 'ColReorder') {
        md[i].handler = function() {}
      }
    }  
  })
}

$('#example').DataTable({
  colReorder: true,
  initComplete: function() {
    resetColReorderMD()
  }
})  

demo -> http://jsfiddle.net/2y4w3v6g/

Disabling column reordering when using the ColReorder plugin seems rather meaningless. I guess the mentioned "features" are using ColReorder functionality heavily, and this is the real issue, the above should be considered as a not advisable hack.