Remove columns when exporting data when using datatable.net - javascript

I'm working on a project and i wanted to remove specific columns when exporting a table to pdf. So i used the code from datatables.net and here is my code for exporting
<script type="text/javascript">
$(document).ready(function() {
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
var d = day + "-" + month + "-" + year;
$('#detailTable').DataTable( {
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
title: d+ ' Purchase Orders'
},
{
extend: 'csvHtml5',
title: d+ ' Purchase Orders'
},
{
extend: 'pdfHtml5',
title: d+ ' Purchase Orders',
orientation: 'landscape',
pageSize: 'LEGAL'
}
]
} );
});
I made it landscape since the table is kinda long and here is the output of the pdf i exported (I censored some values sorry for that)
Is there a way that i can remove that column where the values are 'edit'?
Thanks in advance

I prefer to utilize HTML to control the feel of my table which reduces the Javascript I need to write for common implementations of the Datatables so instead of utilizing specific column numbers (columns: [0, 1, 2]) I utilize a jQuery selector.
Specifically in my software I have columns for button actions, that generally look miserable in the
$.extend(true, $.fn.dataTable.defaults, {
dom: 'Bfrtlip',
lengthMenu: [[10, 25, 50, 250, -1], [10, 25, 50, 250, "All"]],
buttons: [
{
extend: 'copy',
exportOptions: {
columns: "thead th:not(.noExport)"
}
},
{
extend: 'excel',
exportOptions: {
columns: "thead th:not(.noExport)"
}
},
{
extend: 'csv',
exportOptions: {
columns: "thead th:not(.noExport)"
}
},
{
extend: 'print',
exportOptions: {
columns: "thead th:not(.noExport)"
}
}
//'copy', 'excel', 'csv', 'print' // , 'pdf' - Wait for next PDFMake release because of this bug https://github.com/bpampuch/pdfmake/pull/443
]
});
now my table:
<table>
<thead>
<tr>
<th>First Column</th>
<th>Second Column</th>
<th class="noExcel">Column to Hide</th>
<th>Fourth Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>First Column value</td>
<td>Second Column value</td>
<td>Column to Hide value</td>
<td>Fourth Column value</td>
</tr>
</tbody>
</table>
When the $("table").Datatables() is called it will have buttons for Copy > Excel > CSV > Print but each of them will ignore the 3rd column which has the class "noExport".

Yes you can set column index to hide column for exporting from datatable, You have to add column option in button attribute like following example :-
$('#datatable').dataTable({
"sScrollY": "350px",
"bPaginate": false,
"sDom": 'lfrtip<"clear spacer">T',
"oTableTools": {
"sSwfPath": "/flash/copy_cvs_xls_pdf.swf",
"aButtons": [
{
"sExtends": "copy",
"mColumns": [0, 1, 3, 4]
},
{
"sExtends": "csv",
"mColumns": [0, 1, 3, 4]
},
{
"sExtends": "pdf",
"mColumns": [0, 1, 3, 4]
},
{
"sExtends": "print",
"mColumns": [0, 1, 3, 4]
},
]
}
});
You can visit these url for more help
https://datatables.net/forums/discussion/3210/tabletools-how-to-hide-columns-when-exporting-copying
It may help you.

Related

How to add row/column with value to datatables csv export

