Datatables highlighting does not work with Flask?

hedgy123

Hello,

I have a Flask app that reads in a .csv file and displays it as a datatable. I want to highlight the values in the datatable if they are below a certain threshold. Here's what I did:

   <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Query</th>
                <th>Fraction ok</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Query</th>
                <th>Fraction ok</th>
            </tr>
        </tfoot>
    </table>

<script>

function setupData() {
    $(document).ready(function () {
     $('#example').DataTable({
           "aaSorting":[],
            "ajax": {
               "url":"/get_query_data",
               "dataSrc":"data",
               "dataType":"json",
               "contentType":"application/json"
              },
            "columns": [
                {"data": "Query"},
                {"data": "Fraction ok"}
             ],
             "createdRow": function ( row, data, index ) {
               if (data[2]*1 < 0.8 ) {
                  $('td', row).eq(2).addClass('highlight');
                }
             }
        });
      });
   }

   $( window ).on( "load", setupData );
   </script>

But the table comes out without any highlighting, even though a whole bunch of values are below my threshold of 0.8. What am I doing wrong?

Thanks so much!

kthorngren

               if (data[2]*1 < 0.8 ) {
                  $('td', row).eq(2).addClass('highlight');
                }

Since you are using columns.data your data is stored in an object (aka dictionary in Python) but you are trying to access it as an array data[2]. You would use data["Fraction ok"] instead. Note that if your data was an array you would use data[1] as it is zero based indexing.

Also $('td', row).eq(2).addClass('highlight'); should be $('td', row).addClass('highlight');. You don't want the .eq(2) to highlight the row.

Kevin

hedgy123

Thanks @kthorngren, but I am afraid it still didn't work. I did:

function setupData() {
    $(document).ready(function () {

    $('#example').DataTable({
           "aaSorting":[],
            "ajax": {
               "url":"/get_query_data",
               "dataSrc":"data",
               "dataType":"json",
               "contentType":"application/json"
              },
            "columns": [
                {"data": "Query"},
                {"data": "Fraction ok"}
             ],
            "createdRow": function ( row, data, index ) {
             if (data["Fraction ok"] < 0.8 ) {
                 $('td', row).addClass('highlight');
               }
            }
        });
      });
   }

and the data table still comes out with no highlighting...

kthorngren

Do you get any errors in the browser's console?

Without seeing the data its hard to say whet the problem is. I would add some debug output using console.log, for example:

            "createdRow": function ( row, data, index ) {
             console.log(data["Fraction ok"]);
             console.log(data["Fraction ok"] < 0.8);
             if (data["Fraction ok"] < 0.8 ) {
                 console.log('if is true');
                 $('td', row).addClass('highlight');
               }
            }

If you see the output if is true then the if statement is working but your highlight class isn't.

If this doesn't help then please post a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

EDIT: Just noticed your selector of $('td', row) doesn't look right. Checkout the createdRow example here.

Kevin