Highlight Cell on click

Highlight Cell on click

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

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,498Questions: 1Answers: 10,470 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.