Answers

• kthorngren Posts: 21,325Questions: 26Answers: 4,949

  March 2023

  The best option is to use objects for the rows along with columns.data. See the Data docs for details. The object name will stay the same when the column is moved.

  Kevin
• dpanscik Posts: 202Questions: 47Answers: 0

  March 2023

  Hi Kevin,

  I don't see an obvious solution to use columns.data inside of rowCallback.
• dpanscik Posts: 202Questions: 47Answers: 0

  March 2023

  Here is what I have tried in rowCallback

    $('td', row).eq('InvoiceAmount:name').css('background-color', '#8B8000');
  
• kthorngren Posts: 21,325Questions: 26Answers: 4,949

  March 2023

  Guessing you are using columns.name. The format InvoiceAmount:name is used as a column-selector with the column() API. You could use columns.className to assign a class and use it as the .eq() selector.

  I don't see an obvious solution to use columns.data inside of rowCallback.

  It depends on what you are trying to do. Your question was a bit vague Lets say you have these columns:

          columns: [
              { data: 'name' },
              { data: 'position' },
              { data: 'office' },
              { data: 'extn' },
              { data: 'start_date' },
              { data: 'salary' },
          ],
  

  You could do something like this:

  if ( row.name === 'My Name' ) {
    // do something
  }
  

  Kevin
• dpanscik Posts: 202Questions: 47Answers: 0

  March 2023

  Im still not getting to a solution here.

  I cant figure out the syntax to target a specific column. Here is my attempt to figure out the formatting to target a column by "data".

  $('td', row).row.name('InvoiceAmount').css('background-color', '#8B8000');

  Here is what I am trying to do.

             "columns": [
  
                  { "data": "InvoiceAmount", "title": "InvoiceAmount", "name": "InvoiceAmount", "autoWidth": true, render: $.fn.dataTable.render.number(',', '.', 2, '$'), },
                  { "data": "PoAmount", "title": "PoAmount", "name": "PoAmount", "autoWidth": true, render: $.fn.dataTable.render.number(',', '.', 2, '$') },
  
              ],
  

              rowCallback: function (row, data, val, meta) {
                  //highlight invoices amount that is more than PO amount
                  if (data["InvoiceAmount"] > data["PoAmount"]) {
                      $('td', row).row.name('InvoiceAmount').css('background-color', '#8B8000');
                  }              
              }
  
• kthorngren Posts: 21,325Questions: 26Answers: 4,949

  March 2023 Answer ✓

  Use columns.className then use that as part of the jQuery selector, like this $('td.InvoiceAmount', row). For example:
  https://live.datatables.net/dodobuge/2/edit

  Kevin
• dpanscik Posts: 202Questions: 47Answers: 0

  March 2023

  Thank you Kevin! I appreciate your help.

  Here is my final solution
  $('td.InvoiceAmount', row).css('background-color', '#8B8000')