We Keep Coding

datatables fixed column not aligning in bootstrap modal

I am working with js datatables. I have a table in modal and I am trying to make make left most column fixed. Below is my script for datatables.
$('#table1').DataTable({
"dom": 'Bfrtip',
"bPaginate": false,
"bLengthChange": false,
"bInfo": false,
"bFilter": false,
"buttons": [{
extend: 'excelHtml5',
title: 'Excel1',
sheetName: 'Sheet1'
}],
scrollY: 300,
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true
"ordering": false
});
Everything working fine except fixed columns. I have included fixed column css and Js.
The actual problem is, the table gets shrinks when I apply fixed columns.

Give this a try:
$('#modal_ID').on('shown.bs.modal', function (e) {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();});

you must have explicitly ' style="width:100%" in table attibute (not in css)

Datatable Fixed Column (Right Only) Issue

I'm using JQuery Datatable and I ran into a problem when I used fixed column.
It has been showing two times my fixed column
I'm using serverside processing and that's my code:
dataTable = table.dataTable({
fixedColumns: {
leftColumns: 0,
rightColumns: 1
},
scrollX:true,
scrollCollapse: true,
"fnDrawCallback":function(oSettings) {
$('div.choosePage select').val(dataTable.DataTable().page());
},
"pagingType":"bootstrap_full_number",
"processing": true,
"serverSide": true,
"ajax": {
"data":GETDATA,
"dataSrc":SETAJAXDATA
},
"fnInitComplete":completeProcess,
"colReorder": true,
"order": [
[0, 'asc']
],
"dom": "<'row' <'col-md-12'>><'row'<'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-4 col-sm-12'i><'col-md-5 col-sm-12 toolbar'p><'col-md-push-1 col-md-3 col-sm-12 toolbar choosePage'>>", // horizobtal scrollable datatable
})
Ajax is working good and there is no problem when I used fixed column on left side,but when I used it on right side i'm running into this problem.
Thanks.

I believe it is a bug in Jquery Datatable if you haven't setup scrollY from the options, make sure you set some value.
Because when you inspect the element you can see scroll-y overflow is auto. If you set it as hidden or not setup a value from the options, there you go, you see the space at the right side.
Incase you do not want to use scroll-y at all, then you need to make your hands dirty with some css code by giving some minor margin which is an ugly solution. But I cannot see any other option for you.
It's a shame for Jquery datatable plugin.
Below shows an example option list from the plugin website.
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 0,
rightColumns: 1
}
} );
} );

Jquery datatable creating extra header on chrome browser when using scrollX property

('#instant-quotes').DataTable({
"data": dataSet,
"scrollY": yscroll,
/*"initComplete": function(settings, json) {
$('#instant-quotes thead tr:first').remove();
},*/
"dom": "lfrti",
"scrollCollapse": false,
"bSortCellsTop": false,
"info": false,
"processing": true,
"bLengthChange": false,
"searching": false,
"pageLength": 7,
"order": [ 0, "desc" ]...
})
When i use the datatable with the scrollX property it always append a blank <thead> with a <tr>.I dont why this occurs but its always doing this,however i removed by using jquery
$('#instant-quotes thead tr:first').remove()
But i dont think so its a good solution because when i sort or redraw the table then this blank <thead> again appears, also when i change the layout (coz its responsive) then it appears again,
Kindly suggest a better and optimal solution.

Ajax request for server side data for each page in Datatables

I am using Jquery Datatables to load an array of array of data (aaData) obtained via ajax call from server side. I don't want to pull whole of the data at once rather I need to make ajax request for loading data every time user clicks "prev" or "next" in Datatables pagination.
How can this be achieved ?I want to make an ajax call and fetch results on the fly for that page only.
Below is the javascript code where in I am making a call.
$.ajax({
type: "GET",
url: "ajaxBacklog",
contentType: 'application/json',
data: null,
dataType: 'json',
success: function(json){
oTable = $("#backlogTable").dataTable({
"aaData": json.aaData,
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bRetrieve": true,
"bPaginate": true,
"bStateSave": true,
"bSort": true,
"aaSorting": [[ 4, "desc" ]],
"iDisplayLength": 25,
"oLanguage": {
"sProcessing": "<img src='resources/images/loader.gif'/>",
"sEmptyTable": "No records found."
},
"aoColumns": [
{ "sClass": "alignCenter"},
{ "sClass": "left"},
{ "sClass": "left"},
{ "sClass": "left"},
{ "sType": 'date-uk', "sClass":"datecolumn"},
{ "sType": 'date-uk', "sClass":"datecolumn"},
{ "sClass": "left"},
{ "sClass": "left"}
],
"error": function() {
alert("Failed to load Data");
}
});
}
}
);
I have also followed the server side processing of datatables as well but nothing is working.

In datatables server-side processing every click on 'prev'/'next' button (also filter, sorting etc) call request (out of the box) to function specified in sAjaxSource property - you can check this call in your browser console.
Call have lot of usefull parameters. You need to use iDisplayLength and iDisplayStart in your function for cut (after sort and filter) your set of data from iDisplayStart to iDisplayStart+iDisplayLength.
You should of course change your code structure as you can see in datatables documentation - define datatables initialization code and indicate ajax source in sAjaxSource property.

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