I am working on e-commercial project using html and javascript in my project. As a part I need to show the details of product ordered. I am using Jquery datatable inorder show the details. I need to export the details from datatable to excel and using. this all works fine but the problem is I need to add serial number while exporting I tried several ways. Below is the export buttons
buttons: [
{
extend: "excel",
footer: true,
title: "my report",
exportOptions: {
columns: [1, 2, 3, 4],
},
},
{
extend: "pdf",
footer: true,
title: "my report",
exportOptions: {
columns: [1, 2, 3, 4],
},
},
]
I added my zero th column along with the pdf export. but this fails while export the pdf after filtering
please help me to solve this huddle? if any clarity need please comment I will do my best
your can custom fields in datatable on export to pdf or excel through below code.
buttons: [
{
extend: "excel",
footer: true,
title: "my report",
exportOptions: {
columns: [1, 2, 3, 4],
},
},
{
extend: "pdf",
footer: true,
title: "my report",
exportOptions: {
columns: [1, 2, 3, 4],
},
customize: function (doc) {
var col = doc.content[1].table.body;
for (i = 1; i < col.length; i++) {
col[i][0]["text"] = i;
}
},
},
]
Related
buttons: [
{
extend: "edit",
className: 'btn btn-primary bg-purple text-white',
editor: editorEdit
},
{
extend: 'excelHtml5',
text: 'EXPORT',
filename: 'DataSet',
className: 'btn btn-primary bg-purple text-white',
autoFilter: true,
exportOptions: {
modifier: {
selected: true
},
columns: 'th:not(:first-child)'//[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
},
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr('s','22');
}
}]
However, the autoFilter and the customize options are not being reflected in the excel export.
Am I missing something or do I need to do it differently?
I am trying to add page number in datatble pdf export, I got code from its official site after adding this code pdf button got disappearing and getting 'Uncaught ReferenceError: doc is not defined
at HTMLDocument' error in console.
$('#table2').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
title: 'Data export',
filename: 'dt_custom_pdf',
pageSize: 'A4',
exportOptions: {
columns: ':visible',
search: 'applied',
order: 'applied'
},
},
doc['footer']=(function(page, pages) {
return {
columns: [
'Left part of footer',
{
alignment: 'right',
text: [
{ text: page.toString(), italics: true },
' of ',
{ text: pages.toString(), italics: true }
]
}
],
margin: [10, 0]
}
});
]
});
You did not define customize function to dataTable that why getting doc error you need to change
$('#table2').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'pdfHtml5',
text: 'Pdf',
filename: 'dt_custom_pdf',
pageSize: 'A4',
exportOptions: {
columns: ':visible',
search: 'applied',
order: 'applied'
},
customize: function ( doc ) {
doc['footer']=(function(page, pages) {
return {
columns: [
{
alignment: 'center',
text: [
{ text: page.toString(), italics: true },
' of ',
{ text: pages.toString(), italics: true }
]
}
],
margin: [10, 0]
}
});
}
}
]
});
How to limit jquery datatable export by first 1000 rows. if data table contains more than 1000 rows and on clicking export button shall show an error message.
buttons: [
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i> ' + 'haiexcel',
title: pageTitle,
exportOptions: {
orthogonal: 'export',
columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
},
className: 'btn bg-color-yellow margin-right-5',
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet.xml'];
$('row:first c', sheet).attr('s', '45');
}
}
]
Is it possible in DataTables in mobile view set the table to horizontal scroll instead of "responsive" table which collapse the table?
actually my datatables looks like this in mobile:
and in expanded state it is so ugly as i have some buttons in last column so i would know if there is a way to make the table "full width" and just to see the other columns the user will have to scroll horizontally in that card..
Here is my datatable config
$('#table').DataTable({
responsive: true,
destroy: true,
data: dati,
select: false,
ordering: false,
lengthChange: false,
pageLength: 5,
info: false,
pagingType: "numbers",
dom: 'B<t><p>',
columns: [
{
data: 'DATA',
render: data => {
return moment(data).format('DD/MM/YYYY');
}
},
{ data: 'ORA' },
{ data: 'OPERATORE' },
{ data: 'OPERAZIONE' },
{
data: 'IMPORTO',
render: data => {
return '€' + data.toFixed(2)
}
},
{
data: null,
defaultContent: ''
}
],
buttons: [
{
extend: 'copy',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
},
{
extend: 'csv',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
},
{
extend: 'excel',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
},
{
extend: 'pdf',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
},
{
extend: 'print',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
}
],
initComplete: function () {
var $buttons = $('.dt-buttons').hide();
$("#export_type").on("click", "a", function (event) {
event.preventDefault();
var btnClass = $(this).attr("data-export")
? '.buttons-' + $(this).attr("data-export")
: null;
if (btnClass) $buttons.find(btnClass).click();
});
}
});
Actually i've yet tryed to set responsive to false and by setting scrollX to true, in mobile it's look "okay" but in web without responsive tag set to true it doesn't take full width and when the screen is resized it "breaks"
You can use an object as the "responsive" setting to evaluate what the screen size is, so that you can set "responsive" to be false if the screen size is below a certain width.
For example:
const isLargerThanMobileScreen = ($(window).width() > 480) ? true : false;
$('#table').DataTable( {
"scrollX": true,
"responsive": isLargerThanMobileScreen,
} );
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'
}
]
});
}