Creating more than one worksheet through datatable or javascript - javascript

My code is
<script>
$(document).ready(function() {
$('#datatableswwarend').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
text: 'Download Report',
exportOptions: {
columns: ':visible'
}
},
'colvis',
'copy'
],
columnDefs: [
{
targets: '_all',
visible: true
}]
});
});
</script>
Above code is my current code, which enables the user to download data from a table saving it as an excel file. Using this current code, is there any way i could create another worksheet, renaming it, and manipulating the data that will be stored in the file?

Related

Ajax Datatable's Export Button only exporting visible data

I am using ajax datatable for showing data. I am having issue with the export button. What by default is happening is on click of button it is only exporting visible data but what i actually want is it should be exporting all the data (if filtered then that too).
Tried various export options as
dom: 'lfBrtip',
buttons: [
{
extend: 'copy',
exportOptions: {
columns: [ 0, ':visible' ]
}
},
{
extend: 'csv',
exportOptions: {
modifier: {
search: 'applied',
order: 'applied',
page: 'all'
}
}
},
{
extend: 'excel',
exportOptions: {
modifier: {
search: 'applied',
order: 'applied',
page: 'all'
}
}
},
'colvis'
],
But none of them seems to be working. Any help ??

How can I combine ColReorderWithResize with HTML5 buttons on Datatables javascript

I am using a databales javascript in my web site, with html5 buttons
https://datatables.net/extensions/buttons/examples/html5/simple.html , is working fine, but now I want to allow resize on fly the columns of the datatables , so I found this http://legacy.datatables.net/extras/thirdparty/ColReorderWithResize/
But the problem now is, I don´t know how to use both together.
myApp.table = $('#TableId').DataTable(
{
rowReorder: { update: false },
columnDefs: [
{ "width": "5%", "targets": [0] },
{ "className": "text-left custom-middle-align", "targets": [0, 1, 2] },
{ orderable: true, className: 'reorder', targets: 0 },
{ orderable: false, targets: '_all' }
],
autoWidth: false,
sDom: "Rlfrtip", //--> here is the code to resize columns
dom: '<"html5buttons"B>lTfgitp', // here the code to see the buttons
buttons: [
{ extend: 'copy' },
{ extend: 'csv' },
{ extend: 'excel', title: 'ExampleFile' },
{ extend: 'pdf', title: 'ExampleFile' },
{
extend: 'print',
customize: function (win) {
$(win.document.body).addClass('white-bg');
$(win.document.body).css('font-size', '10px');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}
],
In fact I don´t understand well the code used by datatables Rlfrtip and B>ltfgitp
Thanks in advance.
Jolynice

Datatable does not print all my rows on scrolling

I am trying to get rows from back-end response on each scroll. I get
an AJAX response, but I can't get full row, it eats up the data
most probably the last one.
I tried with so other alternative, but it's not working at all, I tried redraw and reload in AJAX.
Here goes my js code:
var table= $('#subscriber_list').DataTable({
responsive: true,
"processing":true,
serverSide: true,
"scrollCollapse":true,
"sDom":"BifrtS",
scrollY:'35vh',
scrollCollapse: true,
paging:false,
"oScroller": {
"displayBuffer": 2,"loadingIndicator": true
},
"ajax": {"url": $('#data_table_column_list').attr("url"),"type": 'POST',"data":{'type':subscriber_type,'end_date_from':end_date_from,'end_date_to':end_date_to}},
"columns": JSON.parse($('#data_table_column_list').val().replace(/\'/g, '"')),
"columnDefs": [
{ "orderable": false, "targets": 2 }
],
buttons: [
{
extend: 'excelHtml5',
text: 'Export selected',
exportOptions: {
columns: ':visible:not(.not-exported)',
modifier: {
selected: true
}
},
title: 'Data export'
},
{
extend: 'excelHtml5',
text: 'Export All',
exportOptions: {
columns: ':visible:not(.not-exported)'
},
title: 'Data export'
}
]
});
You need one or both of the following depending on how you want the table to work.
Right now, it's getting cut off because the default in Datatables is 10 rows. You have paging set to false, so any results after the 10th are now shown.
Either switch this: paging:false,
to: paging:true,
That'll give you multiple pages of results with 10 on each page.
You can also add "pageLength": 50 or some other value if you want more than 10 rows per page.
here i am using same data table from multiple radio button switch, on switching i get warning from data table can't be re-initialised , since i know when i use table.destroy(); it destroy's all the object's created at while i switch the options, but have alternate to use it , what to do now ???? , running out of idea
i was referring this actually
https://datatables.net/manual/tech-notes/3
$('.subscriber_type').on('change',function (e){
var table = $('#subscriber_list').DataTable();
subscriber_data_table($(this).val(),$('#datepicker_from').val(),$('#datepicker_to').val());
});
subscriber_data_table("all",null,null);
function subscriber_data_table(subscriber_type,end_date_from,end_date_to) {
$('#subscriber_list').DataTable({
responsive: true,
"processing": true,
serverSide: true,
paging:true,
"pageLength":50,
"drawCallback": function( settings ) {
console.log( 'hit began' );
},
"sScrollY": "379",
"sDom":"BifrtS",
"oScroller": {
"displayBuffer": 2,"loadingIndicator": true
},
"ajax": {"url": $('#data_table_column_list').attr("url"),"type": 'POST',"data":{'type':subscriber_type,'end_date_from':end_date_from,'end_date_to':end_date_to}},
"columns": JSON.parse($('#data_table_column_list').val().replace(/\'/g, '"')),
"columnDefs": [
{ "orderable": false, "targets": 2 }
],
buttons: [
{
extend: 'excelHtml5',
text: 'Export selected',
exportOptions: {
columns: ':visible:not(.not-exported)',
modifier: {
selected: true
}
},
title: 'Data export'
},
{
extend: 'excelHtml5',
text: 'Export All',
exportOptions: {
columns: ':visible:not(.not-exported)'
},
title: 'Data export'
}
]
});
}

JQuery Datatable defered loading export data to pdf, excel etc. not showing all records

I'm loading data in the datatables througn ajax using
$('#DTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "/api/admin/business-ad"
},
"dom": 'Bfrtip',
"buttons": [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
considering I have 100 records in the database,
at first this loads 10 records from the database. But while exporting the data to pdf/other, only that 10 records are exported.
Is there any way to export all the records instead of getting only the displayed record.
Try to include this in datatable({}) function.
ordering: false,
also insert exportOptions: {rows: {order: 'current',search: 'none'},}, inside buttons:[{}]
e.g:
$('#Example').DataTable({
ordering: false,
buttons: [{
text: 'PDF',
exportOptions:
{rows: {order: 'current',search: 'none'},},

Bootstrap DataTable exclude certain visible columns from export

I can export dynamically selected visible columns to pdf with the following. However I want to be able to also exclude certain visible columns (button columns) too. How do I do this?
buttons: [{
extend: 'csv',
orientation: 'landscape',
pageSize: 'LEGAL',
text: 'Export as CSV',
exportOptions: {
columns: ':visible'
}
}, {
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
text: 'Export as PDF',
exportOptions: {
columns: ':visible'
}, {
extend: 'colvis',
text: 'Show/Hide Columns'
}]
The key was to add a method to the columns property in the export options that filters if the column is visible and if the column is not part of the columns you do not want to export. The idx variable is the column index.
Working example here: https://jsfiddle.net/L06yu0vz/1/
$(document).ready(function() {
// Do not export these columns
var hideFromExport = [0,1,2];
var table = $('#example').DataTable({
dom: 'Bfrtip',
buttons: [{
extend: 'copyHtml5',
exportOptions: {
columns: function ( idx, data, node ) {
var isVisible = table.column( idx ).visible();
var isNotForExport = $.inArray( idx, hideFromExport ) !== -1;
return isVisible && !isNotForExport ? true : false;
}
}
}, 'colvis']
});
});

Categories