Adding print, export, pdf buttons, edit button and image in column.

doghi · December 2022

Link here:
**If i add the default code from datatable for print button, no data is displayed anymore in my table. Also no print button displayed.

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'print'
        ]
    } );
} );**:
No error message:
**I want to add print, copy, pdf buttons to my test code (downloaded from here). I also need a edit button for every entry. And i need to display an image in a column. I have a second code, with print function working (here) from datatables examples, but i dont know how to integrate it with my actual code. I tried to add the printing code, but not working at all... **:

kthorngren · December 2022

Its hard to say what the problem is without seeing it. The test case you link to seems to work. Please post a link to your page or a test case replicating the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

doghi · December 2022

Thanks for your reply kthorngren .

Im trying to make a case test (im new with this).

doghi · December 2022

I tried...cant manage to integrate the code into test js bin cause i have some php query for msql.

How can i add this code

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'print'
        ]
    } );
} );

into my code (see attachament).

kthorngren · December 2022

You can only initialize Datatables once. So add the code to create the buttons to your current initialization. Like this:

        var dataTable = $('#order_table').DataTable({
           dom: 'Bfrtip',
             buttons: [
              'print'
            ],
            "processing" : true,
            "serverSide" : true,
            "order" : [],
            "ajax" : {
                url:"action.php",
                type:"POST",
                data:{action:'fetch', start_date:start_date, end_date:end_date}
            },
            "drawCallback" : function(settings)
            {
                var sales_date = [];
                var sale = [];

                for(var count = 0; count < settings.aoData.length; count++)
                {
                    sales_date.push(settings.aoData[count]._aData[2]);
                    sale.push(parseFloat(settings.aoData[count]._aData[1]));
                }

                var chart_data = {
                    labels:sales_date,
                    datasets:[
                        {
                            label : 'Sales',
                            backgroundColor : 'rgb(255, 205, 86)',
                            color : '#fff',
                            data:sale
                        }
                    ]   
                };

                var group_chart3 = $('#bar_chart');

                if(sale_chart)
                {
                    sale_chart.destroy();
                }

                sale_chart = new Chart(group_chart3, {
                    type:'bar',
                    data:chart_data
                });
            }
        });

Kevin

doghi · December 2022

Hello there,

Thx for your help.

I added your code, but now no data displaying anymore.

Check here for debug.

kthorngren · December 2022

When things aren't working as expect look at the console for errors. You are getting this error:

Uncaught SyntaxError: Invalid or unexpected token

Looking at the source I see some strange characters;

        var dataTable = $('#order_table').DataTable({
         dom: 'Bfrtip',
����      �buttons: [
�����     �'print'
���       �],

I guess your editor did this when pasting the code. Remove it and try typing it.

Kevin

doghi · December 2022

doghi · December 2022

I removed the empty space, and now seems to work. But no print button displayed.

I need to declare some extra css or js ?

Now i have this :

    <!-- Bootstrap CSS -->
    <link href="library/bootstrap-5/bootstrap.min.css" rel="stylesheet" />
    <link href="library/dataTables.bootstrap5.min.css" rel="stylesheet" />
    <link href="library/daterangepicker.css" rel="stylesheet" />

    <script src="library/jquery.min.js"></script>
    <script src="library/bootstrap-5/bootstrap.bundle.min.js"></script>
    <script src="library/moment.min.js"></script>
    <script src="library/daterangepicker.min.js"></script>
    <script src="library/Chart.bundle.min.js"></script>
    <script src="library/jquery.dataTables.min.js"></script>
    <script src="library/dataTables.bootstrap5.min.js"></script>

kthorngren · December 2022

You need to install the buttons library along with print.js. See the Buttons docs for details. Use the Download Builder to get the need libraries.

Kevin

doghi · December 2022

omg is working finaly

Second problem (if you still have time for me).

How can i add a edit button for each row ?

custom-url.com/button=$ordernumber

Or in column order number to display numbers as link, and the link to be my custom link. custom-url.com/button=$ordernumber

kthorngren · December 2022

Here is an example showing how to add buttons to each row.
http://live.datatables.net/xijecupo/1/edit

It uses jQuery delegated events as shown in this example. Once you get the data you can open a modal or whatever you need to edit the data. Use jQuery ajax() to send the edits to the server if desired. Use row().data() to update the row with the edits.

Kevin

doghi · December 2022

Hello there,

No need for modal, just to redirect the user to a custom page.

Im trying the solution from your link, brb .

I also found all documentation i needed but in all my tries i did not manage to combine it with my actual code.

doghi · December 2022

Hello there,

Im back in business

I just made some new tests and dom: 'Bfrtip',buttons: ['print'] is working well except that is printing only page 1...and i have around 50-100 pages.

allan · December 2022

See the last FAQ in the server-side processing section.

Allan

doghi · December 2022

Hello there,

Thx for your answer.

I manage to add an edit button and image in my columns.

But the problem is when i use print button, my column with image is empty on print;

"targets": 4,
"data": 4,
"render": function ( data, type, row, meta ) {
return ' <img style="width: 100px;" src="https://myurl.com/'+data+'">';}} ],
dom: 'Bfrtip',buttons: ['print']['excel'],

