Using a slider in table header with ColReorder enabled for other columns

elnjensen

I'm using ColReorder, and I have implemented a custom search filter for one of my columns' data using a slider:

   $.fn.dataTable.ext.search.push(
    function( settings, searchData, dataIndex ) {
    var slider = document.getElementById("transitFracSlider");
        var minFrac = parseInt(slider.value);

    /* Get the index for *original* col even if reordered: */
    var idx=table.colReorder.transpose( 17 );

        if ( searchData[idx] >= minFrac )
        {
            return true;
        } else {
        return false;
    }
    });

That works fine if I put the slider outside the table. But what I would like to implement is to have the slider visible to the user even after the table is scrolled, but placing it in a table header element, and using FixedHeader:

<th draggable="false"> Show if &gt; <span id="transitFrac"></span>% observable
<br/>  <input type="range" min="0" max="100" value="0" class="slider" id="transitFracSlider">
 </th>

I have disabled both reordering and sorting for the column in which I'm putting the slider (in the header of one of the fixed, left-most columns, initialized with: colReorder: { realtime: false, fixedColumnsLeft: 2},), and it mostly works. I can move the slider by clicking to the left or right of the slider handle, and the slider moves and search works as expected. However, if I try to click and drag the slider handle, it doesn't move. (That's not exactly true - it moves just a tiny bit on initial click, but I suspect that's because it's hard to click exactly in the center of the handle; but after clicking, it can't be dragged.)

One thought is that it might be the case that ColReorder is still capturing that drag event on the column header, even though reordering for that particular column is fixed. Does that sound right, and if so, is there any way around that, i.e. any way to have the drag event in that <th> element move the slider, while still letting ColReorder work in the other columns? (ColReorder may not be the culprit, though, since I still have this issue even with it set to false.)

kthorngren

Sounds like you might want to use two header rows; one for the slider and one for the Datatables functions like sorting. You can use orderCellsTop to move the Datatables sorting, etc to the top row and put the slider in the second. Here is an example using drop down lists:
http://live.datatables.net/buziligu/1/edit

If you continue to have issues please post a link to your page or a test case so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin