jquery data table headers not expanding or expanding slow in some scenarios, like reloading

Question

Data tables loads header after the body loads, its visible to user. First body loads and in few seconds header is expanding. In some cases when reload the page headers are not expanding.

This is the preloaded data table. Using defer loading here.

 <div id="dataTableWrapper" style="display:none;">
   <table id="result" width="100%"  class="table  cell-border" cellspacing="0" cellpadding="0" border="0"  >
      <thead>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
         </tr>
      </thead>
      <tbody id="searchResultsDiv">
         <c:forEach items="${list}" var="info" varStatus="tIndex">
            <tr>
               <td >${tIndex.index + 1}</td>
               <td >${info.typeDesc}</td>
               <td >${info.time}-</td>
               <td >${info.id}</td>
               <td >${info.number}</td>
               <td >${info.name}</td>
               <td >${info.description}</td>
               <td  >${info.boDescription}</td>
               <td  >${info.userId}</td>
            </tr>
         </c:forEach>
      </tbody>
   </table>
</div>

This is how I intialize the data table.

$(document).ready(function() {

    $('#result').DataTable({

        serverSide: true,

        processing: false,

        searching: false,

        lengthChange: false,

        loading: false,

        deferLoading: $("#totalRecordsCount").val(),

        order: [
            [1, "desc"]
        ],

        ajax: {

            type: "POST",

            contentType: "application/x-www-form-urlencoded; charset=windows-1256",

            url: $("#context").val() + "/Controller?actionParam=getResultForPagination",

            data: buildSearchData,

            dataSrc: function(json) {

                return json.data;

            }

        },

        //stateSave:false,

        scrollY: "735px",

        scrollCollapse: true,

        fixedHeader: true,

        paging: true,

        pageLength: $("#pageSize").val(),



        initComplete: function() {

            var api = this.api();

            $('#dataTableWrapper').show();

            api.columns.adjust();

        },

        //single page? do not display pagination

        fnDrawCallback: function(oSettings) {

            if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {

                $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();

                $(oSettings.nTableWrapper).find('.dataTables_info').hide();

            } else {

                $(oSettings.nTableWrapper).find('.dataTables_paginate').show();

                $(oSettings.nTableWrapper).find('.dataTables_info').show();

            }

        },

        //processing :true,

        language: dataTable_lang_values

    });

})

This is how the data table appears most of the times and its perfect.

But on sometimes when we keep reloading the page it appears like this.

A [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) would've been perfect — Alexandre Elshobokshy, Aug 30 '21 at 09:50

score 0 · Answer 1 · answered Aug 30 '21 at 09:47

0

Calling the datatables draw and adjust functions after the table finishes setting up will fix the header and any other column not aligning correctly

$('#result').DataTable({...}); 
$('#result').DataTable().draw(); 
$('#result').DataTable().columns.adjust()

answered Aug 30 '21 at 09:47

Alexandre Elshobokshy

10,720
6
27
57

Didn't helped this solution. – user630209 Aug 30 '21 at 11:37
@user630209 that's how I'm doing it personally :) Try reproducing your problem in a fiddle and I'll gladly take a look – Alexandre Elshobokshy Aug 30 '21 at 11:40

score 0 · Answer 2 · answered Aug 30 '21 at 09:53

0

For example, Your table id = result

       $('#result').wrap("<div style='overflow-y: auto; clear:both;'></div>");

(note: remove scroll attributes in data table)

answered Aug 30 '21 at 09:53

vasanth kumar

21
5

scroll is required – user630209 Aug 30 '21 at 11:15
by adding this code auto scroll will come ($('#result').wrap("
");) – vasanth kumar Aug 30 '21 at 12:02

score 0 · Answer 3 · answered Aug 31 '21 at 18:52

I'm not entirely sure, however DataTables works a lot better when you add in the columns option, and fill in some details about each column. That way it knows what data is incoming, and how to correlate it to the header row. I had this same problem, and was able to fix it in my script like this:

                columns: [
                    {
                        data: "ID",
                        visible: false,
                    },
                    {
                        data: "ITEM",
                        edit: true,
                        sort: true,
                    },
                    {
                        data: "DESC_1"
                    },
                    {
                        data: "UPC"
                    },
                    {
                        data: "Status",
                    },
                ],

Maybe adding the column variables will help you too?

score 0 · Answer 4 · answered Sep 04 '21 at 05:24

0

if the columns' widths are always the same, you can fix this with simple good-old html, adding a colgroup and definining each column width like this:

<colgroup><col width="200px"/><col width="150px"/>... </colgroup>

The above line should be the next one after:

<table id="result" width="100%"...

answered Sep 04 '21 at 05:24

Sergio

658
1
9
22

how is it different from adding – user630209 Sep 05 '21 at 05:26
It's different because it prevents headaches. It overrides any other "width" definition, so it's a lot easier to implement. Also you have the ability to leave any column width-free so it's rendered automatically depending on the data contained in their cells. – Sergio Sep 06 '21 at 18:49

score 0 · Answer 5 · answered Jan 10 '23 at 17:14

Draw function should be called after adjust:

var api = this.api();
api.columns.adjust().draw();

Other way of implementation would be to use the datatable object:

               "initComplete": function(settings, json) {
                  setInterval(function() {
                    <datatable object>.columns.adjust().draw();
                  }, 1500);
               }

I just used setInterval to call the columns adjust draw after 1500 milliseconds but it's not necessary.

jquery data table headers not expanding or expanding slow in some scenarios, like reloading

5 Answers5