Changing row colors according to value of some columns from a separate method

Changing row colors according to value of some columns from a separate method

sumitshiningsumitshining Posts: 12Questions: 0Answers: 0
edited December 2012 in General
Hi,

I have a method to render the datatable. The same method is used to render it on different pages with different content.
For a specific page I need to customize my rows by adding background colors to those with a specific value in one of the columns. So, I can't specify anything like creating customized class names to the rows, etc. I need to add a separate method where this task shall be accomplished. How shall I proceed?

Replies

  • ulrikeulrike Posts: 39Questions: 1Answers: 0
    edited December 2012
    I would do something like that :

    [code]
    $('tbody td').each( function () {
    if ( $(this).text().indexOf("the text you are searching for") >= 0 ) {
    $(this).parent('tr').addClass('specialColor'); // this targeting may not work with FixedColumns
    }
    });
    [/code]
  • sumitshiningsumitshining Posts: 12Questions: 0Answers: 0
    It won't help much. I actually need to mark those rows red in which ratio of two specific columns is greater than 5. Thus, I need to access the datatable to execute this query.
  • ulrikeulrike Posts: 39Questions: 1Answers: 0
    You could probably do this using Javascript, replacing this line
    [code]
    if ( $(this).text().indexOf("the text you are searching for") >= 0 ) {
    [/code]
    with something more suitable.
    Why don't you create a test case on live.datatables.net ?
  • sumitshiningsumitshining Posts: 12Questions: 0Answers: 0
    This is the first time I am using dataTables and is the first time I am on this website. Still exploring it.
  • sumitshiningsumitshining Posts: 12Questions: 0Answers: 0
    This logic of yours would loop through all the cells and convert parent "tr" to red. But I need to calculate ratio of two columns in a row. How to do that? I am able to achieve it when I implement the logic in the code where the data table in generated using fnRowCallback. How to do it here. I am still confused.
  • ulrikeulrike Posts: 39Questions: 1Answers: 0
    Can you put up an example on live.datatables.net?
  • sumitshiningsumitshining Posts: 12Questions: 0Answers: 0
    http://live.datatables.net/ewemuz/2/edit
  • ulrikeulrike Posts: 39Questions: 1Answers: 0
    edited December 2012
    Hello,

    you should probably check the function fnGetData.
    I guess this is what you need to get the data out of a table cell, put it into a variable, so you can calculate the ratio : http://datatables.net/api
    When you initialize the table do it that way :
    [code]var oTable = = $('#example').dataTable({});[/code]
    so you can access all data using the oTable variable later on.

    For example, looping through all rows :

    [code]
    var total = oTable.fnSettings().fnRecordsTotal();
    for(i = 0; i < total; i++) {
    var row = oTable.fnGetData(i);
    console.log(row);
    }
    [/code]

    But as you will see in the documentation, you may access TDs directly too.
    Hope this helps.
  • sumitshiningsumitshining Posts: 12Questions: 0Answers: 0
    edited December 2012
    The problem seems to be a bit different. The code initialising the table is in different file (as it is being shared by other files too). The code I have to write is in other file. This custom method should be called after the table is generated but it is actually being called before it. I tried using fnRowCallback and fnRowCreated, etc but none helped. So, because of this, it gets nothing on the nodes.

    Further, it asks to use bRetrieve or bDestroy. When I use these nothing happens. The problem remains same.

    The page actually loads in two parts. At first, the page is rendered and then, the table is rendered through an ajax call. Can this be the problem?
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Please link us to a test page showing what you've got so far ( http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read ). fnRowCallback is what I would use myself to format a row / cell based on content.

    Allan
  • sumitshiningsumitshining Posts: 12Questions: 0Answers: 0
    Allan,

    I have updated the test case, http://live.datatables.net/ewemuz/5
  • sumitshiningsumitshining Posts: 12Questions: 0Answers: 0
    Well, the code is working for me this way but with a slight problem.
    [code]$('body').ajaxComplete(function() {
    var datatable = $('#orders-table').dataTable();
    var total = datatable.fnSettings().fnRecordsTotal();
    for(i = 0; i < total; i++) {
    console.log(i);
    var row = datatable.fnGetData(i);
    if(row == null)
    return;
    if(row[12]/row[13] > 5){
    $('td', row).css('background-color', '#FFDDDD');
    }
    //return row;
    }
    });
    [/code]

    The problem is, all the rows turn red if any of them satisfy the condition. What shall be done?
This discussion has been closed.