How to change the text-color of a row value? I have code but it changes the background color instead

How to change the text-color of a row value? I have code but it changes the background color instead

vaishnavkokavaishnavkoka Posts: 60Questions: 9Answers: 0

rowCallback: function(row, data, index){ if(data[3]=='failed'){ $(row).find('td:eq(2)').css('background-color', 'red'); } else if(data[3]=='completed'){ $(row).find('td:eq(2)').css('background-color', 'green'); } else if(data[3]=='success'){ $(row).find('td:eq(2)').css('background-color', 'green'); } },

I just want to change text-color.
Thank
Koka

This question has accepted answers - jump to:

Answers

  • MSLtdMSLtd Posts: 53Questions: 5Answers: 4
    Answer ✓

    Hello @vaishnavkoka , have you tried:
    $(row).find('td:eq(2)').css('color', 'red');?

    At the moment you are using the CSS styling on the background of the cell, and not the foreground (text) - you can check the W3Schools reference for more information on colours here: W3Schools: Colors

    If this doesn't work just give me a shout :)

  • tangerinetangerine Posts: 2,099Questions: 14Answers: 232
    Answer ✓

    Just use "color" instead of "background-color". Basic CSS.

  • vaishnavkokavaishnavkoka Posts: 60Questions: 9Answers: 0

    @MSltd, tangerine,

    It worked..!!

    Thanks
    Koka

  • MSLtdMSLtd Posts: 53Questions: 5Answers: 4

    Glad I could help, If you can accept the answer so it'll mark this discussion as answered that'd be great :wink:

  • vaishnavkokavaishnavkoka Posts: 60Questions: 9Answers: 0

    Is it possible to use export buttons in html forms(i am using post method here) ?
    I tried many times but it doesnt show the export buttons

  • allanallan Posts: 47,070Questions: 1Answers: 6,629 Site admin

    How do you mean? Putting it inside a <form> element shouldn't really make any difference. Could you link to a page showing the issue please?

    Allan

  • vaishnavkokavaishnavkoka Posts: 60Questions: 9Answers: 0

    Here is my script:
    `$(document).ready(function() {
    $('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
    'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "footerCallback": function ( row, data, start, end, display ) {
    var api = this.api(), data;

            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
    
            // Total over all pages
            total = api
                .column( 2 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
    
            // Total over this page
            pageTotal = api
                .column( 2, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
    
            // Update footer
            $( api.column( 2 ).footer() ).html(
                'gb'+pageTotal +' ( gb'+ total +' total)'
            );
        }
    } );
    

    } );
    `
    I am using date field to retrieve the data from the database so cant link up with that.
    but my initial output is :
    http://prntscr.com/k5kbxn
    after giving parameters to date field my output would look like:
    http://prntscr.com/k5kci5
    Though i included all the library file required for buttons it still doesn't appear in the page

  • allanallan Posts: 47,070Questions: 1Answers: 6,629 Site admin

    Can you use the debugger so I can get a trace of the table please?

    Allan

  • vaishnavkokavaishnavkoka Posts: 60Questions: 9Answers: 0

    Here is the debugging report:
    https://debug.datatables.net/exomof

    Thanks
    koka

  • tangerinetangerine Posts: 2,099Questions: 14Answers: 232

    The debugger says you haven't included the Buttons extension.

  • allanallan Posts: 47,070Questions: 1Answers: 6,629 Site admin

    The download builder is the best way to make sure you include everything you need.

    Allan

  • allanallan Posts: 47,070Questions: 1Answers: 6,629 Site admin

    p.s. The debugger doesn't show the dom or buttons configuration options you showed above - just the footerCallback.

    Allan

  • vaishnavkokavaishnavkoka Posts: 60Questions: 9Answers: 0

    Though i used the buttons as told by you in my code, the debugger still didn't locate the buttons :
    `$(document).ready(function() {
    $('#example').DataTable( {
    "fnDrawCallback": function( oSettings ){
    console.log("in");
    },
    dom: 'Bfrtip',
    buttons: [
    'copy', 'csv', 'excel', 'pdf', 'print'
    ],
    "footerCallback": function ( row, data, start, end, display ) {
    var api = this.api();

            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
              console.log(i, numeral(i).value());
                return typeof i === 'string' ?
                        numeral(i).value() : i;
            };
    
            // Total over all pages
            total = api
                .column( 2 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
    
            // Total over this page
            pageTotal = api
                .column( 2, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
    
            total = numeral(total).format('0.0a');
            pageTotal = numeral(pageTotal).format('0.0a');
            // Update footer
            $( api.column( 2 ).footer() ).html(
                '--'+pageTotal +' ( --'+ total +' total)'
            );
        }
    } );
    

    } );`
    https://debug.datatables.net/awiwon

  • tangerinetangerine Posts: 2,099Questions: 14Answers: 232

    The debugger says you haven't included the Buttons extension.

    The download builder is the best way to make sure you include everything you need.

    Did you download and install the Buttons extension individually?

    Alternatively, did you use the download builder?

  • vaishnavkokavaishnavkoka Posts: 60Questions: 9Answers: 0

    I used the download builder @tangerine.

  • allanallan Posts: 47,070Questions: 1Answers: 6,629 Site admin

    If the debugger didn't find the Buttons library, it is unlikely that Buttons would work on the page. However, if it has been included on the page and still isn't found, we'd need a link to a page showing the issue so it can be debugged.

    Allan

  • vaishnavkokavaishnavkoka Posts: 60Questions: 9Answers: 0

    here is my code :
    `<html>
    <head>
    <link rel="stylesheet" type="text/css" href="https://formden.com/static/cdn/bootstrap-iso.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" />
    <link rel="stylesheet" type="text/css" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />













    </head>
    <body>
    <style>
    th { white-space: nowrap; }
    </style>

    Submit

    <style>
    th { white-space: nowrap; }
    </style>

    $(document).ready(function() { $('#example').DataTable( { "fnDrawCallback": function( oSettings ){ console.log("in"); }, dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ], "footerCallback": function ( row, data, start, end, display ) { var api = this.api(); var intVal = function ( i ) { console.log(i, numeral(i).value()); return typeof i === 'string' ? numeral(i).value() : i;}; total = api .column( 2 ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); pageTotal = api .column( 2, { page: 'current'} ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); total = numeral(total).format('0.0a'); pageTotal = numeral(pageTotal).format('0.0a'); $( api.column( 2 ).footer() ).html( '--'+pageTotal +' ( --'+ total +' total)' ); } } ); } );

    <?php if($_SERVER["REQUEST_METHOD"] == "POST"){ echo("MY START DATE IS ".$_POST["start_date"]); ?>
    <div id="customers">
    <div class="table-responsive">
    <table id="example" class="table table-bordered table-striped" width="100%" role="grid">
    <thead>
    <tr>
    <th>SNO</th>
    <th>FILENAME</th>
    <th>FILESIZE</th>
    </tr>
    </thead>
    <tbody>
    <?php
    $date1=$_POST['start_date'];
    $date2=$_POST['end_date'];
    $conn = mysqli_connect("localhost","root","","koka");
    $result=mysqli_query($conn,"SELECT * FROM file_info2 WHERE date BETWEEN '" . $date1 . "' AND '" . $date2 . "'");
    while($row=mysqli_fetch_assoc($result)):
    ?>
    <tr>
    <td><?php echo $row['sno'];?></td>
    <td><?php echo $row['file_name'];?></td>
    <td><?php echo $row['file_size'];?></td>
    </tr>
    <?php endwhile;}?>
    </tbody>
    <tfoot>
    <tr>
    <th colspan="2" style="text-align:right">total</th>
    <th></th>
    </tr>
    </tfoot>
    </table>
    </div>
    </div>
    <link rel="stylesheet" type="text/css" href="http://127.0.0.1/deg_login/statistics/css/bootstrap.css"/>




    </div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

    $(document).ready(function(){ var date_input=$(".date"); //our date input has the name "date" var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; date_input.datepicker({ format: 'yyyy/mm/dd', container: container, todayHighlight: true, autoclose: true, maxDate: 'now' }) })

    </body>
    </html>`

  • vaishnavkokavaishnavkoka Posts: 60Questions: 9Answers: 0

    `<html>
    <head>
    <link rel="stylesheet" type="text/css" href="https://formden.com/static/cdn/bootstrap-iso.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" />
    <link rel="stylesheet" type="text/css" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />













    </head>
    <body>
    <style>
    th { white-space: nowrap; }
    </style>

    Submit

    <style>
    th { white-space: nowrap; }
    </style>

    $(document).ready(function() { $('#example').DataTable( { "fnDrawCallback": function( oSettings ){ console.log("in"); }, dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ], "footerCallback": function ( row, data, start, end, display ) { var api = this.api(); var intVal = function ( i ) { console.log(i, numeral(i).value()); return typeof i === 'string' ? numeral(i).value() : i;}; total = api .column( 2 ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); pageTotal = api .column( 2, { page: 'current'} ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); total = numeral(total).format('0.0a'); pageTotal = numeral(pageTotal).format('0.0a'); $( api.column( 2 ).footer() ).html( '--'+pageTotal +' ( --'+ total +' total)' ); } } ); } );

    <?php if($_SERVER["REQUEST_METHOD"] == "POST"){ echo("MY START DATE IS ".$_POST["start_date"]); ?>

    ` <?php $date1=$_POST['start_date']; $date2=$_POST['end_date']; $conn = mysqli_connect("localhost","root","","koka"); $result=mysqli_query($conn,"SELECT * FROM file_info2 WHERE date BETWEEN '" . $date1 . "' AND '" . $date2 . "'"); while($row=mysqli_fetch_assoc($result)): ?> ` ` <?php endwhile;}?> `
    SNO FILENAME FILESIZE
    <?php echo $row['sno'];?> <?php echo $row['file_name'];?> <?php echo $row['file_size'];?>
    total

    <link rel="stylesheet" type="text/css" href="http://127.0.0.1/deg_login/statistics/css/bootstrap.css"/>




    </div>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

    $(document).ready(function(){ var date_input=$(".date"); //our date input has the name "date" var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body"; date_input.datepicker({ format: 'yyyy/mm/dd', container: container, todayHighlight: true, autoclose: true, maxDate: 'now' }) })

    </body>
    </html>`

  • allanallan Posts: 47,070Questions: 1Answers: 6,629 Site admin

    Please use https://jsfiddle.net or http://live.datatables.net if you can't provide a link to a page showing the issue. Without a test case, I'm afraid I won't be able to reply to this thread again.

    Allan

  • vaishnavkokavaishnavkoka Posts: 60Questions: 9Answers: 0

    Hi @Allan,
    Here is the link to the datatable:
    http://live.datatables.net/gofewiso/1/edit

    Thanks
    Koka

Sign In or Register to comment.