Use fetched data as font color in row

Use fetched data as font color in row

martin1223345martin1223345 Posts: 84Questions: 23Answers: 0
edited February 2021 in Free community support

Hello, I am new to Datatables. So far i got it working but i am stuck at one thing. I have for every account (row) a colorcode saved in my database. I need to use that colorcode as the #color code to change the font color or all rows (i now have one set) . Is this posible and if so how ?

  <script type="text/javascript">
    $(document).ready(function() {
        $('#accountTable').dataTable({
            'rowCallback': function(row, data, index){
   
        $(row).find('td:eq(3)').css('color', '+ cat_color +');
        $(row).find('td:eq(4)').css('color', '#F39B9B');
    
    
  }, 
            
            "processing": true,
            "ajax": "selectdatatable_allacc.php",
            "columns": [
                {data: 'id'},
                {data: 'name'},
                {data: 'email'},
                {data: 'password'},
                {data: 'rang'},
                {data: 'cat_color'},
                { 'data': null, title: 'Dead', wrap: true, "render": function (item) { return '<input type="submit" value="Dead" style="width:57px !important;" class="example_e" onClick="mobreset(' + item.id + ') "/>' } },
                { 'data': null, title: 'Login', wrap: true, "render": function (item) { return '<input type="submit" value="Login" style="width:57px !important;" class="example_e" onClick="mobLogin(' + item.id + ') "/>' } },
                { 'data': null, title: 'Action 2', wrap: true, "render": function (item) { return '<input type="button" value=" Edit " id= ' + item.id + ' style="width:57px !important;" class="example_c edit_data" />' } },
                
                
            ],   
            
    
            
        });
    
        
        
    });
    </script> 

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • kthorngrenkthorngren Posts: 21,341Questions: 26Answers: 4,954
    edited February 2021

    Without seeing your data its hard to give a specific example. Looks like the second line $(row).find('td:eq(4)').css('color', '#F39B9B'); should work.

    The ‘data’ parameter had the row data. Use that to access the data that had the desired color. If you still need help please build a simple test case with an example of your data.
    https://datatables.net/manual/tech-notes/10

    You can update this example with you rowCallback option.
    http://live.datatables.net/fepomili/1/edit

    Kevin

  • martin1223345martin1223345 Posts: 84Questions: 23Answers: 0

    Thanks for reacting. I know that line works, it is there as example. My color codes are stored in the colomn of every row as #11111 and so on. So instead of a hardcoded color i want this data to he used. The color data is fethed and called cat_color. So how do i replace that color with my fetched data?

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • martin1223345martin1223345 Posts: 84Questions: 23Answers: 0

    What do i need to set in this test case? As the data, the color codes are fetched from the sql server. All i need to know is if it is posible to use the variable instead of the hardcoded color code. All the color codes are now stored in the colomn cat_color as every account(row) has its own color code safed so that the font will change color based on that color code. So how do i make this in the test case. I am new to this so sorry for my reaction

  • martin1223345martin1223345 Posts: 84Questions: 23Answers: 0

    I have tried to do what you ask. I used the example of kthorngren.

    As you can see the colomn colorcode has color hexes stored. I want those codes to be used to color the specific row it is stored in. So for example. The row with Garrett Winters should now have the age colomn colored with the colorcode #F39B9B as this is the color code which is saved and fetched from the sql tablle. I hope i have given enough information?

    http://live.datatables.net/fepomili/2/edit

  • martin1223345martin1223345 Posts: 84Questions: 23Answers: 0
    edited February 2021

    Update. I found a other solution to accomplish what i am looking for. I render every colomn and add inline font color based on the code stored in the colomn. See below code.

    {data: 'notes',
            render: function ( data, type, row, meta ) {
              return '<font color='+row.cat_color+'>'+data+'</font>';
            } 
    
  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Excellent, thanks for reporting back,

    Colin

This discussion has been closed.