Quantcast
Channel: Buttons — DataTables forums
Viewing all 478 articles
Browse latest View live

Excel Export doesn't work

$
0
0

neither Flash nor Html5 excel download works in my project (trying in Chrome or FF && ubuntu/windows)

Problem: the flash excel button appears but downloads empty file the html5 excel button doesn't throw error but doesnt appear

Facts: all other buttons get displayed/working using actual version of Datatable (even nightly html5) html5 buttons in examples work

Setup:

elem.DataTable({ "aaData":ray, "aoColumns": col, "destroy": true, "dom": 'Bfrtip', "sScrollX": param.tableScroll, "buttons":[ 'copyHtml5', 'excelHtml5' ], "order": [[ order.row, order.dir.toLowerCase() ]], "columnDefs": [{ "render": function(data, type, row){ if(type == "display"){ return moment(data).format("L"); } else{ return data; } } ,"targets": hasDate }]
});

Dependencys: (in this order (require.js)) 'datatables.net', "datatables.net-bootstrap", 'datatables.net-buttons', "datatables.net-jszip", "datatables.net-pdfmake", "datatables.net-vhf_Fonts", 'datatables.net-buttons-bootstrap', 'datatables.net-buttons-html5', "datatables.net-buttons-flash", 'datatables.net-buttons-print

i've no idea what could be the problem i would appreciate every try

Thanks for reading

http://debug.datatables.net/omaged


Buttons and scrollX - adjusting column width with column visibility

$
0
0

Debugger code: abaday

I have implemented Buttons, using the colvisGroup extension. Different groups of columns are shown and hid when the buttons are clicked. Also,
stateSave: true
so the column visibility is saved for the user.

Unfortunately, the table doesn't resize correctly. The scrollx option creates a table that is just a smidge too big so I end up with a scrollbar for every table, no matter which columns are visible. The table will resize correctly when I choose the different column visibilities, but the table always has that extra few pixels that put a scollbar in when it isn't required. If I set scrollx: false, the initial table load works well. However, the table doesn't resize as the column visibility is changed.

I've tried messing around with creating custom actions for each button. The only thing that works that I've found is to call
dt.columns.adjust().draw()
. Unfortunately, this creates a new ajax call to the server and I'd rather not do that unless absolutely necessary.

Any thoughts? What other information would be helpful to include to be able to find a solution?

Thanks!

Include two "tr" in the print and export

$
0
0

Hi All,

I am trying to print header with two tr, but the export and print will only include one tr
i have this code

    <thead>
        <tr id="previous_balance">
            <th colspan="10"></th>
            <th colspan="2">Previous Balance</th>
            <th colspan="1">11697678.8663</th>
        < /tr >
        < tr role="row" >
            <th>#</th>
            <th>ID</th>
            <th>CID</th>
            <th>P\R</th>
            <th>Cat</th>
            <th>C Date</th>
            <th>Inv Date</th>
            <th>Amount</th>
            <th>Cur/Ex-R</th>
            <th>Note</th>
            <th>Debit AED</th>
            <th>Credit AED</th>
            <th>Total</th>
        </tr>
    < / thead >

and the print and the export will show only this part

<tr role="row">
            <th>#</th>
            <th>ID</th>
            <th>CID</th>
            <th>P\R</th>
            <th>Cat</th>
            <th>C Date</th>
            <th>Inv Date</th>
            <th>Amount</th>
            <th>Cur/Ex-R</th>
            <th>Note</th>
            <th>Debit AED</th>
            <th>Credit AED</th>
            <th>Total</th>
        </tr>

so is there a way to print both tr's

BR
Belal

Buttons Disappear after adding ajax:"..." data source

$
0
0

Buttons Show when i use html data.

$(document).ready(function() {
 var table = $('#example').DataTable( {
        lengthChange: false,
        buttons: true
    } );
 
    table.buttons().container()
        .insertBefore( '#example_filter' );
});

