Search

than just the hidden columns (which is the default

than just the hidden columns (which is the default

controlling the visibility of columns at different display sizes.

p>Responsive will automatically hide columns from the right-hand-side of

This example demonstrates the use of Responsive with the ColReorder extension for DataTables, which provides the ability to reorder columns using click and drag on the column headers.

can tell Responsive what columns should be visible on

will automatically detect which columns have breakpoint class names

details of the hidden columns in a child row.

data from the hidden columns. The

ColReorder is an extension for DataTables that provides the ability to click and drag column header cells, reordering the columns as it does so. FixedHeader requires no special initialisation when operating with ColReorder - simply initialise both on the table.

Most Datatables options, including columns, don't have a way to change the config dynamically. The destroy() API or destroy option is used to change the config options. This requires reinitializing the Datatable. Kevin

max width of the columns like this ...but without

I understand that each column's data is in data

Thank you that was most helpful. It seems in my sample I messed up and the Fixed Columns on the first one is isn’t working, but your code gives me a pointer to try and scrollintoView method. Thanks

would you show / hide columns inside a filtering function?

trying to resize the columns itself. I initially define

Can it be DataTables.ColumnSettings = {} ? columns: this.myValues, The columns docs

for the newly added columns etc.. Just take a

Easiest way is probably to use a custom button: buttons: [ ‘colvis’, { text: ‘Show All Columns’, action: function (e, dt) { dt.columns(...).visible( true, false ); // show selected columns, false is to disable redraw calcs for speed dt.columns(...).visible( false ); // hide selected columns. } } ] Allan

It woked for me colsObj should be dynamically generated using the logic jQuery(document).ready(function() { var dataObject =eval('[{"COLUMNS":['+colsObj+']}]'); var columns = []; $('#example').dataTable({ "data": dataObject[0].DATA, "columns": dataObject[0].COLUMNS }); }); and in the columns section I used the below code columns:dataObject[0].COLUMNS settings