I want to remove sorting from all columns in the table and want to add a Print button on top.
But when I am using below code the print button is missing:
$('#printData').DataTable({
dom: 'Bfrtip',
"paging": false,
"iDisplayLength": -1,
buttons: [{
extend: 'print', footer: true,
title:'<div style="text-align:center;">Test Report</div>'
}],
columnDefs: [{
"visible": true,
"searchable": true
}],
});
Anyone can let me know can we use columnDefs with buttons?
Related
How to change the suppressMovable value in dynamic columns, for example, on button click
{
field: 'id',
headerName: '№',
editable: false,
suppressMovable: true,
},
I am creating websites with Datatables plug-in.
I want to change the button color, but I don't know the methods.
It is my code.
$(document).ready(function() {
$('#reportTable').DataTable({
buttons: [
'searchPanes',
'colvis',
{
extend: 'print',
split: [ 'pdf', 'excel','csv'],
}
],
select: {
style: 'multi',
selector: 'td:first-child'
},
fixedHeader: true,
columnDefs: [ { targets: [0,1,2,3,4,7,10], visible: true},
{ targets: '_all', visible: false },
{
orderable: false,
className: 'select-checkbox',
targets: 0
}
],
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
order: [[7, 'desc']],
"dom": "<'row mb-3'<'col-6 col-md-4'l><'col-6 col-md-4 'B><'col-6 col-md-4'f>>" +
"<'row my-4'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
});
});
It is the current button color.
current button color.
Thank you!
You should be able to do it by extending the button and adding a className property.
buttons: [
{
extend: 'searchPanes',
className: 'btn btn-danger'
},
{
extend: 'colvis',
className: 'btn btn-warning',
},
{
extend: 'print',
className: 'btn btn-success',
split: ['pdf','excel','csv']
}
],
I have collapse navbar but when i hide the navbar the sticky column duplicated or overlapping two last column. Please refer screenshot. Answer is appreciated thanks.
enter image description here
defaultSetting: {
autoWidth: false,
fixedHeader: true,
searchDelay: 500,
processing: true,
serverSide: true,
scrollX: true,
scrollCollapse: false,
scrollResize: true,
responsive: true,
fixedColumns: {
leftColumns: 1,
rightColumns: 1,
}
}
Im using datatables (server side randering) with checkbox plugin from Gyrocode.
var dTable2 = $('table.contracts-search-results').dataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "${someURL}",
"type": "POST",
"data": function (d) {
d.returnEmptyResult = '${returnEmptyResult}';
},
},
searching: false,
"dom": '<"top"iplB<"clear">>rt<"bottom"iplB<"clear">>',
paging: true,
pageLength: 0,
displayStart: 50,
"pagingType": "input",
info: true,
"buttons": [],
"order": [],
"columnDefs":
{"targets": 7,
"width": "75px",
checkboxes: {
"selectRow": true,
"selectAll": false
},
"stateSave": true,
'createdCell': function (td, cellData, rowData, row, col){
var $this = this;
var selectedCon = '${con}';
var arrayOfCon = selectedCon.replace(/[\[\]\s']+/g, '').split(",");
$.map(arrayOfSelectedCon, function(conId, index) {
if(cellData == conId) {
$this.api().cell(td).checkboxes.select();
}
});
},
},
{
"targets": [14, 15, 16],
"visible": false
},
],
"select": {
"style": "multi",
},
"language": {
"decimal": ",",
"thousands": ".",
"url": themeUrl+"js/libs/dataTable/lang/german.json"
},
}
}) ;
I have to pages. On first one I have datatables with configuration posted above. Second page I have another datatables with similar configuration. When user get to second page and choose some rows using checkboxes Im creating list od Ids and when user go back to first page I send Ids from second page to first one and select checkboxes on first page based on Ids from secound page.
The problem is that its working fine If all rows were on the same table page, but when user on secound page used pagination it doesnt work.
use statesave: false as given,
"stateSave": false,
I have print, PDF and Excel buttons on my datatable. The table has quite a few columns, is there a way to create the PDF in Landscape? Also, is there a way to print the table info (re: Showing x to y of z)?
This seems to work for me ( I use button extensions)
"buttons": [
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
]
PDF - page size and orientation
I'm assuming that you're using the TableTools extension for DataTables to enable saving as PDF. If not, get it and use it. From there, it's pretty simple. Here's an example:
With TableTools extension:
"tableTools": {
{
"sExtends":"pdf",
"sPdfOrientation": "landscape",
}
}
With Buttons extension (DataTables 1.10.8+):
$('#myTable').DataTable( {
buttons: [
{
extend: 'pdf',
text: 'Save as PDF',
exportOptions: {
modifier: {
orientation:'landscape'
}
}
}
]
} );
I answered my question in a comment... thought I should probably post an official answer:
I am not using TableTools as that's been retired. I used the following site to build the .js and .css files I use: https://datatables.net/download/#bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.8,b-1.0.1,b-html5-1.0.1,b-print-1.0.1,fh-3.0.0,rr-1.0.0
I got it working with the following:
$(document).ready(function() {
$('#instrumentsTable').dataTable({
stateSave: true,
autoWidth: true,
dom: 'Bfirtip',
buttons: [
'print', {
extend: 'pdf',
orientation: 'landscape'
},
'excel'
],
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0]
}, {
"bSearchable": false,
"aTargets": [0]
}]
}).columnFilter(...etc)
Hope this is helpful to someone!
~~~Tracy
this can also work....
#check <<extend: "pdfHtml5" >> for pdf
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm"
},
{
extend: "excel",
className: "btn-sm"
},
{
extend: "pdfHtml5",
className: "btn-sm",
orientation: 'landscape'
},
{
extend: "print",
className: "btn-sm"
},
]