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

user_630209 0
Viewed 352

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.

correct

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

datatables datatable jquery
4 Answers

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()
user_99424180

For example, Your table id = result

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

(note: remove scroll attributes in data table)

user_122239470

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?

user_67756410

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%"...
user_29061570
Related