Datatable doesnt load properly for the first time

anibha88

Hi All,
I am stuck in some strange error with loading my table data with the datatable for the first time. I have a rails application rendering tabular data in the dashboard which will appear soon after the user logs in. But this doesnt load for the first time and it gives the below message in the console.
Error messages shown:
DataTables warning: table id=company-projects-table - FixedColumns is not needed (no x-scrolling in DataTables enabled), so no action will be taken. Use 'FixedHeader' for column fixing when scrolling is not enabled
Description of problem:
I get the above warning message the first time when I try to load datatables and the table fails to load. Then after refresh the table loads properly.
I have the scroll enabled and I need the first three columns to be fixed which I am achieving by FixedColumns and everything is working well except the load error for the first time. Below is the code snippet. Please help
`
TableListInitializer.initialize = function(){
this = this;
if($.fn.dataTable.isDataTable( 'table#company-projects-table' )){
$('.loading-screen').removeClass('hidden');
oTable = $('table#company-projects-table').DataTable();
oTable.draw();
}else{
oTable = $('table#company-projects-table').DataTable({
"bServerSide": true,
"bProcessing": true,
"bLengthChange": false,
"bAutoWidth":false,
"scrollY": 400,
"scrollX": true,
"scrollCollapse": true,
"language": {
"info": "",
"infoFiltered": "_MAX total records"
},
"dom": '<Blf<t>ip>',
"buttons": [
{
"extend": 'colvis',
"columns": ':not(:first-child):not(.check-project)',
"className": 'btn-sm btn-outline margin-top-10',
"text": I18n.t('company_project.view.index.toogle_hide_columns')
}
],
"aaSorting": $('table#company-projects-table').data('initial-sort'),
"ajax":{
"url": $('table#company-projects-table').data('table-url'),
"data": function (d) {
$('.loading-screen').removeClass('hidden')
d.columns.forEach(function(item){
delete item['name'];
delete item['search'];
});
d.modify_record_in_freeze_mode_links_visible = $('#company-projects-table').data('can-modify-in-freeze');
d.user_options = {
"home_groups": $('#group-filter').val(),
"group_or_and": $('input[name="group_or_and"]:checked').val(),
"project_managers": $('#users_filter').val()
};
var dt_params = $('table#company-projects-table').data('dt_params');
if(dt_params){ $.extend(d.user_options, dt_params); }
$('table#company-projects-table').data('dt_params', null);
}
},
"initComplete": function(settings, json) {
_this.handleSaveVisibleColumns();
_this.bindSearchOnEnter();
_this.setBackgroundColor();
},
"iDisplayLength": 36,
"columns": _this.datatableColumns(),
"columnDefs": [
{
"targets": ["project-description"],
"data": 'description',
"render": function ( data, type, full, meta ) {
if (!data) return '-';
text = '

' + data + '

';
if (data.length > 56) text = text + '<i data-toggle="popover" data-placement="right" data-trigger="hover" data-content="' + data + '" class="fa fa-arrow-circle-right"</i>';
return text;
}
},
{
"targets": ["project-status"],
"data": 'status',
"bSortable": false,
"searchable": false,
"render": function ( data, type, full, meta ) {
if (!data) return '-';
return '

' + '

';
}
},
{
"targets": ["project-progress"],
"data": 'progress',
"render": function ( data, type, full, meta ) {
if (!data) return '0%';
return '

' + data + '%

';
}
},
{
"targets": ["color-cell"],
"data": 'color',
"bSortable": false,
"searchable": false,
"render": function ( data, type, full, meta ) {
return '<span class="project-color"style="background-color: '+ data + '"; ></span>';
}
},
{
"targets": ["check-project"],
"data": 'check_project',
"searchable": false,
"orderable": false,
"render": function ( data, type, full, meta ) {
return '<input class="company-project-checkbox" id="projects_ids_" name="projects_ids[]" type="checkbox"\
value="'+ data +'">';
}
},
{
"targets": ["project-name"],
"data": 'name',
"render": function ( data, type, full, meta ) {
return '<a href="#" data-target="#company-project-'+ data.id +'"\
data-toggle="modal">'+ data.name +'</a>';
}
},
{
"targets": ["project-actions"],
"data": 'actions',
"orderable": false,
"render": function ( data, type, full, meta ) {
var treeNodeLink, requestObjectLink = "";
if(data.node_id){
treeNodeLink = '<a href="/portfolio/en/company_projects/tree_nodes/'+data.node_id+'/node_projects/'+data.id+'"\
class="btn btn-icon btn-outline btn-default btn-sm" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="'+ I18n.t('generic.view.view') + '"><i class="icon wb-file"></i></a>';
};

            if(data.request_object_id){
              requestObjectLink = '<a href="/portfolio/en/project_request/project_request_objects/'+data.request_object_id+'"\
                class="btn btn-icon btn-default btn-outline btn-sm" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="'+ I18n.t('generic.view.project_request') + '"><i class="icon wb-file"></i></a>'
            };

            return '<a href="/portfolio/en/company_projects/'+ data.id +'"\
              class="btn btn-icon btn-danger btn-sm" data-confirm="'+
                I18n.t("company_project.view.index.delete_warning", {project_name: data.name, count: data.imported_instances_size} ) +'"\
              data-method="delete" rel="nofollow" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="'+ I18n.t('generic.view.delete') + '"><i class="icon wb-trash"></i></a>'+
              '<a href="/portfolio/en/company_projects/'+data.id+'/edit"\
              class="btn btn-icon btn-default btn-outline btn-sm" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="'+ I18n.t('generic.view.edit') + '"><i class="icon wb-pencil"></i></a>' +
              treeNodeLink +
              '<a href="/portfolio/en/company_projects/'+data.id+'/archive"\
              class="btn btn-icon btn-default btn-outline btn-sm" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="'+ I18n.t('generic.view.archive') + '"><i class="fa fa-archive"></i></a>' +
              requestObjectLink;
          }
        }
      ],
      "drawCallback": function( settings, json ){
        $('.company-projects-list > form').removeClass('hidden');
        $('.loading-screen').addClass('hidden');
        $('.group-filter-submit').prop('disabled', false);
        TableListInitializer.showPopoverForDescriptions();
      }
    });

    this.showSelectedColumns();
  };
  $('.dataTables_paginate .paginate_button > a').unbind('click');
  $('.dataTables_paginate').on('click', '.paginate_button > a', function(){
    $('.loading-screen').removeClass('hidden')
  });
};

$(window).load(function() {
var table = $('table#company-projects-table').DataTable();
new $.fn.dataTable.FixedColumns( table, {
"leftColumns": 3
});
});
`
Any help to resolve this would be highly appreciated. Thanks in advance!

kthorngren

My guess is the new $.fn.dataTable.FixedColumns( ) constructor is being executed too early. Instead of using the constructor try enabling FixedColumns using the fixedColumns option like this example

Kevin

anibha88

@kthorngren thanks a lot for your suggestion. In my case though fixedColumns: { leftColumns: 2 } didn't work inside the DataTable, I just copy-pasted those lines after the table variable and now it works well.

kthorngren

If you copied and pasted just this:

        fixedColumns:   {
            leftColumns: 2
        }   // Need comma here

Then you probably are getting a syntax error because you need a comma to separate the options. Glad its working now.

Kevin