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.

Datatable not apply on dynamically created table using MVC

I am having issue with datatable in mvc application mvc has one common layout that is master page (Layout Page)
I have implement datatable commonly in master page (Layout page) that apply to all child pages
now , I am stuck with one challenge that is some tables are created dynamically on comobo box selection
Layout Page
$('.table').DataTable({
"aoColumnDefs": [
{
bSortable: false,
aTargets: [-1], /* 1st one, start by the right */
"defaultContent": "",
}
],
"fixedHeader": true,
"lengthChange": false,
"bPaginate": false,
"responsive": true,
"autoWidth": false,
"scrollY": "300px",
"scrollCollapse": true,
"paging": false,
initComplete: function (settings, json) {
this.api().columns().header().each(function (th) {
$(th).removeClass("sorting_asc");
$(th).removeClass("sorting");
}
)
},
});
Child (Partial View)
<div class="row">
<div class="col-md-12">
<br />
<div id="example"></div>
</div>
</div>
function GetEmails() {
var tbl = $('#example');
$.ajax({
url: '/test/GetTestData',
contentType: 'application/html ; charset:utf-8',
type: 'GET',
dataType: 'html'
}).success(function (result) {
tbl.empty().append(result);
}).error(function (result) {
alert("Fail");
});
}
Now , I have issue that
tbl.empty().append(result);
after append table in div , datatable not apply on this table, I am wondering that how can I able to notify in Layout page that table is append in child page
Let me know , there is any event in javascript or jquery that fire after append or something ??
Thanks in advance

Try this,
Its working
function ApplyDataTable()
{
$('#example').bind('DOMNodeInserted', function (event) {
if (event.type == 'DOMNodeInserted')
{
//Datatable for search and sorting
$(currntTable).DataTable({
"aoColumnDefs": [
{
bSortable: false,
aTargets: [-1], /* 1st one, start by the right */
"defaultContent": "",
}
],
"fixedHeader": true,
"lengthChange": false,
"bPaginate": false,
"responsive": true,
"autoWidth": false,
"scrollY": "300px",
"scrollCollapse": true,
"paging": false,
});
}
});
}

You can initialize datatable in success of ajax something like this,
$('.Table').DataTable();
But if you really want to add the datatable from layout only, then this should be helpful
$(document).ajaxComplete(function (event, xhr, settings) {
$('.Table').DataTable();
});

Aasorting in jQuery based on filters

I have a datatable style in which I want to disable/enable the initial sort based on some filters in aspx.
The setting has a aasorting property, lets assume I have a global variable "isDefaultSortingEnabled" and based on this variable I want to perform the sorting. I tried using if-else, but we cant write it inside the style setting.
var objDataTableSettings = {
"bPaginate": false,
"bFilter": false,
"aaSorting": [] , // manipulate this sorting based on a global variable
// "aaSorting": [[1, 'asc']],
"bProcessing": true,
"aoColumnDefs": [

You can use a ternary expression within the object to set the aaSorting property based on your global variable. Try this:
var objDataTableSettings = {
"bPaginate": false,
"bFilter": false,
"bProcessing": true,
'aaSorting': isDefaultSortingEnabled ? [] : [[ 1, 'asc' ]];
// other settings...
}
If you prefer to use a full if/else statement, you would need to first create the object, then change the property as required:
var objDataTableSettings = {
"bPaginate": false,
"bFilter": false,
"bProcessing": true,
// other settings...
}
if (isDefaultSortingEnabled) {
objDataTableSettings.aaSorting = [];
} else {
objDataTableSettings.aaSorting = [[ 1, 'asc' ]];
}
The former is preferred due to its brevity.

if (isDefaultSortingEnabled) {
aaSortingdData = [];
} else {
aaSortingData = [[ 1, 'asc' ]];
}
var objDataTableSettings = {
"bPaginate": false,
"bFilter": false,
"bProcessing": true,
"aaSorting": aaSortingData
}

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

Datatables : disable first next previous last and show / search record when processing

I am using Datatables 1.9 version
var oTable = $('#example').dataTable( {
"oLanguage": {"sSearch": "Search all columns:",
"sLengthMenu": "Display <select><option value='100'>100</option><option value='200'>200</option></select> records per page"
},
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"iDisplayStart": 0,
"iDisplayLength": 2000,
"bFilter": true,
"bInfo": true,
"bSort": true,
"sScrollX": "100%",
"sScrollY": "500px",
"bScrollCollapse": true,
"bPaginate": true,
"bSortClasses": true,
"bLengthChange": true,
"bProcessing": true,
"bDestroy": true,
"bServerSide": true,
"bDeferRender": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "form_data", "value": data } );
},
"sAjaxSource": "search.py",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json)
{
fnCallback(json);
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
document.getElementById("bottom").focus();
},
"error": function (xhr, error, thrown) {
alert("An Error Occurred.!");
}
});
The issue is that when I run the search and datatables renders "Processing ..." text the "Show .. Search" and first next previous and last button also gets displayed. Is there a way that I defer there display when datatabales has processed or received response from backend.

You should include "bPaginate": false, into the configuration object you pass to your constructor parameters.
As seen here.
as it is data table

I didn't understand your question completly. If you want to hide those controlls you may try this..
Datatables comes with controls for filtering and pagination. These can be shown and hidden in a couple of ways (all examples in coffeescript):
Way 1
$("#myTable").dataTable
"bPaginate": false, #hide pagination control
"bFilter": false #hide filter control
Way 2: Use the "sDom" prop
$("#myTable").dataTable
"aaData": data
"sDom": 'ft'
Here 'f' means filter and 't' means table, so only show those. Order matters: 'ft' puts
the filter on top, whereas 'tf' will put it on bottom.
For more complex and other widgets, see Ref
Ref: http://datatables.net/usage/options#sDom
I got the answer from this link : https://gist.github.com/1568446

//Hide DataTables Length
<style>.dataTables_length {
display: none;
}
</style> //Hide Pagination
<style>.pagination {
display: none;
}
</style> //Hide DataTables Info
<style>.dataTables_info {
display: none;
}
</style>
This will work,but i am not recommending this

Note that this answer is consistent with version DataTables 1.13.1
This is all set with the arguments object given to initialize the table
const myTable = $('#example').dataTable( args );
To avoid Next / Previous / First / Last buttons on pagination:
const args = {pagingType: "numbers"};
Find here the 6 choices available for pagingType property
To show/hide the searching box:
const args = {searching: true/false};
I hope this helps