I am using jquery datatable to display data. I am also exporting a CSV file using the datatable. I need to be able to add a field and value to a specific location on the csv file that is exported. The field and value do not exist on the datatable so currently when I export it, it is only copying what is on the datatable. How do I add a field and value "Totals" to the csv when exported to row 7 column H?
$('#ar-table').dataTable({
'paginate': false,
'bDestroy': true,
'dom': 'Bfrtip',
'buttons': [
'print', 'csv', {
extend: 'excel', filename: '*', extension: '.xlsx',
}, {
extend: 'pdfHtml5',
orientation: 'landscape',
text: 'PDF',
title: 'Open A/R - ' + $('#customer-name').val() + ' - ' + today,
}, {
extend: 'pdfHtml5',
orientation: 'landscape',
text: 'PDF-L',
title: 'Open A/R - ' + $('#customer-name').val() + ' - ' + today,
},
],
'aLengthMenu': [[25, 50, 100, 200, -1], [25, 50, 100, 200, 'All']],
'iDisplayLength': -1,
});
DATATABLE VIEW
CSV EXPORT
[
I was able to solve this by using the customize key for datatables. Here is a what my code looks now. This is not using a dynamic variable yet. Hardcoded currently but this solves my initial problem.

How to use a DataTable with an array of objects?

I'm trying to use the property "data" to show my data in the table, but the table doesn't works. I made a test using a local array of strings and works very well, I don't know why with an object the table doesn't works
ngAfterViewInit() {
this.listarNotificacao()
$('#datatables').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
lengthChange: false,
responsive: true,
searching: true,
data: this.notificacoes,
columns: [{
data: 'guidNotificacao'
},
{
data: 'titulo'
},
{
data: 'descricao'
},
{
data: 'escopo'
},
],
language: {
search: "_INPUT_",
searchPlaceholder: "Pesquisar promoções",
},
}
});
const table = $('#datatables').DataTable();
$('#inputSearch').on('keyup', function() {
table.search(this.value).draw();
});
}
<div class="material-datatables">
<table id="datatables" class="table table-no-bordered " cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Título</th>
<th>Descrição</th>
<th>Escopo</th>
</tr>
</thead>
</table>
</div>
You have a typo in your datatable initialization. There's an extra curly brace after language. If you look at your browser's dev console, it would have told you this.

Jquery Data table export to Excel, Want to convert some number columns to string

This question might have been answered somewhere but I can't get it right yet. I have a data table that I'm exporting to Excel but my problem is the field 'Account Number' has a string like "800953". When I export to excel it's displaying "800,953".
My JS code below seems to be missing something. I had tried to put a dot in front of string then replace it with blank. The bit where it's supposed to pick the first 4 columns is working fine.
"use strict";
$(document).ready(function () {
$('.export-table').DataTable({
fixedHeader: {
header: true
},
dom: 'Bflit',
lengthMenu: [
[100, -1],
['100 rows', 'Show All']
],
buttons: [
{
extend: 'excel',
exportOptions: {
columns: [1, 2, 3, 4],
exportOptions: {
format: {
body: function (data, row, column, node) {
return data.replace(/\./g, ' ');
}
}
}
}
}
]
});
$('.data-table').DataTable({
"lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]]
});
$('#datable_2').DataTable({ "lengthChange": false });
});
I got solution to my question after going through this thread.
"use strict";
$(document).ready(function () {
$('.export-table').DataTable({
fixedHeader: {
header: true
},
dom: 'Bflit',// 'lBfrtip',// 'Bfrtip',
lengthMenu: [
[100, -1],
['100 rows', 'Show All']
],
buttons: [
{
extend: 'excelHtml5',
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row c[r^="C"]', sheet).attr('s', '50'); //"C" is Account number column
}
}
]
});
$('.data-table').DataTable({
"lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]]
});
$('#datable_2').DataTable({ "lengthChange": false });
});

Data Attrbute - get and set in jquery

I have a number of tables on my page with the data attribute that I need to access in my document ready function, as follows, and also I show the HTML.
$('.accountsHoldingTable').DataTable({
dom: 'tB',
responsive: true,
"lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
buttons: [
{
extend: 'excelHtml5',
filename: "Positions " + $(this).data("ttitle") + " " + today.toDateString()
}
],
});
<table id = "accountsHoldingTable"
data-ttitle = "my file name"
class = "headerSet table table-bordered display hover no-wrap dataTables accountsHoldingTable"
style = "width: 100%">
However, this gives me a result of
"Positions undefined Mon Dec 04 2017 (2).xlsx"
How do I do this properly so that undefined is replaced by the data-ttitle value?
I would guess that you are using this in the wrong context. See if this code accomplishes what you are are attempting to achieve:
$('.accountsHoldingTable').each(function(i, val) {
$(this).DataTable({
dom: 'tB',
responsive: true,
lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
buttons: [
{
extend: 'excelHtml5',
filename: "Positions " + $(this).data("ttitle") + " " + today.toDateString()
}
]
});
});

