How can I hide the datatable column headers during the load of the datatable.

dsand

How can I hide the datatable column headers during the load of the datatable. It looks bad as it takes some time to load. I tried using the modal to hide it but it still displays. I tried positioning the modal to the left but the headers still display and modal displays below it. Here's my code:

<table id="myTable" class="display compact border-dark">
    <thead class="border-primary">
        <tr>
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.List[0].Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.List[0].Description)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.List[0].Date)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.List[0].Type)
            </th>
            
        </tr>
    </thead>


<div id="loadModal" class="modal-body" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
           <!-- <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
            </div>  -->
            <div class="modal-body">
                <div class="spinner-border text-success" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
    </div>
</div>

        $(document).ready(function () {
           
            $.ajax({
                type: "Get",
                url: "/SearchResults?handler=Json",
                dataType: "json",
                success: OnSuccess,
                beforeSend: function () {
                    console.log('before send')
                    $('#loadModal').show();
                },
                complete: function () {
                    console.log('complete send')
                    $('#loadModal').hide();
                }
                
            });
           

        });

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

dsand

sorry did not format the code properly when posting it

kthorngren

One option is to use style="display:none" on the -table or the div containing the table. Use initComplete to show the hidden element. After showing the table you will need to use columns.adjust(). This is one way to do this:
http://live.datatables.net/mixozala/15/edit

Kevin

dsand

Kevin, it is still not working. It hides the columns but does not display them back. Is there a way i can edit my question and post the code?

kthorngren

It hides the columns but does not display them back.

Please provide a link to your page or a test case replicating the issue so we can help debug.

Is there a way i can edit my question and post the code?

I think there is a time limit to edit posts. I reformatted your code but if you want to provide more just add another post.

Kevin

dsand

I added another post with my complete code. Thank so much for your help.

kthorngren

Sorry I meant for you to post your code in this thread. Having multiple threads with the same question is confusing. The code is posted in this thread.

Since you have scrolling features hiding the table won't work. You will need to create a div to place the table in and hide the table. Use this example instead:
http://live.datatables.net/mixozala/17/edit

I added style="display:none;" to the div containing the table.

Kevin

dsand

Kevin, It is hiding the data fine but when it is displaying them back the columns are shifted to the left. The id field header is on the details control field which is my first column. The id column is my second column as I have the details control in my first. However, when I hit the next page, the headers move back to the right position. Maybe because the columns adjust is not taking into account the first column? Appreciate your help.

kthorngren

You didn't post your Datatables config so not sure but if you are using a feature like FixedHeaders you might need to use /fixedHeader.adjust(). Or maybe you enabled another feature that requires column adjustment. Please post your datatables config if you still need help.

Kevin

dsand

Thank you so much Kevin. That worked. I appreciate all your help with this.