javascriptphphtmlhtml-tabledynatable

Coloring rows based on row values in Dynatable


I'm trying to color rows based on "Status" which can be Red/Green. Using dynatable to generate table rows based from JSON data.

The problem is that whenever I call the following code from dynatable, it always gets overwritten by dyntable.process();

$('#mytable tr td').each(function() {
    if ($(this).text() == 'Red') {
        $(this).closest('tr').css('background-color', '#f00');
    }
});

My index.php: http://pastie.org/10389654

My index.js: http://pastie.org/10389656


Solution

  • Look at this point of the docs : Documentation - Event

    And use probably the dynatable:beforeUpdate event

    Some approach like this :

       var dynatable = $('#mytable').dynatable({
      dataset: {
          ajax: true,
          ajaxUrl: './api.php',
          ajaxOnLoad: true,
          records: []
      },
      params: {
          records: 'data'
      },
      features: {
          paginate: false,
          sort: false,
          pushState: false,
          search: false,
          recordCount: false,
          perPageSelect: false
      }
    }).data('dynatable').bind('dynatable:afterProcess', changeColor);
    

    And then your function

    function changeColor() {
        $('#mytable tr td').each(function() {
            if ($(this).text() == 'Red') {
                $(this).closest('tr').css('background-color', '#f00');
            }
        });
    }