Hi
I'm traying to export pdf data with the data content in my DataTables. My Datatables have some parameters, like, font color, background color, etc.
My next question is: Can I change or set the pdf parameters and put it into my pdf like is setting in my DataTables .
Thanks a lot
Hi to all
I'm using the last version of DataTables, buttons, select, js extensions, but, when I try to put in button options the parameter 'colvis', appear this message: "Unknown button type: colvis"
Somebody can give a hand
Thanks a lot
Hi I am triing to disable the edit button when more than 1 row is selected I have tried
.on("select", function (e, datatable, settings, processing) {
var selectedRows = datatable.rows( { selected: true } ).count();
if (selectedRows != 1) {
oTable.buttons( ).disable();
// datatable.button( 1 ).disable();
// datatable.button( "edit:name" ).disable();
} else {
datatable.button( "edit:name" ).disable( selectedRows != 1 );
datatable.button( "edit:name" ).enable( selectedRows === 1 );
}
})
The create button does become disable but not the edit or delete button
Thanks in advance
I have an issue similar to
where I get errors on load, which I suspect are due to an incorrect order, but I am unable to find documentation on this.
Although the colvis, copy, csv, and print buttons display correctly, the exel and pdf do not. "buttons": ['colvis', 'copy', 'csv', 'excel', 'pdf', 'print'],
and these are the errors I get when the page loads in the latest version of Chrome (Version 46.0.2490.86):
Uncaught TypeError: Cannot read property 'defaults' of undefined
buttons.flash.js:658 Uncaught TypeError: Cannot set property 'swfPath' of undefined
buttons.foundation.js:39 Uncaught TypeError: Cannot read property 'defaults' of undefined
buttons.jqueryui.js:39 Uncaught TypeError: Cannot read property 'defaults' of undefined
Here is the order I currently have included:
"~/Scripts/jquery.dataTables.min-1.10.10.js",
"~/Scripts/dataTables.jqueryui.min.js",
"~/Scripts/datatables.bootstrap.js",
"~/Scripts/dataTables.colReorder.min-1.3.0.js",
"~/Scripts/dataTables.autoFill-1.2.1.js",
"~/Scripts/dataTables.scroller.min.js",
"~/Scripts/buttons/buttons.bootstrap.js",
"~/Scripts/buttons/buttons.colVis.js",
"~/Scripts/buttons/buttons.flash.js",
"~/Scripts/buttons/buttons.foundation.js",
"~/Scripts/buttons/buttons.html5.js",
"~/Scripts/buttons/buttons.jqueryui.js",
"~/Scripts/buttons/buttons.print.js",
"~/Scripts/buttons/dataTables.buttons.js"
Also of note, I am using jQuery 2.1.4 Can anyone tell me if I am missing anything or if the order is incorrect? Thank you!!
See http://datatables.net/extensions/buttons/examples/initialisation/pageLength.html
When I click the button "Show 50 rows" I expect the dark shadow will be removed right after selection, but instead I have to click one more time (somewhere on page) to come back to grid.
How can I get by with just one click?
I am using the buttons extension to provide column visibility choices along with individual column search and state save. In one scenario I have an issue.
If I have a column (for example; forename) and I search 'Chris', then I hide this column, then I refresh the page. The search value of Chris is remember and implemented by statesave but my individual column search input in the column forename is empty even though it should say 'chris', because that is the value being searched.
If the column remains visible I have no issue. If the column is hidden by the user and then made visible it is empty.
I think this is because I cannot pass the statesave value to a non visible column using this function?
var state = table.state.loaded();
if (state) {
table.columns().eq( 0 ).each( function ( colIdx ) {
var colSearch = state.columns[colIdx].search;
if ( colSearch.search) {
$("#filterrow th#"+colIdx+" input").attr("value", colSearch.search);
}
});
table.draw();
}
My table,
<table cellpadding="0" cellspacing="0" border="0" class="display" id="cms_module_system_users_staff" width="100%">
<thead class="hidden">
<tr>
<th></th>
<th>Forename</th>
<th>Surname</th>
</tr>
<tr id="filterrow">
<th></th>
<th id="1" class="select-filter">Forename</th>
<th id="2" class="select-filter">Surname</th>
</tr>
</thead>
<tbody class="hidden"></tbody>
</table>
Is there any way to pass the statesave value to a non visible column. Or is there an event that can be triggered when a column is made visible to add in the statesave value?
I cant find a solution so far.
Thanks
Chris
I've been using datatables for awhile now and just came across the new buttons extension. In my project I have a LOT of buttons which do various things, but at the time had to hand code all of it. So, I am playing around with the buttons extension to see if there would be any benefit to changing my code. Few questions :
Using a simple example such as :
"buttons": [
{
text: 'Select All',
className: 'btn-success',
action: function ( e, dt, node, config ) {
alert( 'Button activated');
}
},
{
text: 'Deselect All',
className: 'btn-success',
action: function ( e, dt, node, config ) {
alert( 'Button activated');
}
},
{
text: 'Refresh',
className: 'btn-success',
action: function ( e, dt, node, config ) {
alert( 'Button activated');
}
}
],
Buttons show fine and work great, BUT I notice they are all 'grouped together' with the parent class having 'dt-buttons btn-group'. Can we turn on/off the btn-group class? In my case there are times where I would like them grouped and others when I don't.
Finally, aside from being able to define and reuse buttons what benefit is there to using this method instead of the old way :
//load in the dom
$("#dtButtons").html('<button id="dtSelect" type="button" class="btn btn-success">Select All</button>');
//do something
$('#dtSelect').on('click', function () {
...some action
});
Lastly, the copy, print, csv, colvis, etc is what intrigued me. At the moment I only offer a csv download and did all the creation/downloading of it by hand rather than using tabletools. Problem is I use server-side and I noticed right off the bat all of those solutions only work for what is actually shown in the table just as I figured. Is there no way to add functionality for server-side here? We already have the ajax options defined so I would think it would be possible to pass the last table params (search, sort, etc) and get results no? In my case all of these are useless if I can't allow the viewer to copy/print/csv/etc anything more than the current page results.
Hi,
I want to use the same column width on my print table as the source table and maybe other css styles.
A the moment the print table <thead> is build like this:
if ( config.header ) {
html += '<thead>'+ addRow( data.header, 'th' ) +'</thead>';
}
Is it possible / good idea to change the plugin to something like this?
if ( config.header ) {
html += '<thead width='+data.header().width+' class='+data.header().className+'>'+ addRow( data.header, 'th' ) +'</thead>';
}
Do not know if more people want a feature like this.
Cheers Hannes
Hello.
When I click the 'New' button in the datatables, it pops a window to create new registry. In my form, one of the inputs is a select. I want to do one of the following:
1) I want to add a custom button to the right of this select (I will use it to add a new record to the select, without closing the window). 2) Or I want to add a custom button to the left of the 'Create' button in the bottom of the window (which will do the same).
Is this possible? How?
Thank you!
As I understood it is not possible to use for 2 DataTables on one page dom: 'Blfrtip' for positioning of special buttons for each table. I understood that it should be possible to define the buttons in DataTable(){}, but than I have to set the position for e.g. with table2.buttons().container().insertBefore('#example2');. But in my test http://live.datatables.net/wotivaye/2/edit, no buttons are shown. Can you tell me what's wrong? I made this test because I have in my application 2 tables and if I use dom: 'Blfrtip' in the second table, too, the whole second table isn't shown anymore. Without dom the table is shown, but I don't have buttons, so I need to know how I can show the buttons in the second table, too. thanks!
Hi to everyone, is there a way i can include the footer of the table when exporting with excel or pdf or print buttons?
I have made some total calculations in the footer and i would like them to be exported as well.
Regards,
Hi, I have a requirement to allow the user to select a filter (a date range, either one day, or all days in a week) that will be applied to data in a datatable. I want to display a radio button group that allows for selecting the appropriate filter. Can that be done with the Buttons extension? Custum buttons perhaps? Let me know and thanks in advance, Bert-Jan
Why doesn't button collection show up right?
Here is the JS Bin showing my problem
Hi, I am attempting to modify my table column headings in excel using the 'export options', format.header as per below. However, it isn't working. Is there a way to modify the as-exported column headings?
Thanks & regards, Nathan
buttons:[
'load',
{ extend: 'excel',
text: "Save as",
exportOptions: {
columns: [1,2,3,4,5,6,7,8,9,10],
format: {
//this isn't working....
header: function (data, columnIdx) {
return columnIdx + ': ' + data + "blah";
}
}
}
},
{ extend: 'print', exportOptions: {columns: 'visible'} },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor },
{ extend: "create", editor: editor },
'colvis' ]
});
I put together a very simple page using the examples provided by Allen and I can't get buttons to display although no errors are showing on the page or in the console.
I'm trying to insert Buttons in a Bootstrap-styled DataTable with server-side processing, but getting mixed results.
I'm following the example in the documentation, but it is not working the same way for me: Bootstrap styling
var table = $('#tblActivity').DataTable({
processing: true,
serverSide: true,
ajax: {
url: '/my/url',
type: 'post'
},
columns: [
//data settings here
],
//dom: 'Bfrtip',
buttons: [ 'colvis' ]
});
var btns = table.buttons();
var btncontainer = table.buttons().container();
btncontainer.appendTo('#tblActivity_wrapper .col-sm-6:eq(0)');
table.buttons() has a length of zero when ran as written above.
I can get it to work in either of two ways: -dom option is uncommented -processing/serverSide/ajax options are commented out
Neither solution is satisfactory, of course. Adding the dom option conflicts with the bootstrap styling, and dropping the server-side processing is not an option.
My column settings are not included above for readability sake, but they are simple data ones, like { data: 'Account' }.
I cannot change class button usin className For example if I assing the class "btn-primary" this class is added but the "btn-default" class is not removed from the button so the new is never active. Someone know how to do that ?
How would I do the equivalent of "sNewLine" from the old "oTableTools" / "aButtons" params? I have a button that lets people get a list of comma separated IDs from all of the rows.
buttons: [
{
extend: 'copyHtml5',
text: 'Copy IDs',
header: false,
//rowSeparator: ', ',
exportOptions: {
columns: [3]
}
},
],
I'm using mRender to shortern a Notes field down to 30 characters (using a substring function I've written) for display purposes in my table. The user can click on the row and then the Edit button in order to view the full Notes field in a pop-out Editor window.
"mRender": function (data, type, row) {
return (truncate(row.ModuleCourseworkMarks.Notes, 30));
}
This works great except for when the user wants to export the table's data to a CSV file, when the exported data displays only the truncated Notes.
Is it possible to configure csvHtml5 (and copyHtml5 too, actually) to export the full row.ModuleCourseworkMarks.Notes data instead of what's present in the visible table cell?
I have a column that displays a large number correctly as text. However, when I use the copy or excel button they get turned into numbers in scientific notation format.
How do I stop this?