rowGroup index issue

mborn

Have a report with several columns. By default, the first column is not visible and is displayed via the rowGroup feature. When the user clicks on a column header, I'm making the first column visible and disabling rowGroup. After this, I'd like to be able to make this column invisible and re-enable row group if the user clicks on the first column header. However, the index is not being returned for this column (all other columns return the expected value).

        $(document).ready(function () {
            var mainTable = $('#salesData').DataTable({
                responsive: true,
                paging: false,
                info: false,
                fixedHeader: true,
                buttons: [
                    { extend: 'excel', text: '<i class="far fa-file-excel"></i> Excel', footer: true },
                    { extend: 'pdf', text: '<i class="far fa-file-pdf"></i> PDF', footer: true },
                    { extend: 'print', text: '<i class="fas fa-print"></i> Print', footer: true }
                ],
                columns: [
                    { "width": "20%" },
                    { "width": "20%" },
                    { "width": "10%" },
                    { "width": "10%" },
                    { "width": "10%" },
                    { "width": "10%" },
                    { "width": "10%" },
                    { "width": "10%" },
                ],

                columnDefs: [
                    { type: 'natural', targets: 0 },
                    {
                        "targets": [ 0 ],
                        "visible": false,
                    }
                ],
                "order": [[0, "asc"]],
                "rowGroup": {
                    dataSrc: 0
                }
            });

            mainTable.buttons().container()
                .appendTo('#salesData_wrapper .col-sm-6:eq(0)');

            // code executed when user clicks on a header element to make the owner column visible,
            // turn off the rowGroup feature, then do the sort on the selected column
            $("th").on('click', function (index, htmlElement) {        

                // following three lines put in for debugging
                var index = $(this).index();           
                var cellValue = $(this).text();            
                alert('index = ' + index + ", " + "cellValue = " + cellValue);    

                mainTable
                    .columns(0)
                    .visible(true)
                    .rowGroup().disable().draw();
            });

Thanks in advance,
Mike

awelch

The handler function your using in your call to on() has improper parameters. The parameters should be the event object then extra parameters, you aren't using any parameters from the looks of it so you can omit parameters entirely. Furthermore, your handler function has a parameter called index then you instantiate another variable named index.

This isn't your issue though. When a column in a DataTable has its visibility set to false the entire column is removed from the DOM. Therefore, the jQuery selector your using will only apply your handler to the visible columns. If you want to apply this to an invisible column you would need to use delegation. Something like: $("table.dataTable").on("click", "th", function(){…}). You also may want to use the DataTables API (column().index()) to get the index as jQuery's index() function will not include any invisible columns so it will be different than DataTables internal index if you are hiding columns. All together it would look something like this:

$("table.dataTable").on("click", "th", function () {
    var index = mainTable.column(this).index();
    var cellValue = $(this).text();            
    alert('index = ' + index + ", " + "cellValue = " + cellValue); 
}

mborn

Thank you, it works great!

mborn

Actually, it works great as long as I am at the top of the table. If I scroll down, the code is not executed. Any ideas?

kthorngren

Is this a duplicate question from your other thread?
https://datatables.net/forums/discussion/55980/turning-off-rowgroup-feature#latest

Kevin

mborn

Appears to have something to do with fixedHeader. I can change it to false, scroll until the headers are almost gone, click on a column, and the code executes.

mborn

kthorngren - this was the original post. I didn't think the two were related until after my other post. I apologize for the duplication.

kthorngren

Appears to have something to do with fixedHeader

That might be the case since Datatables splits the header from the table to allow for the scrolling. It may affect the events created. You can see the changes made if you inspect the header then scroll.

If your interest is when the table is sorted then I would recommend using the 1-event order` event as I show in this example in your other thread:
http://live.datatables.net/desotevi/1/edit

My example takes into consideration that not only is column 0 sorted but that it is the highest priority if multiple columns are sorted.

Kevin

mborn

Thank you, working great!