Responsive Datatables with Footable-like Behavior - Page 2

Responsive Datatables with Footable-like Behavior

2»

Replies

  • MishaKMishaK Posts: 12Questions: 0Answers: 1

    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.

  • MikeVolodarskyMikeVolodarsky Posts: 2Questions: 0Answers: 0

    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);
    
  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

  • MikeVolodarskyMikeVolodarsky Posts: 2Questions: 0Answers: 0

    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!

  • allanallan Posts: 61,431Questions: 1Answers: 10,048 Site admin

    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

This discussion has been closed.