CODEWITHSUNDEEP
jqueryresponsive-designdatatables
legollas007
legollas007

Reputation: 193

DataTables Responsive Priority

I am using this amazing plugin but I have found a problem when using responsive priority on columns.

Code:

var fillTable= function (data) {

var list = [
     { name: 'Name 123456789', email: "[email protected]"},
     { name: 'Name 123456789_10', email: "[email protected]"},
     { name: 'Name 123456789_11', email: "[email protected]"},
     { name: 'Name 123456789_12', email: "[email protected]"},
     { name: 'Name 123456789_13', email: "[email protected]"}
];

var tableToFill= $('#js-table').DataTable({
    responsive: true,
    columnDefs: [
        { responsivePriority: 1, targets: 1 }
        ],
    columns: [
        { data: "name", title: "Name" },
        { data: "email", title: "Email" }
    ],
    language: localiseDataTable(),
    order: [[0, 'desc']]
});

tableToFill.clear();
tableToFill.rows.add(list);
tableToFill.draw(false);
tableToFill.columns.adjust().responsive.recalc();

}

Can someone explain me why when I shrink the screen the "Plus" sign does not appear anymore when I use : { responsivePriority: 1, targets: 1 }. This makes impossible to see the childRow and by consequence to see the first column data in low resolution screens.

Thanks in advance

Upvotes: 2

Views: 3836

Answers (2)

Sue Maurizio
Sue Maurizio

Reputation: 702

I followed Tom Glover's hint and added a new column; I didn't want to waste space on the page, though, so I used DataTable's events to make it appear only when needed. Hope it helps.

var firstChildrenSelector = '#example tr th:first-child, #example tr td:first-child';

if (!table.responsive.hasHidden()) {
  $(firstChildrenSelector).css('display', 'none');
}

$(window).resize(function() {
  if (table.responsive.hasHidden()) {
    $(firstChildrenSelector).css('display', 'table-cell');
  } else {
    $(firstChildrenSelector).css('display', 'none');
  }
});

Upvotes: 0

Tom Glover
Tom Glover

Reputation: 3026

This has to do with a limitation in the framework.

The + icon and button effect is applied to the first column regardless of if it is visible or not. 

{ responsivePriority: 1, targets: 1 }

As the column count starts at 0 this sets the second column to the highest visual priority.

If you want it to remain both the second column and the priority i suggest you create a third empty column that is the first column.

Upvotes: 1

Related Questions