when adding responsive:true with groupColumn it is showing an error

hamzabinilyas_gl

function initializeTable() {
var groupColumn = 3;
var provisionings_table = $('.provisioning-table').DataTable({
columnDefs: [{ visible: false, targets: groupColumn }],
order: [[groupColumn, 'desc']],
displayLength: 25,
drawCallback: function (settings) {
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
api.column(groupColumn, { page: 'current' })
.data()
.each(function (group, i) {
if (last !== group) {
$(rows)
.eq(i)
.before(
'<tr class="group"><td colspan="6">' +
group +
'</td></tr>'
);
last = group;
}
});
//Footer responsiveness
var colspan = api.columns(':visible').count();
if (colspan > 2) {
$('#footer-sum-text').attr('colspan', (colspan - 1));
$('#footer-sum-text').show();
$('#footer-sum-qty').show();
$('#footer-sum-text span').addClass("d-none");
} else {
$('#footer-sum-text').attr('colspan', (colspan));
$('#footer-sum-text').show();
$('#footer-sum-text span').removeClass("d-none");
}
}

    });
    // Order by the grouping
    $('.provisioning-table tbody').on('click', 'tr.group', function () {
        var currentOrder = provisionings_table.order()[0];
        if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
            provisionings_table.order([groupColumn, 'desc']).draw();
        }
        else {
            provisionings_table.order([groupColumn, 'asc']).draw();
        }
    });
}

error: Cannot read properties of null (reading 'nodeName')

when adding responsive:true, it is showing an error and break the layout for desktop too

kthorngren

Looks like your code is based on this example. I built a test case with that example and added responsive. There aren't any errors displayed:
https://live.datatables.net/nusajupu/1/edit

Please update my test case or provide a link to your page or test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You may want to consider using the RowGroup extension which enhances that example.

Kevin

hamzabinilyas_gl

Thanks Kevin, you're right, my code is based on the given example. when I add responsive: true with rowGroup: {dataSrc: 3 }. This break table for desktop too and showing below error in console and when adding rowGroup it is showing column twice

allan

Hi,

Kevin's example has Responsive enabled. Can you update that example or link to your own showing the issue so I can debug it?

Allan

hamzabinilyas_gl

@allan it's dashboard panel on laravel, I can't share link as public. how can I make my credentials private?

hamzabinilyas_gl

here is my html ```

Serving Quantity	Image	Item	Price	Serving Size	Subtotal
Total
	No Image Available	Turkey & Havarti on French Baguette - 6 inch All toppings come on the side. looks good!	$ 7.90	1 Sandwich	$ 0.00
		NW	$ 1	1	$ 0.00

```

hamzabinilyas_gl

and here is my JS code

 function initializeTable() {
        var groupColumn = 3;
        var provisionings_table = $('.provisioning-table').DataTable({
            responsive: true,
            columnDefs: [{ visible: false, targets: groupColumn }],
            order: [[groupColumn, 'desc']],
            displayLength: 10,
            drawCallback: function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;
                api.column(groupColumn, { page: 'current' })
                    .data()
                    .each(function (group, i) {
                        if (last !== group) {
                            $(rows)
                                .eq(i)
                                .before(
                                    '<tr class="group"><td colspan="6">' +
                                    group +
                                    '</td></tr>'
                                );
                            last = group;
                        }
                    });
                //Footer responsiveness
                var colspan = api.columns(':visible').count();
                if (colspan > 2) {
                    $('#footer-sum-text').attr('colspan', (colspan - 1));
                    $('#footer-sum-text').show();
                    $('#footer-sum-qty').show();
                    $('#footer-sum-text span').addClass("d-none");
                } else {
                    $('#footer-sum-text').attr('colspan', (colspan));
                    $('#footer-sum-text').show();
                    $('#footer-sum-text span').removeClass("d-none");
                }
            }
        });
        // Order by the grouping
        $('.provisioning-table tbody').on('click', 'tr.group', function () {
            var currentOrder = provisionings_table.order()[0];
            if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
                provisionings_table.order([groupColumn, 'desc']).draw();
            }
            else {
                provisionings_table.order([groupColumn, 'asc']).draw();
            }
        });
    } 

I'm executing this function in below code

 $(horizontalWizard)
            .find('.btn-next')
            .each(function () {
                $(this).on('click', function (e) {
                    var isValid = $('#reservation-form').valid();
                    if (isValid) {
                        if ($(this).hasClass('validate_request') || $(this).hasClass('validate-admin-request') || $(this).hasClass('validate_update_request')) {
                            var url = '';
                            if ($(this).hasClass('validate_request')) {
                                url = "/validate_reservation";
                            } else {
                                url = "/validate_admin_reservation";
                            }
                            if ($(this).hasClass('validate_update_request')) {
                                var reservation_id = $('#reservation-id').val();
                                url = "/validate_update_reservation/" + reservation_id;
                            }
                            var error = false;
                            var ajax = true;
                            var response = $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                beforeSend: function () {
                                    $(".validate_request").hide();
                                    $(".validate_request-wait").show();
                                },
                                type: "POST",
                                url: url,
                                data: {
                                    trip_type: trip_type,
                                    reserved_for: reserved_for,
                                },
                                cache: false,
                                success: function (data) {
                                    if (data.status == "success") {
                                        numberedStepper.next();
                                        //datatable
                                        // if($(this).hasClass('addon'))
                                        // {
                                        initializeTable();
                                        $('#isValid').val(true)
                                        // }
                                    } else {
                                        $('.trip-validation-alert .message').text(data.message);
                                        $('.trip-validation-alert').show().addClass('alert-warning');
                                        scrollUp()
                                    }
                                },
                            }).fail(function (jqXHR, exception) {
                                if (jqXHR.status == 422) {
                                    var error_messages = '';
                                    $.each(jqXHR.responseJSON.errors, function (index, value) {
                                        error_messages += value[0] + "<br>"
                                        $('.trip-validation-alert .message').html(error_messages);
                                        $('.trip-validation-alert').show().addClass('alert-danger');
                                        scrollUp()
                                    })
                                    $(".btn-submit").attr("disabled", false);
                                    //show error messages
                                }
                            });
                            $(".validate_request").show();
                            $(".validate_request-wait").hide();
                        } else if ($(this).hasClass('addon')) {
                            numberedStepper.next();
                            initializeTable();
                        }
                    } else {
                        e.preventDefault();
                    }
                });
            }); 

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

I copied your initializeTable() code into this test case:
https://live.datatables.net/wesodadu/1/edit

I only modified the groupColumn value. The code does not result in any errors.

The test case is using the current version of Datatables and Responsive. Maybe you need to upgrade. Use the Download Builder to get the current versions.

I can't share link as public. how can I make my credentials private?

Click on Allan's name in the thread and you can send him a PM with the login information.

Kevin

hamzabinilyas_gl

@allan I updated the library but still getting a same error.

hamzabinilyas_gl

@allan I sent you an message with link and credentials.

allan

Many thanks! It looks like the service might be down at the moment (laptop sleeping? ). I'll try again later on.

Allan

hamzabinilyas_gl

Thanks @allan I got the issue fixed with css.