Responsive Datatables with Footable-like Behavior

MishaK

Comanche's plugin does not work quite well if the table has a hidden ( not visible)columns.

eg if in ajax-bootstrap3.html example add
"columnDefs": [{"targets": [0,1], "visible": false}]

how can I fix it?
Thank you.

MikeVolodarsky

Hi @Allan, @Commanche,

Can you advise on how to make the responsive plugin work with javascript column definitions? All examples show providing HTML templates to datatables, we cant figure out how to inject the data-hidden='phone' attribute into the column TH.

For example:

        var tableConfig =
        {
            columns: [ // <-- NOTE: Creating columns dynamically, how to inject data-hidden='phone'?
                            { title: 'name', data: 'name' },
                            { title: 'type', data: 'type' },
                            { title: 'total time', data: 'activeDuration',  }
                        ]
            // Support for responsive datatables: https://github.com/Comanche/datatables-responsive
            autoWidth: true,
            preDrawCallback: function () {
                // Initialize the responsive datatables helper once.
                if (!self.responsiveHelper_datatable_tabletools) {
                    self.responsiveHelper_datatable_tabletools = new ResponsiveDatatablesHelper($(el), breakpointDefinition);
                }
            },
            rowCallback: function (nRow) {
                self.responsiveHelper_datatable_tabletools.createExpandIcon(nRow);
            },
            drawCallback: function (oSettings) {
                self.responsiveHelper_datatable_tabletools.respond();
            }
        };

        $(el).dataTable(tableConfig);

allan

I'm not familiar with this this particular bit of software, but have you tried using the column().header() method to get the header cell?

Allan

MikeVolodarsky

Allan, thanks for the response! The plugin is the datatables-responsive plugin, we are just trying to configure it via javascript without html defining the columns.

Your tip was exactly what I needed. In case it helps someone else, here is a way to inject arbitrary attributes into the column headers, including the data-hidden='phone' attributes needed to drive the responsive plugin:

          var columns: [
                                { title: 'name', data: 'name' },
                                // NOTE: Include the data-hidden attribute in the column definition
                                { title: 'type', data: 'type', 'data-hide': 'phone' },
                            ]

            var tableConfig =
            {
                data: [],
                columns: columns,
                // Support for responsive datatables: https://github.com/Comanche/datatables-responsive
                autoWidth: true,
                preDrawCallback: function () {
                    // NOTE: This is where we have to inject the control attributes into each column header
                    // to cause the responsive plugin to correctly mark them for hiding/etc.  We do this by
                    // pushing all data-* attributes from the column definition as properties into the column
                    var api = $(el).dataTable().api();
                    for (var c = 0; c < columns.length; c++) {
                        var columnDef = columns[c];
                        var column = api.columns(c);
                        // split out all data-X attributes into the column header
                        for (var p in columnDef) {
                            if (columnDef.hasOwnProperty(p) && p.indexOf('data-') === 0) {
                                $(column.header()).attr(p, columnDef[p]);
                            }
                        }
                    }

                    // Initialize the responsive datatables helper once.
                    if (!self.responsiveHelper_datatable_tabletools) {
                        self.responsiveHelper_datatable_tabletools = new ResponsiveDatatablesHelper($(el), breakpointDefinition);
                    }
                },

After this, when the table renders, it will push the required attributes which will cause the responsive plugin to correctly set up those columns for collapse. Can be used with all the other data attributes as well.

Thanks again!

allan

Good to had you have a solution. Probably worth me pointing out that there is also now an "official" Responsive plug-in for DataTables.

Allan