rlohmj

@themifyme

Thank you for the heads-up.

I shall await the next update eagerly. 🙂

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 5 years, 1 month ago by rlohmj.