Develop Reference

DataTable limited rows

I have data in my SQLite table and it has 985 rows, so I used DataTable to organise (searching and export to Pdf, CSV...), the problem is that the DataTable is limited rows and just shows the first 200 rows!.
my code is
<script>
$(document).ready( function () {
$('#table_id').DataTable({
dom: 'B<"clear">lfrtip',
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
</script
the data is stored in table Sqlite
and in the HTML page:
so what's the solution with?

There is more than one option for this:
You can use the paging option and set it to false, or you can use the pageLength option to choose how many results you want to show on one page.
paging:
<script>
$(document).ready( function () {
$('#table_id').DataTable({
dom: 'B<"clear">lfrtip',
paging: false,
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
</script
pageLength:
<script>
$(document).ready( function () {
$('#table_id').DataTable({
"pageLength": 1000,
dom: 'B<"clear">lfrtip',
buttons: {
name: 'primary',
buttons: [ 'copy', 'csv', 'excel', 'pdf' ]
}
});
});
</script

JavaScript/JQuery DataTables - Inserting tools (PDF,Copy,CSV, Print) with Existing JQuery code

I have an existing JQuery code for DataTable which lets the hidden first column be in order of Descending.
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable( {
order:[[0,"desc"]],
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
}
]
} );
} );
</script>
And I want to add this lines of codes, which I copied from DataTables.net
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
How should it be done? I tried doing this:
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable( {
order:[[0,"desc"]],
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
}
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );
</script>
But it won't work. Can someone help me correct the format?
I would like to add another relevant information to be added too. On the Print button as well as PDF button, I would like it to be in Landscape mode and with Added custom message. Like this:
extend: 'pdfFlash',
messageTop: 'PDF created by Buttons for DataTables.'
Can someone help me with this? Thank you.

You need to create array of buttons, try this way
$(document).ready(function () {
$('#dataTables-example').DataTable({
order: [[0, "desc"]],
"columnDefs": [
{
"targets": [0],
"visible": false,
"searchable": false
}
],
dom: 'Bfrtip',
buttons: [
{ extend: 'copy' },
{ extend: 'csv' },
{ extend: 'excel' },
{ extend: 'pdf', title: 'ExampleFile' },
{ extend: 'print' }
]
});
});

Why don't the buttons get displayed for jquery datatable?

I am trying to enable export buttons for a jQuery data table but the buttons don't get displayed.
$('#tblServicesReport').DataTable({
dom: 'Bfrtip',
buttons: [ 'copy', 'excel', 'pdf' ]
});
Datatables version is 1.10.15

Make sure that you integrate the buttons javascript library https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js

Try this, ensure to load all necessary min files.
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
columns: [
{ data: 'name' },
{ data: 'surname' },
{ data: 'position' },
{ data: 'office' },
{ data: 'salary' }
],
buttons: [
{
extend: 'copyHtml5',
exportOptions: { orthogonal: 'export' }
},
{
extend: 'excelHtml5',
exportOptions: { orthogonal: 'export' }
},
{
extend: 'pdfHtml5',
exportOptions: { orthogonal: 'export' }
}
]
} );
} );
Demo - https://jsfiddle.net/4tuupc5f/6/
Ensure to load all required files
https://code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js
https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js
CSS files
https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css
https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css

Change file export title in jquery datatables after page loads

I'm trying to dynamically change the export title for datatable file export. I found a solution including AngularJS which I'm not going to be able to use. Is there a solution just using jquery?
Here is where I initialize the buttons:
var oTable = $("#standards").DataTable({
dom: 'lBfrtip',
buttons: [
{
extend: 'csvHtml5',
title: titleFinal,
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excelHtml5',
title: titleFinal,
exportOptions: {
columns: ':visible'
}
}
],
I have a function makeTitle that returns a string built from the input string. Here is where I try to change the title after clicking a link.
$('ul').on('click', 'a', function () {
titleFinal = makeTitle('XYZ Standards Due for Testing, ');
oTable.buttons = [
{
extend: 'csvHtml5',
title: titleFinal
},
{
extend: 'excelHtml5',
title: titleFinal
}
];
oTable
.search('XYZ')
.draw();

Incorrect header when exporting to PDF with yadcf filter

When I am trying to export to pdf my Datatable with a filter yadcf, the header show always every case from my filter, how can I hide that?
My javascript is :
var vsan = $('#vsan').DataTable( {
"lengthMenu": [ [-1, 10, 40, 50], ["All", 10, 40, 50] ],
"sDom": '<"top"i>fBltif',
"buttons": [
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'excel',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'copyHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
exportOptions: {
columns: ':visible'
}
}
],
"bJQueryUI": true, //Enable jQuery UI ThemeRoller support
"bAutoWidth": false,
"bDestroy": true,
//"order": [[ 3, "desc" ]], //tri par défaut
"bStateSave": false, //plante ?
"bPaginate": true, //Enable or disable pagination.
"bInfo": true,
});
yadcf.init(vsan, [{column_number : 0, filter_type : "none"}, {column_number : 1, filter_type : "none"}, {column_number : 2, filter_type : "none"}, {column_number : 3, filter_type : "select"}, {column_number : 4, filter_type : "auto_complete"}, {column_number : 5, filter_type : "range_number_slider"},{column_number : 6, filter_type : "none"}, {column_number : 7, filter_type : "range_number_slider"}]);
Here is the problem :
i'm using :
http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js
https://rawgit.com/vedmack/yadcf/8e071af195106fa702f942373c65164b89ca40ff/jquery.dataTables.yadcf.js
Thanks

Ok i did it, but i think it s very weird :
exportOptions: {
columns: ':visible' ,
format: {
header: function ( data, column, row )
{
return data.substring(data.indexOf("inline-block")+15,data.indexOf("<span"));
}
}
}
I don't know if is it to me to patch that, or maybe there is a bug, but the point is that it works !

I too faced this issue and I did something like below:-
exportOptions: {
columns: ':visible' ,
format: {
header: function ( data, column, row )
{
return data.split('<')[0];
}
}
}
It worked for me. This will remove the div which is getting added.
When I checked my header data was something like: -
column name<div id="yadcf-filter-wrapper--crime_table-7" class="yadcf-filter-wrapper"><select id="yadcf-filter--crime_table-7" class="yadcf-filter " onchange="yadcf.doFilter(this, '-crime_table', 7, 'contains');" onkeydown="yadcf.preventDefaultForEnter(event);" onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);"><option value="-1">Select Column</option>............................<button type="button" id="yadcf-filter--crime_table-7-reset" onmousedown="yadcf.stopPropagation(event);
So I split the div from the column name and kept just the header.