Disable sorting for a particular column in jQuery DataTables

I am using the jQuery DataTables plugin to sort the table fields. My question is: how do I disable sorting for a particular column? I have tried with the following code, but it did not work:
"aoColumns": [
{ "bSearchable": false },
null
]
I have also tried the following code:
"aoColumnDefs": [
{
"bSearchable": false,
"aTargets": [ 1 ]
}
]
but this still did not produce the desired results.
This is what you're looking for:
$('#example').dataTable( {
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1 ] }
]
});
As of DataTables 1.10.5 it is now possible to define initialisation
options using HTML5 data-* attributes.
-from DataTables example - HTML5 data-* attributes - table options
So you can use data-orderable="false" on the th of the column you don't want to be sortable. For example, the second column "Avatar" in the table below will not be sortable:
<table id="example" class="display" width="100%" data-page-length="25">
<thead>
<tr>
<th>Name</th>
<th data-orderable="false">Avatar</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&d=identicon&r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...[ETC]...
</tbody>
</table>
See a working example at https://jsfiddle.net/jhfrench/6yxvxt7L/.
To make a first column sorting disable, try with the below code in datatables jquery. The null represents the sorting enable here.
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
null
]
} );
Disable Sorting on a Column in jQuery Datatables
Using Datatables 1.9.4 I've disabled the sorting for the first column with this code:
/* Table initialisation */
$(document).ready(function() {
$('#rules').dataTable({
"sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType" : "bootstrap",
"oLanguage" : {
"sLengthMenu" : "_MENU_ records per page"
},
// Disable sorting on the first column
"aoColumnDefs" : [ {
'bSortable' : false,
'aTargets' : [ 0 ]
} ]
});
});
EDIT:
You can disable even by using the no-sort class on your <th>,
and use this initialization code:
// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "no-sort" ]
} ]
EDIT 2
In this example I'm using Datables with Bootstrap, following an old blog post. Now there is one link with updated material about styling Datatables with bootstrap.
What I use is just add a custom attribute in thead td and control sorting by checking that attr value automatically.
So the HTML code will be
<table class="datatables" cellspacing="0px" >
<thead>
<tr>
<td data-bSortable="true">Requirements</td>
<td>Test Cases</td>
<td data-bSortable="true">Automated</td>
<td>Created On</td>
<td>Automated Status</td>
<td>Tags</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr>
<td>
And JavaScript for initializing datatables will be
(it will dynamically get the sorting information from table iteself ;)
$('.datatables').each(function(){
var bFilter = true;
if($(this).hasClass('nofilter')){
bFilter = false;
}
var columnSort = new Array;
$(this).find('thead tr td').each(function(){
if($(this).attr('data-bSortable') == 'true') {
columnSort.push({ "bSortable": true });
} else {
columnSort.push({ "bSortable": false });
}
});
$(this).dataTable({
"sPaginationType": "full_numbers",
"bFilter": bFilter,
"fnDrawCallback": function( oSettings ) {
},
"aoColumns": columnSort
});
});
columnDefs now accepts a class. I'd say this is the preferred method if you'd like to specify columns to disable in your markup:
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th class="datatable-nosort">Actions</th>
</tr>
</thead>
...
</table>
Then, in your JS:
$("table").DataTable({
columnDefs: [{
targets: "datatable-nosort",
orderable: false
}]
});
Here is what you can use to disable certain column to be disabled:
$('#tableId').dataTable({
"columns": [
{ "data": "id"},
{ "data": "sampleSortableColumn" },
{ "data": "otherSortableColumn" },
{ "data": "unsortableColumn", "orderable": false}
]
});
So all you have to do is add the "orderable": false to the column you don't want to be sortable.
$("#example").dataTable(
{
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [0, 1, 2, 3, 4, 5]
}]
}
);
For Single column sorting disable try this example :
<script type="text/javascript">
$(document).ready(function()
{
$("#example").dataTable({
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0 ] }
]
});
});
</script>
For Multiple columns try this example: you just need to add column number. By default it's starting from 0
<script type="text/javascript">
$(document).ready(function()
{
$("#example").dataTable({
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
]
});
});
</script>
Here only Column 3 works
As of 1.10.5, simply include
'orderable: false'
in columnDefs and target your column with
'targets: [0,1]'
Table should like like:
var table = $('#data-tables').DataTable({
columnDefs: [{
targets: [0],
orderable: false
}]
});
If you set the FIRST column orderable property to false, you must also set the default order column otherwise it won't work since first column is the default ordering column. Example below disables sorting on first column but sets second column as default order column (remember dataTables' indexes are zero based).
$('#example').dataTable( {
"order": [[1, 'asc']],
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
To update Bhavish's answer (which I think is for an older version of DataTables and didn't work for me). I think they changed the attribute name. Try this:
<thead>
<tr>
<td data-sortable="false">Requirements</td>
<td data-sortable="false">Automated</td>
<td>Created On</td>
</tr>
</thead>
<tbody>
<tr>
<td>
"aoColumnDefs" : [
{
'bSortable' : false,
'aTargets' : [ 0 ]
}]
Here 0 is the index of the column, if you want multiple columns to be not sorted, mention column index values seperated by comma(,)
Using class:
<table class="table table-datatable table-bordered" id="tableID">
<thead>
<tr>
<th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
<th class="sort-alpha">Employee name</th>
<th class="sort-alpha">Send Date</th>
<th class="sort-alpha">Sender</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
<td>Alexander Schwartz</td>
<td>27.12.2015</td>
<td>dummy#email.com</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#tableID').DataTable({
'iDisplayLength':100,
"aaSorting": [[ 0, "asc" ]],
'aoColumnDefs': [{
'bSortable': false,
'aTargets': ['nosort']
}]
});
});
</script>
Now you can give "nosort" class to <TH>
This works for me for a single column
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false
}]});
If you already have to hide Some columns, like I hide last name column. I just had to concatenate fname , lname , So i made query but hide that column from front end. The modifications in Disable sorting in such situation are :
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 3 ] },
{
"targets": [ 4 ],
"visible": false,
"searchable": true
}
],
Notice that I had Hiding functionality here
"columnDefs": [
{
"targets": [ 4 ],
"visible": false,
"searchable": true
}
],
Then I merged it into "aoColumnDefs"
Use the following code to disable ordering on first column:
$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
To disable default ordering, you can also use:
$('#example').dataTable( {
"ordering": false,
} );
There are two ways, one is defined in html when you define table headers
<thead>
<th data-orderable="false"></th>
</thead>
Another way is using javascript, for example, you have table
<table id="datatables">
<thead>
<tr>
<th class="testid input">test id</th>
<th class="testname input">test name</th>
</thead>
</table>
then,
$(document).ready(function() {
$('#datatables').DataTable( {
"columnDefs": [ {
"targets": [ 0], // 0 indicates the first column you define in <thead>
"searchable": false
}
, {
// you can also use name to get the target column
"targets": 'testid', // name is the class you define in <th>
"searchable": false
}
]
}
);
}
);
you can also use negative index like this:
$('.datatable').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ -1 ] }
]
});
The code will look like this:
$(".data-cash").each(function (index) {
$(this).dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"bSort": false,
"aaSorting": []
});
});
Here is the answer !
targets is the column number, it starts from 0
$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );
You can directry use .notsortable() method on column
vm.dtOpt_product = DTOptionsBuilder.newOptions()
.withOption('responsive', true)
vm.dtOpt_product.withPaginationType('full_numbers');
vm.dtOpt_product.withColumnFilter({
aoColumns: [{
type: 'null'
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'select',
bRegex: false,
bSmart: true,
values: vm.dtProductTypes
}]
});
vm.dtColDefs_product = [
DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
];
set class "no-sort" in th of the table
then add css
.no-sort { pointer-events: none !important; cursor: default !important;background-image: none !important; }
by this it will hide the arrow updown and disble event in the head.

Categories