Using Responsive with Details Column and AJAX Data

Joyrex

I see from the examples that it is indeed possible to use Responsive with AJAX data, but in the example, the show/hide button is in the first cell. I use the following in my DataTable markup:

responsive: {
    details: {
        type: 'column'
    }
},

I typically like to have the button in its own column, that only appears when the viewport triggers the Responsive extension by having an empty <th></th> and an empty <td></td> to contain the show/hide button.

However, my AJAX data does not contain an empty first column, and the <tbody> structure is rendered by DataTables for the AJAX data. I have tried putting an empty column using columns.data (didn't work), so I am starting to wonder if it is not possible to have a dedicated column for the Responsive show/hide buttons with AJAX data.

Is this possible?

Dalex73

Use the render function for the columns and a null value for the first data value.

https://datatables.net/reference/option/columns.render

Joyrex

@Dalex73 - I tried your suggestion, but putting a NULL in columns causes the JSON data from all the columns to display in the NULL column, with the responsive controls inside the column as well.

Here's my DataTables markup:

table = $('#DocLog').on('init.dt', function (e, settings, json) {
                    var api = new $.fn.dataTable.Api(settings);
                    $("a", api.buttons('.btn-primary').nodes().attr({'data-inform':'tooltip'}));
                }).DataTable( {
        dom: "<'row'<'col-sm-7'B><'col-sm-5'f>>"+"<'row'<'col-sm-12'tr>>"+"<'row'<'col-sm-5'i><'col-sm-7'p>>",
        responsive: {
            details: {
                type: 'column'
            }
        },
        processing: true,
        serverSide: true,
        ajax: "../modal/docLog_Query.cfm",
        columns: [
            {data: null},
            {data: 3,render: $.fn.dataTable.render.moment('YYYY-MM-DD HH:mm:ss:SSS','DD MMM YYYY hh:mm:ss.SSS a')},
            {data: 8},
            {data: 6},
            {data: 4},
            {data: 5},
            {data: 9}
        ],
        columnDefs: [ {
            className: "control",
            orderable: false,
            searchable: false,
            width: "20px",
            targets: 0
        } ],
        buttons: [ {
            extend: 'pageLength',
            className: 'btn-primary',
            titleAttr: 'Change the number of rows displayed'
        } ],
        lengthMenu: [ [10, 25, 50, -1], ["10 Records", "25 Records", "50 Records", "All Records"] ],
        language: {
            buttons: {
                pageLength: {'-1': 'All Records', _: '<span class="d-none d-lg-inline">Display</span> %d Records'}
            },
            search: "",
            zeroRecords: "There are no file history records."
        },
        order: []
    } );

In my HTML markup, I have provided an empty <th></th> and in my <tfoot> I specify the colspan to be 7, so display-wise my table is semantically correct.

Joyrex

I also tried defining all my columns using columnDefs and got the same result.

Joyrex

Success! I figured out adding defaultContent: "" to the target 0 column (the one used for the responsive button) keeps the JSON data from appearing.

So, for anyone else who has this issue (cleaned up a bit and removed my custom:

               responsive: {
            details: {
                type: 'column'
            }
        },
        processing: true,
        serverSide: true,
        ajax: "path/to/your/ajax/script",
        columnDefs: [ {
            className: "control",
            data: null, //this is so your JSON AJAX data doesn't load
            defaultContent: "", //this keeps the JSON AJAX data from appearing
            orderable: false,
            searchable: false,
            width: "20px",
            targets: 0
        },{
            targets: 1,
            data: 3 //these could be a number or the column name from the JSON data
        },{
            targets: 2,
            data: 8
        },{
            targets: 3,
            data: 6
        },{
            targets: 4,
            data: 4
        },{
            targets: 5,
            data: 5
        },{
            targets: 6,
            data: 9
        } ]

Make sure your HTML markup has an empty <th></th> for target 0 (the responsive control column), and if using a footer, make sure the number of columns matches or the colspan equals the number of columns, including the hidden responsive column (in this case target 0).