DataTables Responsive - tables with checkboxes

DataTables Responsive - tables with checkboxes

mtindallmtindall Posts: 10Questions: 1Answers: 0

Hi,

I've used datatables for a long time in our web portal, we have tons of need to view lots of data in table format. I'm trying to implement the Responsive plugin, but there seems to be some hangup on using this plugin on tables were 1 column of the table is an input checkbox. The plugin seems to lose all idea of the column widths when 1 of the columns is a checkbox (for each row). Any way to correct this without looking into using the Select plugin?

Answers

  • mtindallmtindall Posts: 10Questions: 1Answers: 0

    ok so further testing shows that it doesnt seem to be the checkbox. Nor the buttons, nor the long text column. I can't figure it out, but some tables aren't hiding columns at an accurate width.

    I'm trying to get some screenshots up to show what other signs are showing

  • mtindallmtindall Posts: 10Questions: 1Answers: 0

    1st screenshot shows table at full width, the 2nd and 3rd screenshots show how the table is adding a scrollbar rather than hiding, the last picture shows how if you expand the page width past its original width, it will not continue to expand. The JS is hard coding a width on the table to not allow it to go past it's original size, but the top and bottom (search and paging sections) continue to expand as expected.

  • mtindallmtindall Posts: 10Questions: 1Answers: 0
            $("#vendor-messages-list").DataTable({
                "columnDefs": [
                    { "visible": false, "targets": [11] },
                    { "orderData": 11, "targets": [0] }
                ],
                "language": {
                    "search": "Filter Search:"
                },
                "lengthMenu": [[25, 50, 75, 100, 200, -1], [25, 50, 75, 100, 200, "All"]],
                "order": [[3, "asc"]],
                "pageLength": 25,
                "pagingType": "full_numbers"
            });
    

    defaults:
    $.extend($.fn.dataTable.defaults, {
    responsive: true
    });

  • mtindallmtindall Posts: 10Questions: 1Answers: 0

    scratch this user error!

This discussion has been closed.