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: 132Questions: 23Answers: 1

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: 56Questions: 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: 3,342Questions: 35Answers: 394
    Answer ✓

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

  • vaishnavkokavaishnavkoka Posts: 132Questions: 23Answers: 1

    @MSltd, tangerine,

    It worked..!!

    Thanks
    Koka

  • MSLtdMSLtd Posts: 56Questions: 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: 132Questions: 23Answers: 1

    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: 61,446Questions: 1Answers: 10,054 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: 132Questions: 23Answers: 1

    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: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • vaishnavkokavaishnavkoka Posts: 132Questions: 23Answers: 1

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

    Thanks
    koka

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • vaishnavkokavaishnavkoka Posts: 132Questions: 23Answers: 1

    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: 3,342Questions: 35Answers: 394

    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: 132Questions: 23Answers: 1

    I used the download builder @tangerine.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 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: 132Questions: 23Answers: 1

    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: 132Questions: 23Answers: 1

    <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" /> <script type="text/javascript" src="http://127.0.0.1/deg_login/scripts/jquery.min.js"></script> <script type="text/javascript" src="http://127.0.0.1/deg_login/scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script> <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script> </head> <body> <style> th { white-space: nowrap; } </style> <div class="bootstrap-iso"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <form class="form-horizontal" action="http://127.0.0.1/deg_login1.2/touch files sample/statistics ajax/more-feature-col-pdf-add.php" method="post"> <div class="form-group "> <label class="control-label col-sm-2 requiredField" for="date">Start Date<span class="asteriskField">*</span></label> <div class="col-sm-10"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input class="form-control date" id="date1" name="start_date" placeholder="YYYY/MM/DD" type="text" readonly="readonly" data-date-end-date="0d"/> <!-- if readonly is mentioned then user wont be able to enter dates manually , it is optional to mention readonly--> </div> </div> <label class="control-label col-sm-2 requiredField" for="date">End Date<span class="asteriskField">*</span></label> <div class="col-sm-10"> <div class="input-group"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input class="form-control date" id="date1" name="end_date" placeholder="YYYY/MM/DD" type="text" readonly="readonly" data-date-end-date="0d"/> </div></div></div> <div class="form-group"> <div class="col-sm-6 col-sm-offset-2"> <button class="btn btn-primary " name="submit" type="submit" >Submit</button> </div></div></form></div></div></div></div> <style> th { white-space: nowrap; } </style> <script> $(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)' ); } } ); } ); </script>
    <?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"/> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://127.0.0.1/deg_login/statistics/css/jquery-1.12.3.js"></script> <script src="http://127.0.0.1/deg_login/statistics/css/jquery.dataTables.js"></script> <script src="http://127.0.0.1/deg_login/statistics/css/dataTables.bootstrap4.js"></script> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script> <script> $(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' }) }) </script> </body> </html>

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 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: 132Questions: 23Answers: 1

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

    Thanks
    Koka

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    The browser's console shows these errors:

    buttons.flash.min.js:24 Uncaught TypeError: Cannot read property 'version' of undefined

    Uncaught Unknown button type: print

    The problem is you are loading jQuery multiple times and Datatables multiple times. I commented out the extra jQuery and Datatables 1.10.16. Also had to move the Datatables 1.10.19 above the buttons loading.

    Checkout the updated example:
    http://live.datatables.net/xihicaku/1/edit

    Kevin

  • vaishnavkokavaishnavkoka Posts: 132Questions: 23Answers: 1

    Hi @Kevin,

    Thanks for help.
    I have few questions:
    1. is it possible customize(alignment,colors,lookwise) the pdf ?
    2. can we include "total"(as you can see in datatable) in our pdf ?
    3. show entries is missing from datatable, so how would i get it back ?
    4. Are those buttons(pdf,print etc) are customizable(coloring etc)?

    Regards
    Koka

  • vaishnavkokavaishnavkoka Posts: 132Questions: 23Answers: 1

    I got solution for the 3rd question:
    "lengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]], dom: 'lBfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print'],

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Yes to the remaining questions. Use the customize callback of the pdfHtml5 button type (example). You'll need to refer to the pdfmake documentation for the options it offers for alignment, colour and so on. That is outside the scope of the support we provide.

    Allan

This discussion has been closed.