DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Highlight Cell on click

Highlight Cell on click

Ali AdnanAli Adnan Posts: 47Questions: 18Answers: 1
in Select

I am using this https://editor.datatables.net/examples/advanced/multiItem.html example and I have hardtime to figureout a small problem.

On "Select Event" I am trying to highlight "Cell" but it is not happening.

Invoice_Table.on('select', function (e, dt, type, indexes) {
                //Below Line working fine with Row Selection
                Invoice_Table[type](indexes).nodes().to$().addClass('DTTT_selected');
            });

Invoice_Table.on('deselect', function (e, dt, type, indexes) {
                //Below Line working fine with Row Selection
                Invoice_Table[type](indexes).nodes().to$().removeClass('DTTT_selected');
            });

Please help me to add same class on cell selection

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,679Questions: 1Answers: 10,498 Site admin

    Does the DTTT_selected class get access to the cell? Do you have CSS for that (that is the legacy class name used for the old TableTools plug-in, which was row based and didn't have an option for just cells).

    Can you link to a page showing the issue please?

    Allan

  • Ali AdnanAli Adnan Posts: 47Questions: 18Answers: 1

    Hi Allan,
    Thanks for reply, actually I am using "DataTables" with "SmartAdmin" https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0 Template and by default due to some css confilict on row click it was not "highlighted" so that I use "select" and "deselect" event to add /remove "DTTT_selected" class and it was working fine when I select row and as you said it was based on old table tools
    The css I found in "SmartAdmin" .css files

    /*
 * SELECTING
 * Row selection styles
 */
table.DTTT_selectable tbody tr {
  cursor: pointer;
  *cursor: hand;
}
table.dataTable tr.DTTT_selected.odd {
  background-color: #9FAFD1;
}
table.dataTable tr.DTTT_selected.odd td.sorting_1 {
  background-color: #9FAFD1;
}
table.dataTable tr.DTTT_selected.odd td.sorting_2 {
  background-color: #9FAFD1;
}
table.dataTable tr.DTTT_selected.odd td.sorting_3 {
  background-color: #9FAFD1;
}
table.dataTable tr.DTTT_selected.even {
  background-color: #B0BED9;
}
table.dataTable tr.DTTT_selected.even td.sorting_1 {
  background-color: #B0BED9;
}
table.dataTable tr.DTTT_selected.even td.sorting_2 {
  background-color: #B0BED9;
}
table.dataTable tr.DTTT_selected.even td.sorting_3 {
  background-color: #B0BED9;
}
  • Ali AdnanAli Adnan Posts: 47Questions: 18Answers: 1
    Answer ✓

    Dear Allan,
    This problem has been solved by adding the select extension .css and .js files previously .css file was missing

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.