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

vaishnavkoka

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

MSLtd

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

tangerine

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

vaishnavkoka

@MSltd, tangerine,

It worked..!!

Thanks
Koka

MSLtd

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

vaishnavkoka

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

allan

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

vaishnavkoka

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

allan

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

Allan

vaishnavkoka

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

Thanks
koka

tangerine

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

allan

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

Allan

allan

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

Allan

vaishnavkoka

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

tangerine

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?

vaishnavkoka

I used the download builder @tangerine.

allan

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

vaishnavkoka

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>

Start Date*

End Date*

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>`

vaishnavkoka

<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>

allan

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

vaishnavkoka

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

Thanks
Koka

kthorngren

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

vaishnavkoka

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

vaishnavkoka

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

allan

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