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.

2 pane crud table view for nested table (main and detail table)

Would someone have an example how to create 2 tables in i.e. Javascript.
One table at the top of the web page. This table is the master table and one table is rendered at the bottom of the web page which is a detail table from the record currently selected in the master table. Both tables need to be able to perform crud operations.
Use case:
A table or customer invoices displays customer name, invoice number, invoice date and total amount.
When the customer row is clicked in the master table the second table (detail table) renders the details of the invoice such as items purchased that pertain to that invoice,price, quantity etc. with a total price at the bottom that matches the net value of the invoice master table.
Maybe there is a way to do it with jquery or datatables. Data should be loaded and manipulated via REST calls.

I think this will suites your senario:
$('#maintable').DataTable({
"serverSide": true,
"processing": true,
"searching": true,
"scrollY": 'calc(100vh - 300px)',
"scrollCollapse": true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"ajax": {
"url": "//urlformaintabledata",
"type": "POST",
"dataType": "json",
"data": function (filtersDto) {
//input data goes here
},
},
"columns": [
{
name: "referenceno",
data: "ReferenceNo",
title: "ReferenceNo",
orderable: true,
},
//other column list here
{
name: "CreatedDate",
data: "CreatedDateString",
title: "Details",
render: function (data, type, row) {
return '<button data-detail_id="row.id"> </button>';
},
orderable: true
},
],
})
$('#btn_details_id').on('click',function(){
var id =$(this).data('detail_id');
$('#detailtable').DataTable({
"serverSide": true,
"processing": true,
"searching": true,
"scrollY": 'calc(100vh - 300px)',
"scrollCollapse": true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"ajax": {
"url": "//url_for_details/id",
"type": "POST",
"dataType": "json",
"data": function (filtersDto) {
//input data goes here
},
},
})
})

How do I make Serverside and column sorting working in the same time on DataTable?

I have a DataTable and I would like to display data over several pages. I would like pages with 100 elements on each. In addition I would like to have some of my columns sortable.
In my Database I have more than 100 elements and my DataTable is only showing the first 100...
I've noticed some things :
1) When I put "bServerSide": false my columns are sortable BUT my number of rows is limited to 100 (one page with 100 elements).
2) When I put "bServerSide": true my number of rows is now correct (several pages with 100 elements on each) BUT my columns are not sortable anymore (I mean the sort function doesn't work when I click on the sort button).
$('#tableSupervisionElecteur').DataTable({
"bLengthChange" : false,
"bFilter" : false,
"bProcessing": false,
"searching": false,
"ordering": true,
"order": [[1, 'asc']],
"bStateSave": false,
"pageLength": 100,
"iDisplayStart": 0,
"bServerSide": true,
"initComplete": function(settings, json) {
},
"fnDrawCallback": function () {
},
"sAjaxSource": "sourcesDataTables",
"aoColumns": [
...
],
columnDefs: [
{
orderable: false,
targets: 0
},
{
orderable: false,
targets: 7
},
{
orderable: false,
targets: 8
},
]
});
I would like to have BOTH features working together (sorting and displaying) and not one or the other.
Furthermore my DataTable needs to be able to handle approximately 30 000 rows.

Remove orderable: false for the columns which you need ordering and also specify the order(asc or desc) in "order" option

Its depending on your server side, as order is processed on server. Server must check if any request for asc or desc and build your database query, each column field sorted base on that.

jQuery Datatables - Show Last Page First

I am using the jQuery DataTables plugin (https://datatables.net/). I am trying to get the last page to be the first page. I am sorting by date and would like the latest entries to be at the bottom of the visible area.
So if the "Records per page:" is 10, then the latest date should be at the bottom. I am using the plugin to create a "logbook" so the latest entries should always be at the bottom. I have tried the following but I can't get it to work:
jQuery
// On page load: datatable
var table_companies = $('#table_companies').dataTable({
"ajax": "data.php?job=get_companies",
"sDom": '<"top"lB><"clear">rt<"bottom"p><"clear">',
"language": {
"paginate": {
"previous": "Older Entries"
}
},
"autoWidth": false,
"searching": true,
"columns": [
{ "data": "date" },
{ "data": "type", "sClass": "company_name" },
{ "data": "registration" }
],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [-1] }
],
"lengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
"pagingType": "simple",
"oLanguage": {
"sLengthMenu": "Records per page: _MENU_",
"sInfo": "Total of _TOTAL_ records (showing _START_ to _END_)",
"sInfoFiltered": "(filtered from _MAX_ total records)"
}
});
table_companies.fnPageChange( 'last' );
I am using this link to load my plugin:
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/dt-1.10.11,b-1.1.2,b-colvis-1.1.2,b-print-1.1.2,cr-1.3.1,r-2.0.2/datatables.min.js"></script>

Please check this code:
$('#datatable').DataTable().page('last').draw('page');

It turns out it was as simple as capitalizing the "D" in dataTables.
Changed:
var table_companies = $('#table_companies').dataTable({
to:
var table_companies = $('#table_companies').DataTable({

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.