Datatable highlighting

1

I used the datatable sample as a template. My highlighting doesn’t work - cannot figure out the problem. Any ideas? I attached the zipped project also. Thanks

// I used the array of data from the sample

// convert data into JSON format
var dataJson = JSON.stringify(dataSet)

// set up the column headings
var columnHeadings = [
            {title: "Name"},
            {title: "Position"},
            {title: "Office"},
            {title: "Extn."},
            {title: "Start date"},
            {title: "Salary", class:"text-right"}
            // these classes in DataTable documentation
        ]
    
function updateTable() {
  DataTable1.settings.columns = columnHeadings
  DataTable1.settings.data = dataSet
  DataTable1.build()
}

function loadTable() {
  var table = $("#DataTable1").DataTable()
  table.rows.add(DataTable1.settings.data).draw()
}

function Main() {   // this is run first after everything is loaded and ready to go. 
                    // Do this with datatables as they have lots of libraries that 
                    // have to load - so give them time. 
  updateTable()
}

/*



Button4.onclick = function() {    // highlight third row
   var table
   table = $("#DataTable1").DataTable()    // creates a copy of the datatable
   $(table.rows().nodes()).removeClass("highlight")
   $(table.cells().nodes()).removeClass("highlight")
   $(table.row(2).nodes()).addClass("highlight")
}

*/


DataTable1.onclick=function(event){
    if (typeof(event.target._DT_CellIndex) != "object" ) { 
     return    // means didn't click in a cell
  }
  // get the data for the cell user clicked and display
  var row,col
  row = event.target._DT_CellIndex.row
  col = event.target._DT_CellIndex.column
  NSB.MsgBox("Click on "  +  row  +  ", "  +  col  +  ". Value is '"  +  dataSet[row][col]  +  "'.")
}

Fliptoggle1.onchange = function() {    // turn ordering on or off
  DataTable1.settings.ordering = Fliptoggle1.value
  updateTable()
}

Fliptoggle2.onchange = function() {    // turn searching on or off
  DataTable1.settings.searching = Fliptoggle2.value
  updateTable()
}


btnUpdateCell.onclick=function(){  // update first cell
    dataSet[0][0] = "George"
    updateTable()
}

btnHighlightCol.onclick=function(){
   var table = $("#DataTable1").DataTable()
   $(table.cells().nodes()).removeClass("highlight")  // clear highlights
   $(table.rows().nodes()).removeClass("highlight")
   $(table.column(2).nodes()).addClass("highlight")  // can do with row also
}
<a class="attachment" href="/uploads/db0741/original/1X/5fe03ceb5eea611c7fa2fef99653e30d747fceec.zip">Fixit9DatatableCopy.appstudio.zip</a> (17.4 KB)
2

Are you trying to highlight column 2, as per these docs?
https://datatables.net/examples/api/highlight

(Also, the attachment didn’t come through)

3

Yes - exactly. I reattached the zipped file again too. Fixit9DatatableCopy.appstudio.zip (17.4 KB)

4

You also need to specify the css for highlight. In AppStudio, in the Project CSS (in the Project menu) add this:

td.highlight {
    background-color: whitesmoke !important;
}

You’ll see this code on that Datatables page on the CSS tab.

1 Like
5

Ah, makes sense. I totally missed this. Thanks

6

Lovely thanks George.

Dr. C