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()
}
]
});
});
Related
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.
i'm using DataTable and now after some work my table has a double datatable info showing as :
Showing 1 to 10 of 385 entries
Showing 1 to 10 of 385 entries
And i don't know how it is happening, in the inspect mode i have :
<div class="dataTables_info" id="tableResult_info" role="status" aria-live="polite">Showing 1 to 10 of 385 entries</div>
<div class="dataTables_info">Showing 1 to 10 of 385 entries</div>
My table is initialized like this :
let matable = $('#tableResult').DataTable({
data: newData,
dom: 'Blfrtipi',
select: true,
responsive:true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
'columnDefs': [
{
'targets':[column],
'createdCell': function (td) {
$(td).attr('class', 'text-center');
}
}
],
buttons: [
'excel',
{
className: 'boutonCacherLogsMessages',
text: 'Cacher logs et messages',
action: function ( e, dt, node, config ) {
cacherMessages();
cacherLogs();
}
}
],
language: {
"lengthMenu": "Afficher _MENU_ résultats",
search: "_INPUT_",
searchPlaceholder: "Rechercher"
},
});
Can i have your help please ?
Ty
EDIT : Ok lol i found it fast it was because of the
dom: 'Blfrtipi',
where the last i was in too much
Ok lol i found it fast it was because of the
dom: 'Blfrtipi',
where the last i was in too much
I have the following js code to initialize a DataTable:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
What I'm currently failing to figure out is, how do I now define further settings other than the buttons as an additional argument? I would for example like to define the settings of the length menu such as is explained here https://datatables.net/examples/advanced_init/length_menu.html using:
$(document).ready(function() {
$('#example').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
So I'd do something like this, which doesn't work:
$(document).ready(function() {
$('#example').DataTable( {
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
This is likely obvious, but I'm just starting out with js.
You need add letter l in dom
Something like this:
var oTable = $('#example').DataTable( {
dom: 'Blfrtip',
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
});
You can check the reference in: https://datatables.net/reference/option/dom
Result : https://jsfiddle.net/g2kdfrcu/
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 });
});
Is there any possibility to manually delimit the numbers of the displayed rows of a (Data)Table?
Normally we use filtering input, but then the values are fixed; for example: 10, 25, 50, 100, All.
I would like to have a text field where I could insert the number of rows I wish to display; for example: 3, 7, 29, etc and then after clicking a button we would display the "pages" of the table only with the inserted number of rows.
I read some tutorials and did some searches, but was unable to find anything about it.
Here the JavaScript of my table (but I don't think it helps):
$('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
Any help is welcome!
Straight from datatable forums.
var oTable;
$(document).ready(function() {
$('YourButtonIdorSelector').click( function () {
var newDisplayLength = $("TextFieldIDOrSelectorHere").val();
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = newDisplayLength;
oTable.fnDraw();
});
oTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
});
or
var searchTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
searchTable.fnSettings()._iDisplayLength = $("TextFieldIDOrSelectorHere").val();
searchTable.fnDraw(); //redraw the table
You can simply add the new length you want displayed to the _iDisplayLength property and redraw the table.
When creating the data table, this stuff would go in the complete callback function fnInitComplete
$('#search-table').dataTable({
"fnInitComplete": function(oSettings,json){
var $table = this;
//example of how many rows to show
var newLength = 29;
//add the new value to your datatable object
oSettings._iDisplayLength = newLength;
//redraw the table, you have to do this to see the changes
$table.fnDraw();
},
//the rest of your settings
});