We Keep Coding

Bootstap 4 Datatable column header not aligned in tbody

Here is my datatable initialization :
$(document).ready(function () {
var table = $('#dtBasicExample').DataTable({
"stateSave": true,
"responsive": true,
"ordering": true,
"pagingType" : "simple_numbers",
"lengthChange": true,
"fnInitComplete": function () {
var myCustomScrollbar = document.querySelector('#dt-vertical-scroll_wrapper .dataTables_scrollBody');
},
"scrollY": 620,
"scrollX": true,
"scroller": {
"rowHeight": 30
},
"scrollCollapse": true,
"deferRender": true,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"language": {
"zeroRecords" : "No Records were found",
"lengthMenu": "_MENU_"
}
});
table.column( 0 ).visible( false ); // hide first column
table.columns.adjust().draw(); // not working
});
Photo not mine, but this is same as what my table looks like. Table header is not aligned.
I already set the table width="100%", I have tried Table.columns.adjust().draw(), Table.clear().draw() and some css hacks for 'dataTables_scrollHeadInner' and 'dataTables_scrollHead' as mentioned in some posts but neither of them have worked.
Please note that it only happens when the data is loaded for the first time. The width of the table changes when I click pagination button or even F12 to bring up the dev tool console and looks as expected.
Any help will be appreciated.

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 });
});

jquery datatable highlight drops off after reload

I have a datatable which uses ajax to load the values.
var table = $('#example').DataTable({
"ajax": "xxxxxx.aspx",
stateSave: true,
"aLengthMenu": [
[10, 25, 50, 100],
[10, 25, 50, 100]
],
"iDisplayLength": 25,
"order": [
[0, "desc"]
],
columnDefs: [{
"visible": false,
"targets": [2, 3]
}, {
"type": 'date-uk',
"targets": [1, 9, 10]
}, {
"type": 'title-string',
"targets": [11]
}],
});
$('#example tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
using setInterval, I am asking that table to be reloaded every 5 secs.
setInterval(function(){table.ajax.reload(null, false)}, 5000);
When the Datatable is reloaded, it drops off the highlight row. Can anyone please tell me how to retain the highlight on the row after the reload?
Thanks

You could do something like that :
function highlight() {
$('#example tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
}
$(document).ready(function () {
// Call the function at document ready
highlight();
// Call the ajax and the function every 5 seconds
setInterval( function () {
table.ajax.reload(null, false);
highlight();
}, 5000 );
});

DataTable.defaults not working in jQuery DataTables-1.10.7

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.

How to manually delimit the number of displayed tows of a table (DataTables)?

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
});