doghi · December 2022

Update.

I manage to solve the printing image problem replacing

dom: 'Bfrtip',buttons: ['print']['excel'],)

with

dom: 'Bfrtip',
buttons: [
{
extend: 'print',
exportOptions: {
stripHtml : false,
columns: [0, 1, 2, 3, 4]}}],

doghi · December 2022

Now i have another problem

After adding a edit button, i added an image in column using the same way, but now my edit button now working anymore after i duplicate code

"columnDefs": [ {
"targets": 0,
"data": 0,
"render": function ( data, type, row, meta ) {
return '<a href="'+data+'">Edit '+data+' </a>';}} ],
"columnDefs": [ {

"targets": 4,
"data": 4,
"render": function ( data, type, row, meta ) {
return ' <img style="width: 100px;" src="https://website.com/'+data+'">';}} ],

kthorngren · December 2022

As with all the Datatables options you can only define them once. Meaning you can have only one columnDefs. Combine all the definitions you want in one columnDefs, like this:

"columnDefs": [ {
"targets": 0,
"data": 0,
"render": function ( data, type, row, meta ) {
return '<a href="'+data+'">Edit '+data+' </a>';}},
{"targets": 4,
"data": 4,
"render": function ( data, type, row, meta ) {
return ' <img style="width: 100px;" src="https://website.com/'+data+'">';}} ],

Kevin

doghi · December 2022

Yeap, i tried this first time but something went wrong.

Slowly im starting to understand this.

Now im trying to add a condition for column with image.

Im extracting image from database something like this : 27.12.2022/image.jpeg

And im trying to add a condition for columns where image url is empty.

{"targets": 4,
"data": 4,
"render": function ( data, type, row, meta ) {

if (empty(.+data+.)) {
return ' No image';}} ],
else {
return ' <img style="width: 100px;" src="website.com/'+data+'">';}} ],

but i dont manage to add the data into condition

if (empty(.+data+.)) {
if (empty(+data+)) {

i get sintax error.

doghi · December 2022

doghi · December 2022

I still dont manage to print all pages only first page.

Any help on this ?

Thx!

kthorngren · December 2022

I still dont manage to print all pages only first page.

Are you using server side processing and did you read the FAQ?

Kevin

doghi · December 2022

Yeap, in FAQ i read that printing all pages not working on server side processing, im right ?

kthorngren · December 2022

That is correct. Datatables only knows about the data at the client. With server side processing that is only the current page. This means Datatables can only export the page of data at the client.

Kevin

doghi · December 2022

Not sure what to do, i have now around 100k rows, and in future will get 300k+, server procesing is the right way for fast loading, right?

kthorngren · December 2022

server procesing is the right way for fast loading, right?

Yes. As the FAQ you will need to use a server based solution. You will need to find a library that works in your server environment.

Kevin

Adding print, export, pdf buttons, edit button and image in column.

Adding print, export, pdf buttons, edit button and image in column.

Replies

Howdy, Stranger!

Categories

DataTables

Adding print, export, pdf buttons, edit button and image in column.

Adding print, export, pdf buttons, edit button and image in column.

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables