datatables with 6 buttons show, visibility , PDF, EXCEL, PRINT, PageLength, CSV, COPY:
Jquery
-----------
<div dir="ltr" style="text-align: left;" trbidi="on">
var dt_reports_table_lists = $('#dt_reports_table_lists').DataTable({
dom: 'Bfrtip',
lengthMenu: [
[ 10, 25, 50, 100, 500 ],
[ '10 rows', '25 rows', '50 rows', '100 rows', '500 rows' ]
],
ajax: {
url: '/ajx/users.json',
dataSrc: 'data',
"data": function (d) {
d.fromdate = $('#fromdate').val();
d.todate = $('#todate').val();
}
},
"processing": true,
"serverSide": true,
"dom": 'Bfrtip',
"buttons": [
'colvis','pageLength','copy', 'csv', 'excel',
{
extend: 'pdfHtml5',
customize: function (doc) {
doc.styles.tableHeader = {
color: '#000000',
fontSize: '11',
alignment: 'center',
fontweight: 'bold',
}
doc.styles.tableBodyOdd = {
background: 'white',
alignment: 'center',
}
doc.styles.tableBodyEven = {
background: 'white',
alignment: 'center',
}
doc.defaultStyle.fontSize = 9;
doc.content[1].table.widths =
Array(doc.content[1].table.body[0].length + 1).join('*').split('');
doc.content.splice(0, 0, {
margin: [0, 0, 0, 12],
alignment: 'center',
fit: [100, 190],
image: 'data:image/png;base64,iVBORw'
});
},
text: 'Pdf',
exportOptions: {
modifier: {
columns: [ 0, 1, 2, 3 ],
}
},
header: true,
title: 'Registered Users - Outlets',
},
{
extend: 'print',
text: 'Print',
exportOptions: {
columns: ':visible',
},
customize: function (win) {
$(win.document.body).prepend('<img src="" style="display: block; float: none; height: 50px; margin: 0 auto; padding-top: 20px; width: 150px;" />');
$(win.document.body).find('table').addClass('display').css('font-size', '9px').css('padding-left', '20px').css('padding-right', '20px');
$(win.document.body).find('h1').html('Registered Users - Outlets').css('text-align', 'center').css('font-size', '20px');
$(win.document.body).find('th').css('text-align', 'center').css('font-size', '12px');
$(win.document.body).find('td').css('text-align', 'center').css('font-size', '10px');
}
}
],
"columnDefs": [ {
targets: -1,
visible: false
} ],
"columns": [
{"data": "tmpid", "name": "tmpid"},
{"data": "firstname", "name": "firstname"},
{"data": "email", "name": "email"},
{"data": "mobile", "name": "mobile"},
{"data": function (data) {
if (data['created'] !== null) {
var d = new Date(data['created']);
var rd = d.getDate() + '-' + (d.getMonth() + 1) + '-' + d.getFullYear();
return rd;
} else {
return data['created'];
}
},
"name": "created"
}
],
});
// Apply Search
dt_reports_table_lists.columns().every(function () {
var that = this;
$('input,select', this.footer()).on('keyup change focusout', function () {
if ($('#todate').val() || $('#fromdate').val()) {
if ($('#todate').val() && $('#fromdate').val()) {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
} else {
$('#todate').css('color', 'red');
$('#fromdate').css('color', 'red');
$('#todate').val() ? $('#fromdate').focus() : $('#todate').focus();
}
} else {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
}
});
});</div>
Jquery
-----------
<div dir="ltr" style="text-align: left;" trbidi="on">
var dt_reports_table_lists = $('#dt_reports_table_lists').DataTable({
dom: 'Bfrtip',
lengthMenu: [
[ 10, 25, 50, 100, 500 ],
[ '10 rows', '25 rows', '50 rows', '100 rows', '500 rows' ]
],
ajax: {
url: '/ajx/users.json',
dataSrc: 'data',
"data": function (d) {
d.fromdate = $('#fromdate').val();
d.todate = $('#todate').val();
}
},
"processing": true,
"serverSide": true,
"dom": 'Bfrtip',
"buttons": [
'colvis','pageLength','copy', 'csv', 'excel',
{
extend: 'pdfHtml5',
customize: function (doc) {
doc.styles.tableHeader = {
color: '#000000',
fontSize: '11',
alignment: 'center',
fontweight: 'bold',
}
doc.styles.tableBodyOdd = {
background: 'white',
alignment: 'center',
}
doc.styles.tableBodyEven = {
background: 'white',
alignment: 'center',
}
doc.defaultStyle.fontSize = 9;
doc.content[1].table.widths =
Array(doc.content[1].table.body[0].length + 1).join('*').split('');
doc.content.splice(0, 0, {
margin: [0, 0, 0, 12],
alignment: 'center',
fit: [100, 190],
image: 'data:image/png;base64,iVBORw'
});
},
text: 'Pdf',
exportOptions: {
modifier: {
columns: [ 0, 1, 2, 3 ],
}
},
header: true,
title: 'Registered Users - Outlets',
},
{
extend: 'print',
text: 'Print',
exportOptions: {
columns: ':visible',
},
customize: function (win) {
$(win.document.body).prepend('<img src="" style="display: block; float: none; height: 50px; margin: 0 auto; padding-top: 20px; width: 150px;" />');
$(win.document.body).find('table').addClass('display').css('font-size', '9px').css('padding-left', '20px').css('padding-right', '20px');
$(win.document.body).find('h1').html('Registered Users - Outlets').css('text-align', 'center').css('font-size', '20px');
$(win.document.body).find('th').css('text-align', 'center').css('font-size', '12px');
$(win.document.body).find('td').css('text-align', 'center').css('font-size', '10px');
}
}
],
"columnDefs": [ {
targets: -1,
visible: false
} ],
"columns": [
{"data": "tmpid", "name": "tmpid"},
{"data": "firstname", "name": "firstname"},
{"data": "email", "name": "email"},
{"data": "mobile", "name": "mobile"},
{"data": function (data) {
if (data['created'] !== null) {
var d = new Date(data['created']);
var rd = d.getDate() + '-' + (d.getMonth() + 1) + '-' + d.getFullYear();
return rd;
} else {
return data['created'];
}
},
"name": "created"
}
],
});
// Apply Search
dt_reports_table_lists.columns().every(function () {
var that = this;
$('input,select', this.footer()).on('keyup change focusout', function () {
if ($('#todate').val() || $('#fromdate').val()) {
if ($('#todate').val() && $('#fromdate').val()) {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
} else {
$('#todate').css('color', 'red');
$('#fromdate').css('color', 'red');
$('#todate').val() ? $('#fromdate').focus() : $('#todate').focus();
}
} else {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
}
});
});</div>
thank you a lot
ReplyDeleteyou solve my big problem