Related
I have a checkbox on a table, where when that checkbox is selected it will pass data in the "sisa" variable. When in the console log , I have managed to display the "sisa" data. But how to submit the "sisa" data in the input form in the next column ("diterima" column). This checkbox is a multiple selection, so you can select many at once.
the screenshoot:
https://i.postimg.cc/qq7CpVrf/error.png
My datatable
$('#produkTabel').DataTable({
"aaData": response.result,
"columns": [
{
"data": "id", "class": "text-center",
render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
},
{"data": "produk.item_code"},
{"data": "produk.name"},
{"data": "jumlah", "class": "text-center"},
{"data": "sisa", "class": "text-center"},
{"data": "id", "class": "text-center", render: function ( data,row) {
return '<input type="number" id="inputID" class="open-input form-control bg-white" value="0">';
},},
{
"data": "id",
"class": "text-center",
'searchable': false,
'orderable': false,
render: function ( data, type ,row ) {
if ( type === 'display' ) {
return '<input type="checkbox" data-sisa="'+row.sisa+'" class="editor-active">';
}
return data;
},
className: "dt-body-center"
},
],
"bDestroy": true,
});
My Jquery
$('body').on('change', 'input[type="checkbox"]', function() {
// var tblData = table.rows('.selected').data();
let sisa = $(this).data('sisa');
// console.log(tblData);
// var inputForm = $(this).'input[type="number"]';
// $('.open-input').val(sisa);
// this.checked ? inputForm.val(sisa) : inputForm.val(0);
console.log(sisa);
});
$("#inputID").val(sisa);
Try this in your script....sorry if am wrong
I am working on an ASP.NET Core 2.1 website and I am using Datatables.net to display my record lists retrieved from a backend API.
This issue I am trying to resolve is that, whenever an error occurs while retrieving the data from the backend API, I want the error message to appear in a Bootstrap alert-error DIV on the same page as the datatable.
I have looked at https://datatables.net/forums/discussion/30033/override-default-ajax-error-behavior and Enable datatable warning alert but I am not strong in javascript so I am having some difficulty determining how to implement this feature.
Currently, I have the datatable set up in my cshtml page as follows;
<script>
jQuery(document).ready(function ($) {
var table = $("#sitelist").DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"orderMulti": false,
"ajax": {
"url": "/Sites/LoadData",
"type": "POST",
"datatype": "json"
},
"columnDefs": [
{ "orderable": false, "targets": 6 },
{ "className": "text-center", "targets": [4, 5] },
{
"targets": [4, 5],
"createdCell": function(td, cellData, rowData, row, col) {
if (cellData) {
$(td).html('<i class="far fa-check-circle text-primary""></i>');
} else {
$(td).html('<i class="far fa-times-circle text-danger""></i>');
}
}
}
],
"columns": [
{ "data": "Id", "name": "Id", "autoWidth": true, "defaultContent": "" },
{ "data": "SiteName", "name": "SiteName", "autoWidth": true, "defaultContent": "" },
{ "data": "CompanyId", "name": "CompanyId", "autoWidth": true, "defaultContent": "" },
{ "data": "CompanyName", "name": "CompanyName", "autoWidth": true, "defaultContent": "" },
{ "data": "IsAdminSite", "name": "IsAdminSite", "autoWidth": true, "defaultContent": "" },
{ "data": "IsEnabled", "name": "IsEnabled", "autoWidth": true, "defaultContent": "" },
{
"render": function (data, type, full, meta) { return `<i class="far fa-edit text-primary" title="Edit">`; }
}
],
// From StackOverflow http://stackoverflow.com/a/33377633/1988326 - hides pagination if only 1 page
"preDrawCallback": function (settings) {
var api = new $.fn.dataTable.Api(settings);
var pagination = $(this)
.closest('.dataTables_wrapper')
.find('.dataTables_paginate');
pagination.toggle(api.page.info().pages > 1);
}
});
});
</script>
And here is the loaddata action in my SitesController class;
public async Task<IActionResult> LoadData()
{
try
{
await SetCurrentUser();
ViewData["Role"] = _currentRole;
var draw = HttpContext.Request.Form["draw"].FirstOrDefault();
var start = Request.Form["start"].FirstOrDefault();
var length = Request.Form["length"].FirstOrDefault();
var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
var searchValue = Request.Form["search[value]"].FirstOrDefault();
var pageSize = length != null ? Convert.ToInt32(length) : 0;
var skip = start != null ? Convert.ToInt32(start) : 0;
var request = new SitesGetListRequest
{
OrderBy = SetOrderBy(sortColumn, sortColumnDirection),
Filter = SetFilter(searchValue),
PageNumber = (skip / pageSize) + 1,
PageSize = pageSize
};
var tokenSource = new CancellationTokenSource();
var token = tokenSource.Token;
var endpoint = $"api/companies/{SetCompanyId()}/sites/filtered";
var siteData = await _client.GetSiteListAsync(request, endpoint, token);
if (siteData.Sites != null)
{
return Json(new
{
draw,
recordsFiltered = siteData.Paging.TotalCount,
recordsTotal = siteData.Paging.TotalCount,
data = siteData.Sites.ToList()
});
}
//TODO: Find a way to pass error to a Bootstrap alert-warning DIV rather than the jQuery (javascript) alert box
var errorMessage = $"Http Status Code: {siteData.StatusCode} - {siteData.ErrorMessages.FirstOrDefault()}";
return Json(new
{
data = "",
error = errorMessage
});
}
catch (Exception ex)
{
const string message = "An exception has occurred trying to get the list of Site records.";
_logger.LogError(ex, message);
throw;
}
}
As it stands right now, If an error exists in the object returned from the API call, I pass a message to the error property in the returned json and it shows up as an javascript alert popup box on my cshtml page and when I click OK, the datatable displays "No records found", as shown in the images below;
and...
What I want is for the error message to display in a bootstrap alert-danger div at the top of the cshtml page. I so not want the alert popup to appear and I still want the datatable to show "No records found".
I think that what I am looking for is described on Enable datatable warning alert...
Disable the alert popup by using
$.fn.dataTable.ext.errMode = 'none';
And pass the error message to the BootStrap div using
$('#example')
.on( 'error.dt', function ( e, settings, techNote, message ) {
console.log( 'An error has been reported by DataTables: ', message );
} )
.DataTable();
but instead of
console.log( 'An error has been reported by DataTables: ', message );
use something like
$("#error").html(MY ERROR MESSAGE HERE);
and assign id="error" to the bootstrap div.
But, I am having trouble figuring out how to trigger the Ajax call from my loaddata method in the SitesController and also how to correctly add the error event to the beginning of my datatable script.
Before I burn more time trying to work this out, I thought I would put this on SO and see if anyone with javascrit/jquery experience can provide some guidance.
You can add the error property to the ajax call. Probably the best will be to use fnServerData.
jQuery(document).ready(function ($) {
var table = $("#sitelist").DataTable({
"processing": true,
"serverSide": true,
"filter": true,
"orderMulti": false,
"sAjaxSource": "/Sites/LoadData",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"cache": false,
"success": function (data) {
fnCallback(data);
},
"error": function(error){
$("#error").html(error);
}
});
},
"columnDefs": [
{ "orderable": false, "targets": 6 },
{ "className": "text-center", "targets": [4, 5] },
{
"targets": [4, 5],
"createdCell": function(td, cellData, rowData, row, col) {
if (cellData) {
$(td).html('<i class="far fa-check-circle text-primary""></i>');
} else {
$(td).html('<i class="far fa-times-circle text-danger""></i>');
}
}
}
],
"columns": [
{ "data": "Id", "name": "Id", "autoWidth": true, "defaultContent": "" },
{ "data": "SiteName", "name": "SiteName", "autoWidth": true, "defaultContent": "" },
{ "data": "CompanyId", "name": "CompanyId", "autoWidth": true, "defaultContent": "" },
{ "data": "CompanyName", "name": "CompanyName", "autoWidth": true, "defaultContent": "" },
{ "data": "IsAdminSite", "name": "IsAdminSite", "autoWidth": true, "defaultContent": "" },
{ "data": "IsEnabled", "name": "IsEnabled", "autoWidth": true, "defaultContent": "" },
{
"render": function (data, type, full, meta) { return `<i class="far fa-edit text-primary" title="Edit">`; }
}
],
// From StackOverflow http://stackoverflow.com/a/33377633/1988326 - hides pagination if only 1 page
"preDrawCallback": function (settings) {
var api = new $.fn.dataTable.Api(settings);
var pagination = $(this)
.closest('.dataTables_wrapper')
.find('.dataTables_paginate');
pagination.toggle(api.page.info().pages > 1);
}
});
});
</script>
I have been working with datatables for a couple of weeks and I have this custom datatables that I'm identifying by class (tableIdentifyClass):
var handleDataTable = function () {
if ($("." + tableIdentifyClass).length) {
table = $("." + tableIdentifyClass).DataTable({
aaData: dataForTable,
aoColumns: [
{ mData: "IsDefault", title: "" },
{ mData: "Name", title: "Name" },
{ mData: "Icon", title: "Icon" },
{ mData: "IsDefault", title: "" }],
"order": [[1, "asc"]],
"bAutoWidth": false,
"lengthChange": false,
"columnDefs": [{
"targets": 0,
"render": function (data, type, full, meta) {
if (type === 'display') {
if (!data)
return '<span class="fa-xs"><i class="fa fa-edit" style="font-size:125%" onclick:""></i></span>';
else return '<span></span>';
}
return (isNaN(data)) ? -1 : +data;
}
},
{
"targets": 2,
"render": function (data, type, full, meta) {
if (type === 'display') {
if (data != '')
return '<span class="fa-xs"><i class="fa ' + data + '" style="font-size:125%"></i></span>';
else return '<span>-</span>';
}
return (isNaN(data)) ? -1 : +data;
}
},
{
"targets": 3,
"render": function (data, type, full, meta) {
if (type === 'display') {
if (!data)
return '<a class="fa-xs"><i class="fa fa-times" style="font-size: 125%; color: red;" onclick="deletePrefLocally(' + full.UId + ',' + full.Id + ',\'' + tableIdentifyClass + '\')"></i></a>';
else return '<span></span>';
}
return (isNaN(data)) ? -1 : +data;
}
}]
});
}
}
The data for the table (dataForTable):
[ { "Icon": "fa-exclamation-circle", "IsDefault": true, "Name": "Nixon", "UId": 1 },
{ "Icon": "fa-exclamation-circle", "IsDefault": false, "Name": "Tiger", "UId": 2 }]
I'm trying to delete the second row by calling function deletePrefLocally
function deletePrefLocally(uId, deletedId, tableIdentifyClass) {
var crtUsage = dataForTable; //same items as the table
var inItems = crtUsage.filter(function (elem) {
return elem.Id === deletedId; // find the item with the same id
})[0];
var found = crtUsage.indexOf(inItems);
if (found != -1) crtUsage.splice(found, 1);
table = $("." + tableIdentifyClass);
datatable = table.DataTable();
datatable.clear();
datatable.rows.add(crtUsage).draw();
}
My problem is that the last row datatable.rows.add(crtUsage).draw(); pops-up a message: DataTables warning: - Request unknows parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
Why is not applying the new content? Why after closing the error box I have two search areas and paging and all the values are null? What am I doing wrong?
You've defined "IsDefault" twice in your column list.
aoColumns: [
{ mData: "IsDefault", title: "" },
{ mData: "Name", title: "Name" },
{ mData: "Icon", title: "Icon" },
{ mData: "IsDefault", title: "" }],
I suspect you meant to have "UId" for the last one, as that is included in the data.
Found the reason... After all the page was loaded I've checked if based on tableIdentifyClass I'll receive true after calling $.fn.DataTable.isDataTable( '.' + tableIdentifyClass) but it was false. When calling datatable = table.DataTable(); I was creating a datatable inside the existing one, duplicate search area and paging :( I've tried to save all the "tables" after initialization inside an global array and search for it in order to add the new rows. Perhaps this is not the best solution but it worked for me.
I m using jquery datatables in many pages and its working good in every page and in a single page its not working properly, i mean when i use tab to go through datatable, it works fine for the first time and when i try to do the same for second time, if i try to focus on any thing in few seconds in data table, the focus disappears and the foucs starts from the starting of the page.
Here goes the code
function tableCall(){
var clientId = $('#clientId').val();
var versionCount = $('#versionCount').val();
var fromDate = $('#fromDate').val();
var toDate = $('#toDate').val();
$.ajax({
url: auditTrail.props.reporttableURL,
type: "POST",
dataType: "json",
data: {
clientId:clientId,
versionCount:versionCount,
fromDate:fromDate,
toDate:toDate
},
success: function (data) {
searchJSON = data.data;
var len=searchJSON.length;
if (len > 0){
$('.no-data, #warning-sign').hide();
createTable();
}else{
$('.no-data').hide();
$('#warning-sign').show();
}
}
});
}
function createTable() {
wwhs.setADAAttrDynamic($('#auditTable'));
if ($.fn.DataTable.isDataTable('#auditTable')) {
// table.destroy();
$("#auditTable tbody").empty();
}
table = $('#auditTable').dataTable({
"searching":false,
"destroy":true,
"autoWidth": false,
"ordering": true,
"destroy":true,
"stateSave": true,
"drawCallback": attachEvents,
"stateLoadParams": function (settings, data) {
return false;
},
data: searchJSON,
columns: [{
data: "reportName"
}, {
data: "reportStatus"
}, {
data: "timeStamp"
}, {
data: "requestedBy"
}],
"columnDefs": [{
"render": function (data, type, row) {
if(row.reportStatus.toUpperCase() == 'PROCESSED')
return '<a class="blue-text" " data-name="'+ row.reportName +'">' + row.reportName + '</a>';
else
return row.reportName;
},
"width": "50%",
"targets": 0
}, {
"width": "15%",
"targets": 1
}, {
"width": "20%",
"targets": 2
}, {
"width": "15%",
"targets": 3
}]
});
}
I think the problem is because the datatable instance is not destroyed.
Since datatables saves all the nodes into an object and renders it when ever it wants, emptying the tbody doesnt do anything. it just removes the elements in the page which can be re-drawn/re-rendered by datatable from its stored object.
You can check if the object is already initialized and the destroy it before re-initializing.
if(typeof table != "undefined")
table.destroy();
So the final code will look something like
function tableCall(){
var clientId = $('#clientId').val();
var versionCount = $('#versionCount').val();
var fromDate = $('#fromDate').val();
var toDate = $('#toDate').val();
$.ajax({
url: auditTrail.props.reporttableURL,
type: "POST",
dataType: "json",
data: {
clientId:clientId,
versionCount:versionCount,
fromDate:fromDate,
toDate:toDate
},
success: function (data) {
searchJSON = data.data;
var len=searchJSON.length;
if (len > 0){
$('.no-data, #warning-sign').hide();
createTable();
} else {
$('.no-data').hide();
$('#warning-sign').show();
}
}
});
}
function createTable() {
wwhs.setADAAttrDynamic($('#auditTable'));
if ($.fn.DataTable.isDataTable('#auditTable')) {
if(typeof table != "undefined")
table.destroy();
}
table = $('#auditTable').dataTable({
"searching":false,
"destroy":true,
"autoWidth": false,
"ordering": true,
"destroy":true,
"stateSave": true,
"drawCallback": attachEvents,
"stateLoadParams": function (settings, data) {
return false;
},
data: searchJSON,
columns: [{
data: "reportName"
}, {
data: "reportStatus"
}, {
data: "timeStamp"
}, {
data: "requestedBy"
}],
"columnDefs": [{
"render": function (data, type, row) {
if(row.reportStatus.toUpperCase() == 'PROCESSED')
return '<a class="blue-text" " data-name="'+ row.reportName +'">' + row.reportName + '</a>';
else
return row.reportName;
},
"width": "50%",
"targets": 0
}, {
"width": "15%",
"targets": 1
}, {
"width": "20%",
"targets": 2
}, {
"width": "15%",
"targets": 3
}]
});
}
I have a datatable and a collapsible sidebar. The table has table-layout:fixed and I defined all of the columns width in my css. The table looks perfect when the sidbar is collapsed, but if the sidebar is opened, the column and header is misaligned. When i open firebug, I see that dataTables_scrollHeadInner has width: 1558px; but dataTables_scrollBody has width: 1343px. I have no idea why the header isn't getting resized along with the body. All codes are below (the HTML is being generated dynamically and too big to paste here):
Javascript:
$(document).ready(function () {
var selector = "#artist_datatable";
var defaults = {
"language": {
"processing": "Processing...",
"lengthMenu": "Show _MENU_ entries",
"zeroRecords": "No matching records found",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "Showing 0 to 0 of 0 entries",
"sInfoFiltered": "(filtered from _MAX_ total entries)",
"infoPostFix": "",
"search": "Search",
"url": "",
"paginate": {
"first": "First",
"previous": "Previous",
"next": "Next",
"last": "Last"
}
}
};
var features = {
"autoWidth": false,
"deferRender": false,
"info": true,
"jQueryUI": false,
"lengthChange": true,
"ordering": true,
"paging": true,
"processing": true,
"scrollX": false,
"scrollY": false,
"searching": true,
"stateSave": false,
"delay": 0,
};
var options = {
"displayStart": 0,
"lengthMenu": [10, 25, 50, 100],
"orderClasses": true,
"order": [[0,"asc"]],
"orderMulti": true,
"pageLength": 50,
"pagingType": "full_numbers",
"scrollCollapse": false,
"searchDelay": 0,
"stateDuration": 7200,
"stripeClasses": [""],
"responsive": true,};
var ajax = {
"serverSide": false,
"data": [{ /*data for the table*/
};
setTimeout(function() {
var columns = {
"columns": [
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": false,
"searchable": false,
"title": "<input type='checkbox' name='multiselect_checkall' class='multiselect_checkall' />",
"visible": true,
"className": "row-select",
"width": "",
"data": null,
"render": function(data, type, row, meta) {
var checkbox = "<input type='checkbox' name='multiselect_checkbox' value='" + first + "' class='multiselect_checkbox' />";
var output = "";
var startHtml = "";
var endHtml = "";
var attributes = "";
attributes += 'name="multiselect_checkbox check" ';
attributes += 'class="multiselect_checkbox" ';
var first;
if (row.hasOwnProperty('id') && typeof('id') !== 'function') {
first = row['id'];
}
if ("" != attributes) {
var custom = "";
custom += startHtml;
custom += "<input type='checkbox' value='";
custom += first;
custom += "'";
custom += attributes;
custom += "/>"
custom += endHtml;
return custom;
}
output += startHtml;
output += checkbox;
output += endHtml;
return output;
},
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "Name",
"visible": true,
"className": "row-name",
"width": "",
"data": "name",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "Sex",
"visible": true,
"className": "row-sex",
"width": "",
"data": "sex",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "Prio",
"visible": true,
"className": "row-priority",
"width": "",
"data": "priority",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "Role",
"visible": true,
"className": "",
"width": "",
"data": "role",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "(D)",
"visible": true,
"className": "row-date",
"width": "",
"data": "bday",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "(M)",
"visible": true,
"className": "row-month",
"width": "",
"data": "bmonth",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "(Y)",
"visible": true,
"className": "row-year",
"width": "",
"data": "byear",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": true,
"searchable": true,
"title": "Works",
"visible": true,
"className": "",
"width": "",
"data": "works",
},
{
"contentPadding": "",
"defaultContent": "",
"name": "",
"orderable": false,
"searchable": false,
"title": "Actions",
"visible": true,
"className": "row-buttons",
"width": "",
"data": "",
"render": function(data, type, row, meta) {
var actionsString = "";
var routeParameters, attributes, visibleFlag, roleFlag;
routeParameters = new Array();
attributes = "";
visibleFlag = true;
roleFlag = true;
roleFlag = false;
roleFlag = true;
if (true == visibleFlag && true == roleFlag) {
routeParameters["id"] = row.id;
var route = Routing.generate("artist_show", routeParameters);
attributes += 'rel="tooltip" ';
attributes += 'title="Show" ';
attributes += 'class="btn btn-info btn-sm btn-icon icon-left" ';
attributes += 'role="button" ';
var url = "<a ";
url += 'href="' + route + '" ';
url += attributes;
url += ">";
url += '<i class="entypo-info"></i> Show';
url += "</a>";
actionsString += url;
}
routeParameters = new Array();
attributes = "";
visibleFlag = true;
roleFlag = true;
roleFlag = false;
roleFlag = true;
if (true == visibleFlag && true == roleFlag) {
routeParameters["id"] = row.id;
var route = Routing.generate("artist_edit", routeParameters);
attributes += 'rel="tooltip" ';
attributes += 'title="Edit" ';
attributes += 'class="btn btn-default btn-sm btn-icon icon-left" ';
attributes += 'role="button" ';
var url = "<a ";
url += 'href="' + route + '" ';
url += attributes;
url += 'onclick="' + "return confirm('Are you sure?')" + '" ';
url += ">";
url += '<i class="entypo-pencil"></i> Edit';
url += "</a>";
actionsString += url;
}
return actionsString;
},
},
]
};
$.extend(defaults, features);
$.extend(defaults, options);
$.extend(defaults, ajax);
$.extend(defaults, columns);
if ( $.fn.dataTable.isDataTable( selector ) ) {
} else {
var oTable = $(selector).DataTable(defaults);
}
var dt_wrapper = $("#artist_datatable" + "_wrapper");
dt_wrapper.find(".dataTables_scrollFootInner").append("\x0A");
dt_wrapper.find(".multiselect_checkall").click(function(event) {
var that = this;
dt_wrapper.find("input.multiselect_checkbox:checkbox").each(function() {
this.checked = that.checked;
});
});
dt_wrapper.find(".multiselect_action_click").on('click', function(event) {
var length = dt_wrapper.find("input.multiselect_checkbox:checkbox:checked").length;
event.preventDefault();
if (length > 0) {
if (!confirm( "Are you sure?" )) {
return;
}
$.ajax({
url: $(this).attr("href"),
type: "POST",
cache: false,
data: {
'data': $("input:checkbox:checked.multiselect_checkbox", oTable.rows().nodes()).serializeArray()
},
success: function(msg) {
oTable.draw();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest + ' ' + textStatus + ' ' +errorThrown);
}
})
} else {
alert("You need to select at least one element.");
}
});
}, features.delay);
});
CSS:
table.dataTable{table-layout: fixed !important}
.row-name[style]{width: 18% !important}
.row-select{width: 5% !important;}
.row-sex[style],.row-priority[style],.row-date[style],.row-month[style]
{width: 5% !important;}
.row-year[style]{width: 6% !important;}
.row-buttons{width: 13%}
.row-owner, .row-spe{width:5% !important;}
.row-status{width: 5.5%;}
.row-sequence[style],.row-cat[style]{width:4% !important;}
.row-uid[style]{width: 12% !important;}
FYI: This is a symfony app and I am using SgDatatablebundle (https://github.com/stwe/DatatablesBundle ) to generate the datatable. Thanks in advance. Screenshort is attached with the sidebar open so that you can understand my problem. Look at the checkboxes (if you are almost blind like me and have trouble finding the misalignment! :p )
i fixed it using this
$('.sidebar-toggle').click(function(){
$('.dataTables_scrollHeadInner').css('width','100%');
$('.table').css('width','100%');
setTimeout(function(){
datatable.columns.adjust().draw()}
,300);
});
set your timeout according to the time taken by sidebar to close and open