</script>

but when i want to use ajax data source, the buttons disappear.

$(document).ready(function() {
 var table = $('#example').DataTable( {
        lengthChange: false,
        buttons: true,
        ajax: "setData.php",
           columns: [...............]

    } );
 
    table.buttons().container()
        .insertBefore( '#example_filter' );
});



How can I set default values for buttons

$
0
0

I want to set '<i fa fa-edit'></i>' for the edit button in the defaults section.

The setting of defaults works, but setting values for buttons doesn't work. It still gives new, edit, delete.

I can't find the solution in the documentation.

$.extend( true, $.fn.dataTable.Buttons.defaults, {
    buttons: [
        { 
            extend: 'create', 
            name: 'test01'
        },
        { extend: 'edit',
        name: 'test02'
        }
    ]
});

$.extend( true, $.fn.dataTable.defaults, {
    dom: 'Bfrti',
    responsive: true,
    processing: true,
    serverside: true,
    select: true,
    rowId: 'id',
        buttons: [
        { 
            extend: 'create', 
            name: 'testj2e'
        },
        { extend: 'edit',
        name: 'gaap'
        }
    ],
    select: {
        style: 'os',
        selector: 'td:first-child'
    },
    "width": "90%",
    "height": "100%"
}); 

    area_roles = $('#area_roles').DataTable ( {
        // dom: 'Bfrti',
        // responsive: true,
        // processing: true,
        // serverside: true,
        // select: true,
        ajax: {
            url: '/areas/'+ document.getElementById("area_roles").getAttribute("area_id") +'/area_roles.json',
            type: 'GET'
        },
        // rowId: 'id',
        columns: [ 
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            }, 
            { data: 'name' },
            { data: 'description' },
            { editField: 'asset_required',
              render: function(d,type,row) {
                if (row.asset_required == "1") {
                    return '<i class="fa fa-check"></i>';
                } else {
                    return '<i class="fa fa-minus"></i>';
                }
            } },
            { editField: 'product_required',
              render: function(d,type,row) {
                if (row.product_required == "1") {
                    return '<i class="fa fa-check"></i>';
                } else {
                    return '<i class="fa fa-minus"></i>';
                }
            } }
        ],
        buttons: [ {
            extend: 'create',
            editor: editor
        }, {
            extend: 'edit',
            editor: editor
        }, {
            extend: 'remove',
            editor: editor
        }],
        order: [1, 'asc'],
        select: {
            style: 'os',
            selector: 'td:first-child'
        },
        "width": "90%",
        "height": "100%"
    });

Print Row Grouping on drawCallback

$
0
0

I am currently using datatables 1.10.10 and buttons 1.1.2 with buttons print plugin to enable printing features.

I am noticing that all my rendered data is included in the print except for the row groupings that I render using the "drawCallback" option. The row groupings I am referring to are mentioned here: http://datatables.net/examples/advanced_init/row_grouping.html

It seems the printing feature does not handle "drawCallback" additions. How might I get the row groupings to be included in my print result?

Thank you.

Excel Column width

$
0
0

I tried searching for this but all I am finding references TableTools... is there anyway to make the export function for Excel using Buttons to set the column width? I would really like for it to just autowidth.

When will the DataTables CDN for PDFmake be updated to include the latest build (0.1.20)?

$
0
0

The current version of PDFmake (0.1.18) included with the latest DataTables download builder does not work for exporting PDF in IE 11 (although it works just fine in Microsoft Edge and Chrome).

I have temporarily solved the problem by downloading pdfmake.js (build 0.1.20) and vsf_fonts.js (0.1.15) from GitHub:
https://github.com/bpampuch/pdfmake/tree/master/build and then referencing these scripts directly instead of including ",pdfmak-0.1.18" in the CDN provided by the download builder.

Jake


Removing a button on init also removing the button after it

$
0
0

