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/
Related
I want to change datatable show entry position in my project by default it is on top left but i want to bottom right.
this is my datatable position code:
$('#ebayebuygumm').DataTable({
"sDom": 'Lfrtlip',
"columnDefs": [
{
"targets": [0,-1], //first column / numbering column
"orderable": false, //set not orderable
},
],
"lengthMenu": [[10, 50, 100, 250], [10, 50, 100, 250]],
"order": [[ 2, "asc" ]]
});
$('#ebayebuygumm').DataTable({
"sDom": '<"top"f>rt<"bottom"pli>',
"columnDefs": [
{
"targets": [0,-1], //first column / numbering column
"orderable": false, //set not orderable
},
],
"lengthMenu": [[10, 50, 100, 250], [10, 50, 100, 250]],
"order": [[ 3, "asc" ]]
});
and also this css
#ebayebuygumm_paginate{
float: right;
}
#ebayebuygumm_length{
float: right;
margin-right: 12px;
}
"sDom": '<"top"f>rt<"bottom"pli>',
by this you can change position of dom
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 });
});
I have a form. After submission the data is sent to database.
I want to show all submissions details in dashboard with dataTables.js, What how it looks like.
table = $('#entries').DataTable({
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
data: data_table,
aoColumnDefs: [{ aTargets: -1, bSortable: false, bSearchable: false}],
"aaSorting": [[0,'desc']],
columns: Submissions.data_columns,
createdRow:function(row,data,dataIndex){
console.log(subId);
for(i=0; i<subId.length; i++){
$(row).attr("subId",subId[i]);
}
}
});
subId is an array where i have submissions' Ids of the form. Is there a way that I could use to add subId's to each row?
I'm using this plugin here https://www.datatables.net/ along side jQuery.2.1.4.
I'm also trying to utilize functionality provided by both https://www.datatables.net/manual/styling/jqueryui and https://jqueryui.com/
However i keep getting the following error
Uncaught TypeError: Cannot read property 'defaults' of undefined
The code throwing that error is below & its in java-script file "dataTables.jqueryui.js" which i downloaded from here https://www.datatables.net/manual/styling/jqueryui
/* Set the defaults for DataTables initialisation */
$.extend( true, DataTable.defaults, {
dom:
'<"'+toolbar_prefix+'tl ui-corner-tr"lfr>'+
't'+
'<"'+toolbar_prefix+'bl ui-corner-br"ip>',
renderer: 'jqueryui'
} );
EDIT:
Below is how i'm initializing my tables
var oTable;
function TableSorter(arr) {
if (arr == 'Custome') {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
else if (arr == null) {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
else {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "bSortable": false, "aTargets": arr }],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
};
The problem was being cause by loading "jquery-ui.js" before "jquery.dataTables.js".
I modified my #Scripts.Render('') order in my shared view such that "jquery.dataTables.js" is loaded first before "jquery-ui.js" and that resolved the problem.
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
});