Is there a way to use checkboxes instead of buttons for colVis?

pizzo

In my application I am using coVis, colReorder and buttons. I would like users to use checkboxes to be able to hide columns instead of buttons though.

I have been able to get the effect to work, however, the wheels fall off when any columns are reordered. I tried to use the same data point ("data-cv-idx") that the buttons seem to use to hide/show the columns, but this is dynamically changed when any columns are dragged with the buttons but not the columns I've created. I'm not sure how to get this value to change when columns are rearranged with my checkboxes as well.

Below is the code I have been using so far:

HTML

<div class="toggle-div">
                    Ordered
                    <input type="checkbox" class="toggle-vis" data-cv-idx="2" name="ordered" id="test">
                    Rush
                    <input type="checkbox" class="toggle-vis" data-cv-idx="3" name="rush" id="test">
                    Follow-up
                    <input type="checkbox" class="toggle-vis" data-cv-idx="4" name="follow-up" id="test">
                    Status
                    <input type="checkbox" class="toggle-vis" data-cv-idx="5" name="status" id="test">
                    Queue
                    <input type="checkbox" class="toggle-vis" data-cv-idx="6" name="queue" id="test">
                    Type
                    <input type="checkbox" class="toggle-vis" data-cv-idx="7" name="type" id="test">
                    Subject
                    <input type="checkbox" class="toggle-vis" data-cv-idx="8" name="subject" id="test">
                    Report ID
                    <input type="checkbox" class="toggle-vis" data-cv-idx="9" name="report-id" id="test">
                    Borrower
                    <input type="checkbox" class="toggle-vis" data-cv-idx="10" name="borrower" id="test">
                    Customer
                    <input type="checkbox" class="toggle-vis" data-cv-idx="11" name="customer" id="test">
                    Note
                    <input type="checkbox" class="toggle-vis" data-cv-idx="12" name="note" id="test">

                </div>
                <table id="myTable" class="my-table">
                    <thead>
                        <tr>
                            <th>Open</th>
                            <th>Priority</th>
                            <th>Ordered</th>
                            <th>Rush</th>
                            <th>Follow-up</th>
                            <th>Status</th>
                            <th>Queue</th>
                            <th>Type</th>
                            <th>Subject</th>
                            <th>Report ID</th>
                            <th>Borrower</th>
                            <th>Customer</th>
                            <th>Note</th>
                            <th><a id="selectAllLink" href="#">Select</a></th>
                        </tr>
                    </thead>

JS
```

$(document).ready(function() { var table = $('#myTable').DataTable( { stateSave: true, "paging": false, "info": false, "searching": false, "ordering": false, 'dom': 'BRlfrtip', buttons: [ 'colvis' ], "order": [], 'colReorder': { fixedColumnsLeft: 1, fixedColumnsLeft: 2, fixedColumnsRight: 1 } } ); $('.toggle-vis').on( 'click', function (e) { e.preventDefault(); // Get the column API object - is static and doesn't move when columns move var column = table.column( $(this).attr('data-cv-idx') ); // Toggle the visibility column.visible( ! column.visible() ); } ); } );

pizzo

Oops, I screwed up the markdown... heres is the JS:

$(document).ready(function() {
                var table = $('#workAssignmentTable').DataTable( {
                    stateSave: true,
                    "paging": false,
                    "info": false,
                    "searching": false,
                    "ordering": false,
                    'dom': 'BRlfrtip',
                    // dom: '<"clear">BRlfrtip',
                    buttons: [
                        'colvis'
                    ],
                    "order": [],
                    'colReorder': {
                        fixedColumnsLeft: 1,
                        fixedColumnsLeft: 2,
                        fixedColumnsRight: 1
                    }
                    
                } );

                $('.toggle-vis').on( 'click', function (e) {
                    e.preventDefault();
            
                    // Get the column API object - is static and doesn't move when columns move
                    var column = table.column( $(this).attr('data-cv-idx') );
            
                    // Toggle the visibility
                    column.visible( ! column.visible() );
                } );

            } );

colin

This example may help, as it has ColVis along with ColReorder. If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

pizzo

@colin Sorry about that! Here is a link to what I have so far in CodePen:

https://codepen.io/pete-izzo/pen/RwKwrpN

Did you mean the example in the ColReorder link you supplied?

colin

Sorry about that, I forgot the link - here it is: https://datatables.net/extensions/colreorder/examples/integration/colvis.html !

Thanks for your test, but it doesn't run. We need to be able to see the problem that you want help with in action, so we can debug it,

Colin

pizzo

Ah that would be a problem. Sorry about that, I'm not sure why it wasn't working. I've made a new one here: http://live.datatables.net/xikineme/1/edit?html,css,js,output
and it should work to show the problem I'm having.

The problem I'm running into is, the checkbox that toggles the columns visibility will only toggle the columns they are originally set to.
Ex: If I move the "Name" column to any other position, the checkbox will still only toggle the visibility of the first column. However the buttons don't do that, they will toggle the "Name" column regardless of it's location. I'm not sure how to get the check boxes to do this. I think it has to do with the data-attribute "cv-idx" changing automatically with the buttons when the columns are reordered but im not 100%

allan

Yes, ColReorder makes this kind of thing really difficult! What you need to do is make use of the colReorder.transpose() method to convert between the original data index and the reordered one.

Allan