I think this may be a bug, but when I have a button that on init I remove, it is also removing the button after it. On init, I run a check as to wether the button should be there or not, and if not, I remove it. Here is an example:

http://live.datatables.net/xogijufe/1/edit

On init, I tell it to remove the delete button, but then it is also removing the selectAll button when it shouldn't be.

If this is a bug, I am happy to open an issue on github. If not, is there something I am doing wrong? Or some other way I should accomplish the same thing?

Thanks for the help,
David B

Open with OpenOffice .xlsx document.

How to avoid Flash for File Export buttons

How to set the active state when a button is clicked in the "column groups" example?

$
0
0

I would like to set the active state when a button is clicked in the Column Groups example, and unset the active state for the other buttons. I have created a JSFiddle with my attempt to solve the problem. Unfortunately my code seems to toggle all the buttons, instead of only the one I click. If one button is clicked twice, the active state is deselected when it should remain selected.

Thanks

How to remove pagination when printing

Exporting specific columns dynamically

$
0
0

Hi,

We have a datatable directive in angularJs.
Our directive is initialized dynamically with both the data and meta-data.
If We're correct, the way to define which columns go to the print/csv/etc is either by hidding them, or by defining the buttonCommon.columns with the wanted buttons and then extending the wanted export button.

The problem is that:
1. We want some of the information that shows in the table not to go to the export.
2. We cannot defined the columns using the
buttonCommon.columns = $('#'+scope.id).DataTable().columns(':not(.notForPrint)');
because the datatable is not initiated yet (the buttons are part of the datatable options.

How can We overcome this?
Many thanks,
Yishay

How do you update the Page length button caption?

$
0
0

Hi,

regarding this
https://datatables.net/extensions/buttons/examples/initialisation/pageLength.html

How can you update the button caption?
I tried both
"lengthMenu": [
[10,20,50,100,200,400],
[10,20,50,100,200,400]
],
"sLengthMenu": "MENU",
and
"lengthMenu": 'Display <select>'+
'<option value="10">10</option>'+
'<option value="20">20</option>'+
'<option value="30">30</option>'+
'<option value="40">40</option>'+
'<option value="50">50</option>'+
'<option value="-1">All</option>'+
'</select> records'

The first worked button-wise, but the caption didn't changed (showed "Show 10 rows").
The second just didn't worked.

Thanks,
Yishay


Only Print button displays on all browsers

$
0
0

I have tried Ie (Edge) Chrome and FireFox. I have not tried Safari.

I am using JQuery UI.

I think I am loading everything I need:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/u/ju/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,af-2.1.2,b-1.2.0,b-colvis-1.2.0,b-flash-1.2.0,b-html5-1.2.0,b-print-1.2.0,r-2.1.0,rr-1.1.2,sc-1.4.2,se-1.2.0/datatables.min.css"/>

<s c r i p t type="text/javascript" src="https://cdn.datatables.net/u/ju/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,af-2.1.2,b-1.2.0,b-colvis-1.2.0,b-flash-1.2.0,b-html5-1.2.0,b-print-1.2.0,r-2.1.0,rr-1.1.2,sc-1.4.2,se-1.2.0/datatables.min.js"></s c r i p t>

Here is my init code:

    c9.orderguide.dataTable=$('#dt_orderguide').DataTable({
        "paging":           false,
        "ordering":         true,
        "createdRow":       function ( row, data, index ) {
                                $(row)  .attr('id', 'row_'+c9.orderguide.row)
                                        .data('row', c9.orderguide.row)
                                        .attr('data-row', c9.orderguide.row)
                                        .data('item', data[1])
                                        .attr('data-item', data[1])
                                        .data('uom', data[2])
                                        .attr('data-uom', data[2]);
                                c9.orderguide.row++;
                                return row;
                            },
        "columnDefs":   [
                            {
                                "targets": [ 0, 1, 2],
                                "visible": false
                            },
                            {
                                "targets": [0,1,2,3,4,5,6,7,8,9,10],
                                "orderable": false
                            },
                            {
                                "targets": [ 8, 9 ],
                                "className": "textright",
                                "visible": false
                            },
                            {
                                "targets": 4,
                                "className": "reorder"
                            },
                            {
                                "targets": [4,6],   responsivePriority: 1
                            },
                            {
                                "targets": 10,  responsivePriority: 2
                            }
                        ],
        responsive: true,
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        rowReorder: {
            selector: '.reorder'
        }
    });

    c9.orderguide.dataTable.buttons().container().insertBefore( '#dt_orderguide_filter' );

I have read some of the other posts that say things like "works in Chrome, but not in FIreFox", etc. In my case Only the print button appears.

Hopefully you can see something stupid I'm doing. If not I will need to load the code onto an external server so you can see it.

Thanks.

Uncaught TypeError: Cannot read property '_buttons' of undefined

$
0
0

The error that the chromes console command told me about:

c._buttons||(c._buttons=[]);c._buttons.push({inst:this,name:this.c.name});for(var c=0,g=e.length;c<g;c++)this.add(e[c]);b.on("destroy",function(){a.destroy()});d("body").on("keyup."+this.s.namespace,function(b){if(!n.activeElement||n.activeElement===n.body){var c=String.fromCharCode(b.keyCode).toLowerCase();a.s.listenKeys.toLowerCase().indexOf(c)!==-1&&a._keypress(c,b)}})},_addKey:function(a){a.key&&(this.s.listenKeys+=d.isPlainObject(a.key)?a.key.key:

It was found on line 222 of datatables.min.js.

My situtation is that 1 of my pages works perfectly fine and on another one it doesn't.

What is the cause of this?

collection option backgroundClassName can only handle 1 class

$
0
0

collection has the option backgroundClassName.

I was attempting to use this property the same way as other classNames, where multiple classes can be supplied using space separation.

If more than one class is supplied, the background will be successfully created when the collection is invoked, but it will not be removed when the collection is dismissed.

http://live.datatables.net/sirafidi/1/edit?css,js,output

I know the documentation does not say that it supports more than one class, but this is still problematic behavior. Every other 'className' option supports multiple classes, so this is a notable inconsistency.

Specifically, I am using the Bootstrap styling. In the Bootstrap styling, the default class dt-button-background has no color. I would like to use the same background as the Bootstrap modals, which uses two classes (.modal-backdrop.in).

I can work around this by creating my own class, obviously, but I think backgroundClassName should be capable of handling > 1 class.

Export XLS IE9

$
0
0

I use excelHtml5 on Firefox and I haven't problems.

But I read that it was not compatible with IE9...

There is no solution ?

Best regards,

Nico

pdf export not rendering report as expected

$
0
0

I have some export buttons set up on a datatable page, with ajax sourced data where 2 columns are hidden (0 and 3), so i set the export colums to exclude these
(i also tried columns: ':visible;).

if i send the data to print, the hidden columns are not exported.

If I send the data to pdf. the formatting is wrong, the colums are overridden.

http://test3.forthwebsolutions.com/vanilla_ticketsales.php?EventID=126

buttons: [
            {
            extend: 'collection',
            text: 'Export',
            buttons: [
                'copy',
                {
            extend: 'excel',
            text: 'Excel',
            filename: 'Event Ticket Sales',
            exportOptions: {
                modifier: {
                    page: 'current'
                }
              }
            },
            {
            extend: 'pdf',
            text: 'PDF',
            filename: 'Event Ticket Sales',
            pageSize: 'A4',
            orientation: 'landscape',
            exportOptions: {
                columns: [1,2,4,5,6,7,8]
            }
            },
            {
            extend: 'print',
            text: 'Print',
            exportOptions: {
                columns: [1,2,4,5,6,7,8]
            }
            },
            ]
        }
    ],
Viewing all 478 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>