Custom Print content for datatables buttons - datatables

Am using datatables and I have used their print options
$('.my-table').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
and in the table I have button, when clicked modal opens up with some data, and also need that modal data to be in the printed or downloaded doc.
Any way to tell data-tables to take the extra content I need, or is there any trick to append the data to the tables when its buttons are clicked?

Related

jquery Datatable export buttons not appearing when set more than one datatable

Export buttons work when i have a single one, but when i duplicate it, the buttons disappear.
I'm loading:
jquery.dataTables.min.css
jquery.dataTables.min.js
buttons.dataTables.min.css
buttons.dataTables.min.js
buttons.flash.min.js
buttons.html5.min.js
buttons.print.min.js
as i read on the doc (official webpage).
When i've a single one (doesn't matter which) it works well, but when i set both dataTables on the same page the buttons are not shown.
$(document).ready( function () {
$('#firstTable').DataTable({
dom: 'Bfrtip',
buttons: [
'csv', 'excel', 'print'
]
} );
$('#secondTable').DataTable({
dom: 'Bfrtip',
buttons: [
'csv', 'excel', 'print'
]
} );
});
I think it's due to a cannot set _DT_CellIndex of undefined, which i already tried to fix but it seems that it wants to persist.
Both tables are generated dynamically and some cell may be empty.
I couldn't find a way to tell datatables that allow/ignore white cells.
By the way, seems that adding an on void cell does not take effect.
Any suggestion will be appreciated.
Solved
I found that sometimes a void were loaded.
it happened on both tables but don't know why the buttons disappear only when both were loaded.
I added a class to elements and then:
$('.rowToCheck').each(function (i){
if($(this).children().length == 0){
$(this).remove();
}
});
inside $(document).ready and before the dataTables init.
There's no _DT_CellIndex of undefined error and the buttons are shown properly now.

DataTable column configuration

I couldn't find any information about this yet.
At the moment I am doing it like this:
Enable some checkboxes of fields I want to show
Create the DataTable
Export the generated table for further use
What I would like to do:
Create a DataTable with all 20 possible fields
Enable/disable fields I want to see on the fly. Is there a DataTable Plug-In/Extension to do that?
3.Export the generated table for further use
Any better ideas how to do it without having to repost my settings for an update of the table again all the time?
You can use Buttons extension:
here you have documentation
https://datatables.net/reference/button/
I used colvis buttons like this in my project to show/hide columns :
"dom": 'lZBfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'STANDARD',
show: [ 0,1,2,3,4,39 ],
hide: [ 41,42,43,44,45,46,47 ],
className: "standard-btn"
},
{
extend: 'colvisGroup',
text: 'DOCS',
show: [ 0,1,2,3,4,39,41 ],
hide: [ 42,43,44,45,46,47 ],
className: "ext-btn"
}
]
The code above is placed in my datatable object.
docs for colvis https://datatables.net/reference/button/colvis
To export data from it you can use export buttons:
the docs https://datatables.net/extensions/buttons/examples/html5/simple.html

add the export to file functionality in datatables

How do I add the export to file functionality in datatables described here
here is my basic fiddle with 2 rows of test data
https://jsfiddle.net/sxqeauaz/
Am I correct to say that I should just add all the libraries js and css, and the following piece of code
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
I have done this in the below fiddle but it does not work.
https://jsfiddle.net/sxqeauaz/1/
Can anyone advise how i get the csv, pdf, copy...etc buttons to work?
The way I describe above is obviously too simple to get it to work.
Maybe my reading of the documentation is not the best.
Would really appreciate some advise on this matter.

Datatables API: how to change Print page title

I am using the 'Print' button in Jquery datatables and I am trying to programmatically change the 'Print' button's print page title. This is how i configure it the first time.
var table = $('table').DataTable({
buttons: [
extend: 'print',
title: 'Monthly Report' // need to change this
]
});
So basically i need to change the title using the API. Note that this title is not the text on the button. It is the title on the print page. (The page that shows up when i click the 'Print' button)
I've already tried to change the title using the API like this
table.api().buttons()[0].inst.c.buttons[0].title = 'Daily Reports';
But its not working. Any help would be much appreciated.
Looking at the source code of datatables it seemed that the config of the buttons is set at initialization. So changing the config as you are doing wouldn't work.
What the source code did reveal though is that you can set the title as a function. So I suggest something like this might solve the issue:
var table = $('table').DataTable({
buttons: [
extend: 'print',
title: function(){
return foo.title
}
]
});

Ckeditor edit input element inline

I have an ckeditor and added an button for inserting textfields
config.toolbar = [
...
{ name: 'forms', items: [ 'TextField' ] },
...
inserting works fine, but for editing i have to doubleclick the input and change the value in the dialog
is it possible to allow to edit the content just within the textfield?

Resources