loading notification while table is made hidden when loading?

Hi,

thanks for your post, and sorry for the trouble.

The approach from that post basically hides the table until the JavaScript features have been applied. We know that this happened when the dataTables_wrapper element is available on the page (as a wrapper element around the table).
The tablepress-initially-hidden is used as a way to be able to choose for which tables this approach should be used. One could also simply use tablepress instead, to apply this to all TablePress tables on the site.

It might indeed be possible to extend this approach to show the table description while the JS features are being loaded, and to then hide it. For that, you could extend the approach from the post with this CSS:

.dataTables_wrapper + .tablepress-table-description-id-123 {
  display: none;
}

(Here the 123 would need to be changed to the table ID. The approach with an “Extra CSS class” is not possible for this.)
If you then put a text like “Please be patient while the table is being loaded.” into the table description, you might have a good workaround here.

Regards,
Tobias

Hi!

i tried some things with the code snippet you provided and manage to get a working table preloader spinner. i’m not good with html/css/js, so pardon me if there are unnecessary lines of code. (any optimized solutions welcomed.)

Aside from hiding the table while loading, some additional settings need to be done.
so sum up, this was what i did:

1) the table description must be placed below the table.

2) i placed this in the table description box:
<div class="tablepress-loader-space" style="width: 100%; margin-bottom: 5px;"><div class="tablepress-loader"></div></div>

the <div class="tablepress-loader-space" style="width: 100%; margin-bottom: 5px;"> is a literal space to contain the preloader html. the associated css style is to make a small gap between the preloader and whatever is under the tablepress table on the page before table is loaded.
<div class="tablepress-loader"></div> is my spinner placeholder styled using pure css. i modified the code from w3schools’ loaders examples.

3) i placed this in the extra css classes box:
tablepress-initially-hidden
this is from TablePress hide table while loading.

4) i placed this in the classic wp editor:
<div style="width: 90vw; margin: auto; margin-top: -40px;">[table id=1 responsive=scroll datatables_columnfilter="{sPlaceHolder:'head:after'}" /]</div>
the div is to make an almost full width space for the table (paired with custom table css to force stretch for tables that do not use the full page width). from the extension plugins, responsive=scroll to show nicer horizontal scrollbars for mobile page and datatables_columnfilter="{sPlaceHolder:'head:after'}" for making the searchboxes shown on the header rather than the footer, so setting last row as footer is optional.

5) i placed this in the plugin custom css box (i hope the code comments help make its easier to understand what’s what):

/* Full Width Tables */
.tablepress-id-1 {
	min-width: 100%;
	margin: 0 auto 1em;
}

/* Indicate Clickable ONLY for Body Rows */
.tablepress-id-1 tbody tr:hover {
	cursor: pointer;
}

/* Column Widths */
.tablepress-id-1 .column-1,
.tablepress-id-1 .column-2,
.tablepress-id-1 .column-3 {
	min-width: 25%;
}

/* Gap-less Table Name and below Table*/
.tablepress-table-name,
.dataTables_wrapper {
	margin-bottom: 0;
}

/* Disable General Search Box */
#tablepress-1_filter {
	display: none;
}

/* Table Preloader Code START */
.tablepress-initially-hidden,
.dataTables_wrapper + .tablepress-table-description .tablepress-loader-space,
.tablepress-scroll-wrapper + br {
	display: none;
}

.dataTables_wrapper .tablepress-initially-hidden {
	display: table;
}

/* Preloader CSS Start */
.tablepress-loader {
	border-radius: 50%;
	border-top: 25px solid deepskyblue;
	border-right: 25px solid lawngreen;
	border-bottom: 25px solid orange;
	border-left: 25px solid magenta;
	width: 120px;
	height: 120px;
	margin: auto;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {

	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}

}

@keyframes spin {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}

}

/* Preloader CSS End */
/* Table Preloader Code END */

there is a peculiar <br> tag somewhere in this code because it appeared when the table description is placed under the table and i got rid of it by making css style display:none;. remove it if the space as a result of the <br> tag is wanted.

And that’s how i got a working table spinner preloader for my site.

i’m open to any improvement suggestions as i know my codes are not optimized. ??

The example page for the preloader i’m using is here.

• This reply was modified 4 years ago by rlohmj.

Hi,

nice, looks good to me! ??

Best wishes,
Tobias