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.

DataTables warning: table id=tbl_new- Ajax error after adding serverSide: true,

var table = $('#canidateregtable').DataTable();
table.destroy();
$('#canidateregtable').DataTable( {
serverSide: true,
"ajax": {
"url" : "getdata",
"dataSrc" : "",
},
});
This is my datatable and some column like
"columns": [
{"data": "user_id",}
]
Why this error can anyone help me and this is in live in server

Setting attribute of Datatable differs from version of datatable js you are using.
If you are using Datatable version of greater than 1.10.0 use below syntax.
$('#canidateregtable').DataTable({
"sAjaxSource": "/GetData", // Your url
"bServerSide": true,
"bSearchable": true,
"order": [[1, 'asc']],
"columns": [
// You can mention here all your columns you want to display
{
"data": "Name",
}
]
});
}

DataTable cannot click the button after pagination

I have done a datatable and custom it's data but when i click the button on the first column, it only works on the first page and cannot click on other forward pages.
$('#tbl').DataTable( {
responsive: true,
data: data1,
autoWidth: false,
"order": [[ 7, "asc" ]],
"iDisplayLength": 5,
"pagingType": "full_numbers",
"dom": '<"top">rt<"bottom"p><"clear">',
"oLanguage": {
"sEmptyTable": "Not Record"
},
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] }
],
"columns": [
{},{"sClass": "dt-body-justify"},{},{},{},{},{},{},{},{}
]
} );
BUT when for the click function in live mode, it still cannot work
$('#tbl tbody tr #edit_current_product').delegate('a', 'click', function () {
.......
} );

id's must be unique. We dont know your markup but
$('#tbl tbody tr #edit_current_product').delegate('a', 'click', function ()
seems utterly wrong. Either you have multiple <a>'s with the same id #edit_current_product or the right thing actually happens, you have paginated away from the page where #edit_current_product is present.
I guess that what you really want is
$('#tbl').on('click', 'tbody tr a', function()
or use a class instead of an id
$('#tbl').on('click', 'tbody tr .edit_current_product', function()
BTW, why
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] }
],
"columns": [
{},{"sClass": "dt-body-justify"},{},{},{},{},{},{},{},{}
]
you just need
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] },
{ "sClass": "dt-body-justify", targets : [1] }
]

DataTables ajax.reload when keeping pagination it jumps to the bottom of the page

I'm using jQuery DataTables with ajax sourced data.
I have to keep the data up to date every 30 seconds without refreshing the page, and ajax.reload() is the function that I need.
I put ajax.reload() inside a setInterval function.
And all works right (if you stay on page 1). But when you surf the table on page 2 or 3, when setInterval is fired, it gets you back to the page 1.
So ...
Looking to docs at this url: http://datatables.net/reference/api/ajax.reload()
if I pass "false" as second parameter it holds the current paging position, and paging is not reset on reload. BINGO!
It works! BUT ... I have a new problem that a tried to solve the all day and now I'm stuck. That's why I post this question.
It keeps paging but if you are not on page 1, every time that ajax.reload() is fired, the page scrolls (jump directly) to the bottom.
It's very unfriendly, unreadable, unusable.
I don't know WHY the page scrolls to the end-bottom.
I post a link to my simple datatable js that I use on my page.
jsfiddle
var url = table.data('url');
var filterType = table.data('filtertype');
var options = {
"ajax": {
"url": url,
"type": "GET",
"data": function (d) {
d.contact_type = filterType
// this variable will set by server when page load. It should be "lead", "prospect", "client". Leave empty to get all.
}
},
"columns": [
{"data": "html_is_company"},
{"data": "name"},
{"data": "html_type_label"},
{"data": "created"},
{"data": "last_update"},
{"data": "html_actions"},
{"data": "tsu"},
{"data": "business_name"}
],
"bLengthChange": false,
"pageLength": 20,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"columnDefs": [
{
"targets": [ 7 ],
"visible": false,
"searchable": true,
},
{
"targets": [ 6, 7 ],
"searchable": false,
"visible": false
},
{
"targets": [0, 5],
"searchable": false,
"orderable": false
},
{
"targets": [ 4 ],
"render": function (data, type, row) {
return moment(data, IN_DATE_TIME_FORMAT, 'it').fromNow();//.format(DATE_TIME_FORMAT);////;
}
},
{
// Sort column 4 (formatted date) by column 6 (hidden seconds)
"orderData":[ 6 ],
"targets": [ 4 ]
}],
"order": [[4, "desc"]],
"search": "_INPUT_",
"language": {
"sSearchPlaceholder": "Cerca...",
"paginate": {
"previous": '<i class="icon wb-chevron-left-mini"></i>',
"next": '<i class="icon wb-chevron-right-mini"></i>'
},
//"url": "//cdn.datatables.net/plug-ins/1.10.9/i18n/Italian.json"
}
};
var datatable = table.DataTable(options);
this.setDataTable(datatable);
setInterval(function(){
datatable.ajax.reload(null, false);
}, 5000);

