Best way to hide a datatable (with dynamic footer) while formatting data and show it on initComplete

Lolo

Hello,

I have a "strange" behavior on a simple example.
You can download my test files from the following address: http://s000.tinyupload.com/?file_id=09364314042403533307

My aim is to hide the datatable in a div and showing a loading message while datatable is formatting (because I have normally a lot a data inside). When initComplete event is fired, I hide the loading message and show a hidden div that contain my datatable.

I have written 4 HTML files which help you to reproduce the behavior.

1./ The first one show you the problem I actually have => The first column is too large
2./ in the second one, I tried to remove the 100% in input styling => The datatable goes in responsive mode I don't know why (input fields width seem to be responsible)
3./ The third one is the same as second one but without the hidden div => Same problem as the second one
4./The fourth one is what I would like (but in this example the hidden div is in comment)

You can compare file content in order to see the small differences between each file.

I have created the associated jsfiddle but I don't know why the problem does not occur on it:
https://jsfiddle.net/yw2qgj20/

To sum up, the problem occurs when I try to hide into a div the datatable.

My question is the following, what is the best way to do what I want:
- Showing a loading message while the datatable is formatting
- When initComplete is fired, showing the datatable

I hope that I was as clear as possible and sorry for my poor english.

Thanks in advance and have a nice day.

Lolo

Hello,

I haven't found a solution for my problem.
But in fact, the problem is more simple to reproduce than I beleived.

I have written a new jsfiddle in order to reproduce it.
You can have a look here : https://jsfiddle.net/vwbmt1e5/

As you can see, the first column is larger than others.
Just resize the window and you will see that the first column will its normal width.

So if it is not a bug, my question is the following:
What is the correct way to hide a datatable which make a lot of time to initialize and show it when initialization is completed?

I hope you will be able to help me.
Thanks in advance and have a nice day.

ThomD

I'm just doing this kind of thing on my biggest page, so here it what I'm doing.

In the HTML I have 3 divs.

<div id="pleasewait" class="wait_content"><img src="/_layouts/images/GEARS_AN.gif" /><br>Please wait.</div>
<div id="fade" class="black_overlay"></div>
<div> id="mytable"> all my table stuff is here </div>

When the js loads, I run this

    document.getElementById('pleasewait').style.visibility='visible';
    document.getElementById('fade').style.visibility='visible';
    document.getElementById('demo').style.visibility='hidden';

at the end of InitComplete, I run this

        document.getElementById('pleasewait').style.visibility=hidden;
        document.getElementById('fade').style.visibility=hidden;        document.getElementById('demo').style.visibility='visible';

I have a little css to support this.

.black_overlay{
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.6;
    opacity:.60;
    filter: alpha(opacity=60);
}

.wait_content {
    display: block;
    position: absolute;
    top: 50px;
    left: 600px;
    width: 70px;
    height: 100px;
    padding: 16px;
    border: 10px solid #aad4ff;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

This all hides the div that I put the datatable into and shows a little "Loading" graphic. When InitComplete is done, the graphic goes away and the datatable appears.

I looked at your jsfiddle. When I change it to this method, the columns widths look good, but I don't see the "please wait" message.

https://jsfiddle.net/t62fcngy/

Lolo

Thanks for your answer ThomD,

I had a look to your solution and I have done a mix of mine and yours.

See the new jsfiddle: https://jsfiddle.net/vwbmt1e5/2/

As you can see, my problem seems to be due to display:none of the div tag (which encapsulate the datatable)
If I use visibility:hidden to the div tag, the problem does not occur.

Perhaps there is a bug in the formatting of the datatable when it is hidden.

Lolo

I finally found a alternate way to do my stuff.

I just call the following method to reformat my columns.

You can have a look to the new jsfiddle: https://jsfiddle.net/vwbmt1e5/3/

I hope it will help people like me that are not expert with datatables.