hello alan
i want to export data using excel and print ...
so how can i print and export data by using another customised button without using data-table toolbar print and excel button...
i need to use as like add /edit /duplicate with external hyperlink refren
<a class="editor.create"></a>
regards
karthik.r
There seems to be no equivalent of
extend: "selectedSingle"
to enable a button only if more than one row is selected. I'm guessing there's a work-around, but I haven't figured it out.
Hi, I am usig Editor in two different applications. In both cases the used code is of the type
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor },
{ extend: 'excel', exportOptions: {columns: [1, 2, 3, 4]}, className: 'visible-lg-inline-block' }
]
but the generated markup is different
In case 1. I get
<a class="dt-button buttons-create" tabindex="0" aria-controls="iWarranty" href="#"><span>New</span></a>
In case 2. I get
<button class="dt-button buttons-create" tabindex="0" aria-controls="iSalesTable"><span>New</span></button>
I cannot understand why in case 1. the <a> tag is generated and in case 2. the <button> tag is generated and I don't know how to control the choice.
I was not able to find any explanation. Can someone help me? Thanks
I have downloaded the individual css/js-Files for dt and its extensions and am inserting the appropriate links into my HTML - but when inspecting the source of my page I now noticed a case where the Excel's button code referenced the .swf-file from cdn.datatables.net instead of site and I wonder why that is. I have verified by going through the download-process again (no package, only using Button-Extension with all sub-options selected and Download-method=Download) - the file buttins.flash.min.js still refers to cdn, yet my download contains a folder "swf" with exactly that file! (sry, the page is still on localhost, so no sample or debugger, but I think the case does not require it)
Source of Excel-button on my page:
<button class="dt-button buttons-excel buttons-flash" tabindex="0" aria-controls="sample"><span>Excel</span><div style="position: absolute; left: 0px; top: 0px; width: 62px; height: 39px; z-index: 99;"><embed id="ZeroClipboard_TableToolsMovie_1" src="//cdn.datatables.net/buttons/1.5.1/swf/flashExport.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" name="ZeroClipboard_TableToolsMovie_1" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=62&height=39" wmode="transparent" align="middle" width="62" height="39"></div></button>
Example (here)[http://mbaas.de/DataTable%20Buttons.html]
(Debugger: akefek)[http://debug.datatables.net/akefek]
I am trying to make just Excel-Export available via the buttons-plugin with the option "buttons":"excel" - but when I load the page, I get the error shown in the title. What am I doing wrong?
I need to place a message into the body of an exported excel document and I'm not having any luck. The data table exports just fine, but I don't see the message.
I've tried this.
buttons: [
{
extend: 'excelHtml5',
messageTop:'This is a test'
}
]
I've also tried this.
buttons: [
{
extend: 'excelHtml5',
exportOptions:
{
messageTop: 'Another test'
}
}
]
What am I doing wrong? How to I get message text to appear above the exported table?
Allen,
I would like to add aq button in a column next to data from ajax. how can I accomplcih this. current code is.
code:
$('#projScopeTabl').DataTable( {
responsive: true,
ajax: {
url: 'phpScripts/getProjScopeTableData.php',
dataSrc: ''
},
columns: [
{ data: 'proj_name' },
{ data: 'proj_client_name' },
{ data: 'proj_city' },
{ data: 'proj_state_abr' },
{ data: 'proj_status' },
{ data: 'proj_units' },
{ data: 'proj_sqft'}
//would like to add repeating button here
]
});
html:
| Project Name | Client Name | City | State | Status | Units | Sqft |
|---|
Hi, Can anyone point me in the right direction for displaying buttons as dropdowns? I have looked at this link but can't seem to get it to work https://datatables.net/extensions/buttons/examples/initialisation/collections.html
My code looks like this:
new $.fn.dataTable.Buttons( table, [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor },
{ extend: "selected",text: 'Duplicate',
action: function ( e, dt, node, config ) {
// Start in edit mode, and then change to create
editor
.edit( table.rows( {selected: true} ).indexes(), {
title: 'Duplicate record',
buttons: 'Create from existing'
} )
.mode( 'create' );
}
},
{ extend: "copy", exportOptions: {columns: ':visible'}},
{ extend: "excelHtml5", exportOptions: {columns: ':visible'}},
{ extend: "csvHtml5", exportOptions: {columns: ':visible'}},
{ extend: "print", exportOptions: {columns: ':visible'}},
'colvis', 'pageLength'
] );
table.buttons().container()
.appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
Can't upload an image to this post for some reason (says image upload failed), but you can see it here:
Any ideas on what 'className' to specify in jQuery on-click function to get button labels inside colvis or custom collection?
I've tried: '.dt-button', '.dt-button-collection', etc.
Does main page buttons great, but can't trigger for buttons in ui-widget menu.
Thanks in advance!
Here's code in demo:
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print', 'colvis',
{ extend: 'collection',
className: 'myCollection',
text: 'Collection',
buttons: [
{ text: 'Button 1' },
{ text: 'Button 2' },
{ extend: 'columnToggle',
text: 'Button 3',
columns: '.position'},
],
},
],
} );
$('.dt-button').on( 'click', function ( htmlElement ) {
var label = $( this ).text();
alert(label);
} );
I think the answer is no, but thought I'd ask to double-check ...
buttons: [
{ extend: 'columnToggle',
columns: '.position',
action: function ( e, dt, node, config ) {
// do something in addition to toggling '.position' columns
}
},
],
I'm using a table with over 30 columns. Some of the columns contains huge datas. For readable reason - and not making the table to wide - i'm cutting the datas in some columns like this:
{ "render": function (data, type, row) {
if (data.length > 25)
{
var anzklass = '<span title="'+data+'">';
anzklass += data.substring(0, 23) + '...';
anzklass += '</span>';
return anzklass;
}
return data;
}, "targets": 30 }
This works fine. All big datas will be cutted and the complete content will be seen in a mouse-over.
But:
I also need a Excel Export. I manage this with the normal "Buttons:[Excel]" function. This also works fine, but in the Excel-file i only see the cutted datas, not the complete data.
How can i solve this, that i can see in the screen the "cutted" datas and in the Excel-file the complete datas?
Thanks a lot in advice.
I have a Problem with a button code.
dtButtons.push( {
text: '<i class="fas fa-user-plus fa-fw"></i>',
titleAttr: 'List of all athletes who can participate in this event',
className: 'text-green',
action: function( e, dt, node, config ) {
var data = mt_ls.row( { selected: true } ).data();
var meetType = ( 'INVITATION' == data.contentType ) ? 'i' : ( ( 'ENTRIES' == data.contentType ) ? 'e' : 'r' );
$.post( '/lib/adm/setvar.php', { mid: data.DT_RowId, cot: meetType, cid: cID, back: 'mtlst' } );
location.assign( '/index.php?mo=listE&me=lsath' );
},
enabled: false
} );
The $.post code would not be execute with the FireFox. Have anyone a idea what is wrong here. With Edge and Chrome work
the Code.
Andreas
Is it possible to set a column header, if in the display view is a icon? The icon are not exported to the excel
Andreas
Is it possible to style the colvis button popup menu to have a wider column width (or flexible width based on column name length)?
Also, can one adjust the colors of the buttons to have more contrast so it's easier to see which columns are visible/invisible?
Thanks.
I have a Problem with the Header of the Datatables if I export to PDF or EXCEL. If the table Header have an font icon these are replaced with "-->". How can I remove this? I have attached an example.
Andreas
I have a problem when my datatable is empty, the dropdown menu for a Pagelenght Button is not completely displayed because of the size of the 'container'
for exemple:
working case:
How can I fix this kind of problem ?
regards
I try to set in the exportOption the column Number that are shown by the login level.
I tried it with this code:
exportOptions: {
columns: function( idx, data, node ) {
if( 4 == uLevel ) {
return new Array( 0, 4, 1, 5, 7 );
} else {
return new Array( 0, );
}
},
But that did not work. I think that should be the same as columns: [ 0, 1, 2 ]
What is wrong here?
Andreas
When using the excel button to export columns with numbers using danish decimal separator: ',' this is lost. 0,75 is exported as 75, and 15,00 exported as 1.500, pdf export works as expected.
Is there a quick fix for this?
I enclose both pdf and excel export of same data.
Given this scenario, where I have "Excel" and "Print" buttons visible and the "Show [X] entries" dropdown, I was wondering how to separate the dropdown and buttons, either with a left-right margin or by a line.
This is what the symptom looks like:
As you can see the jQuery code is pretty simple.
@section styles {
<link href="~/Content/DataTables/css/jquery.dataTables.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/buttons.dataTables.css" rel="stylesheet" />
}
@section scripts {
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="~/Scripts/DataTables/dataTables.buttons.js"></script>
<script src="~/Scripts/DataTables/buttons.print.js"></script>
<script src="~/Scripts/DataTables/buttons.html5.js"></script>
<script src="~/Scripts/jszip.js"></script>
<script>
$(() => {
$(".display").DataTable({
dom: 'lBfrtip',
buttons: ['excelHtml5', 'print']
});
});
</script>
}
To make sure that my own css wasn't interfering with the datatables styles, I looked at my code. This is all my css in total. I don't see anything that could cause this symptom. I am also using Bootstrap version 3.7, in case that makes a difference.
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
What do I need to do so that the buttons are separate from the page length dropdown?
https://datatables.net/reference/api/buttons.exportData()
I have a table with about 30 columns (lot of details, free text, etc.).
I only want to render about 10 of the important columns in the DataTable for the user to see so my DataModel (using .NET Library) only contains those 10 columns.
If I export to excel, can I export the whole 30 columns (Maybe refer to a larger DataModel)?