My solution:
"fnDrawCallback": function(data) {
$(".paginate_button > a").on("focus", function() {
$(this).blur();
});
}

jacopo.galli's solution was very clunky when I implemented for my table, but it's probably because my code was a mess. The idea of adding blur() is great thou.
I rewrite his code a bit:
$(window).scroll(function(){
$(".paginate_button > a").blur();
});
The buttons on the pagination bar will be "unfocused" once the page scrolls.
So your final code should look like this:
var url = table.data('url');
var filterType = table.data('filtertype');
var options = {
"ajax": {
"url": url,
"type": "GET",
"data": function (d) {
d.contact_type = filterType
// this variable will set by server when page load. It should be "lead", "prospect", "client". Leave empty to get all.
}
},
"columns": [
{"data": "html_is_company"},
{"data": "name"},
{"data": "html_type_label"},
{"data": "created"},
{"data": "last_update"},
{"data": "html_actions"},
{"data": "tsu"},
{"data": "business_name"}
],
"bLengthChange": false,
"pageLength": 20,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"columnDefs": [
{
"targets": [ 7 ],
"visible": false,
"searchable": true,
},
{
"targets": [ 6, 7 ],
"searchable": false,
"visible": false
},
{
"targets": [0, 5],
"searchable": false,
"orderable": false
},
{
"targets": [ 4 ],
"render": function (data, type, row) {
return moment(data, IN_DATE_TIME_FORMAT, 'it').fromNow();//.format(DATE_TIME_FORMAT);////;
}
},
{
// Sort column 4 (formatted date) by column 6 (hidden seconds)
"orderData":[ 6 ],
"targets": [ 4 ]
}],
"order": [[4, "desc"]],
"search": "_INPUT_",
"language": {
"sSearchPlaceholder": "Cerca...",
"paginate": {
"previous": '<i class="icon wb-chevron-left-mini"></i>',
"next": '<i class="icon wb-chevron-right-mini"></i>'
},
//"url": "//cdn.datatables.net/plug-ins/1.10.9/i18n/Italian.json"
}
};
var datatable = table.DataTable(options);
this.setDataTable(datatable);
$(window).scroll(function(){
$(".paginate_button > a").blur();
});
setInterval(function(){
datatable.ajax.reload(null, false);
}, 5000);

I've found a solution that works for me.
The problem was the "focus" on DataTables pagination links.
When user clicks on a link page, it sets a focus on that link and when ajax.reload() is fired the browser gets you where the focused element is. My table is the last element of the page so the page scrolls to the bottom.
I got it when I clicked on another area of the page after clicked on page 2 link. The "jumping" problem was gone.
So, I solved firing a blur() when DataTables has complete its initialization and when ajax.reload() has finished (thanks to the first parameter that allows you to define a function).
In DataTables options I added this:
"initComplete": function(settings, json) {
$(".paginate_button > a").on("focus", function(){
$(this).blur();
});
},
and then, in setInterval:
setInterval(function(){
datatable.ajax.reload(function(){
$(".paginate_button > a").on("focus", function(){
$(this).blur();
});
}, false);
}, 30000);
Don't know if this is the "best solution" ... but it works and could helps someone.

Datatables 1.10 paging only shows page number 1

I'm using jQuery DataTables v1.10.
At our new website we have a dataset with more than 10000 records.
The displayLength is set by default at 50 records.
After initializing the DataTable, 50 of 10000+ records are showing, but there's only 1 pagination item visible and a forward and backward arrow which are both disabled.
When I'm changing the displayLength to 100, I get one page with 100 records out of 10000+, but still one page instead of more than 100 pages.
This is our initialisation:
"oLanguage": oDatatablesNL,
"sDom": '<"dt-toolbar clearfix"fpl>rt<"row-actions"><"dt-toolbar bottom clearfix"p>',
"processing": true,
"serverSide": true,
"ajax": "/?async=yes&get=datatable,
"ordering": true,
"order": [[ 4, "asc" ]],
"paging": true,
"pagingType": "full_numbers",
"displayStart": 0,
"lengthMenu": [[50, 100, 500], [50, 100, 500]],
"lengthChange": true,
"searching": true,
//"deferRender": true,
"columns":
[
{
"data": "firstColumn",
"class": "first"
},
{
"data": "secondColumn",
"class": "second"
},
],
"createdRow": function( row, data, dataIndex ) {
dtUpdateData(row, data, dataIndex);
},
"initComplete": function() {
dtExtras(dtLengths);
}
And our serverside data:
{"draw":1,"recordsTotal":"15827","recordsFiltered":"50","data":[{'column1':'test','column2':'test2'}]

The problem seemed to be that recordsFiltered should be the number of records which were filtered by the query. I've searched for the answer during more than 2 hours; feeling really dumb now... ;)