[Mr.Anonymous]

I have a MySQL table with 6000+ rows and 4 columns. When the user lands on the page, the website loads around 500 rows of data (plus 4 columns). I also have a button where if the user clicks it, it loads the remaining 5500 rows of data. Now this takes a huge time. Is there any way to load the remaining rows in background and when the user clicks on the button, the results are displayed instantly? I don’t want to implement the load more on scroll method because of certain issues.

[Sew_Sumi]

You're not pushing the button fast enough.

[Mr.Anonymous]

Quote:

Originally Posted by Sew_Sumi You're not pushing the button fast enough.

No I mean is there a way to preload the data from the table but only show them when the button is clicked?

[harsimarriar96]

You can use AJAX (Asynchronous javascript and XML) to accomplish what you want.

and use javascript to show only certain amount of results in the first place and hide the others.

[iLearner]

Why would you load all those rows at once anyway my man, what I do is load a few rows with pagination, every time a user requests a page the respective rows are loaded.

Additionally you could offer a search feature

[CoaPsyFactor]

Here is js code, you put this in your main js, or inside <script> tags on index (main) file.
Just replace "PUT_YOUR_URL_HERE" with your url

After request is finished successfully your data will be stored in "window.API_DATA"

NOTE: API Must return proper JSON format
NOTE: ES6 is supported on most current generation browsers, you can checkout compatibility table here

PHP код:

'use strict'
const API_ENDPOINT = 'PUT_YOUR_URL_HERE';
(() => {
    const STATUS = {
        OK: 200
    };
    const ERROR = {
        NONE: 'NONE',
        PARSE: 'INVALID_JSON',
        STATUS: 'INVALID_STATUS_CODE'
    };
    const loadData = (url, data = {}) => {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            // Using traditional function definition
            // to prevent invalid context (this)
            xhr.onreadystatechange = function () {
                if (XMLHttpRequest.DONE !== this.readyState) {
                    // Not resolving nor rejecting as we need this promise to be done when request is
                    return;
                }
                if (STATUS.OK !== this.status) {
                    // In case that status code is not 200 (OK) we assume something went wrong
                    return reject({ error: ERROR.STATUS, url });
                }
                let data;
                try {
                    data = JSON.parse(this.responseText);
                } catch (error) {
                    // In case that server response was not valid json
                    // we reject this promise with proper error
                    return reject({ error: ERROR.PARSE, response: this.responseText, url });
                }
                return resolve({ error: ERROR.NONE, data });
            };
            xhr.open('GET', url, true);
            xhr.send();
        });
    };
    window.onload = () => {
        loadData(API_ENDPOINT)
            .then((data) => { window.API_DATA = data; })
            .catch((error) => { console.error(error); });
    };
})(); 


[harsimarriar96]

Quote:

Originally Posted by CoaPsyFactor Here is js code, you put this in your main js, or inside <script> tags on index (main) file. Just replace "PUT_YOUR_URL_HERE" with your url After request is finished successfully your data will be stored in "window.API_DATA" NOTE: API Must return proper JSON format NOTE: ES6 is supported on most current generation browsers, you can checkout compatibility table here PHP код: 'use strict' const API_ENDPOINT = 'PUT_YOUR_URL_HERE'; (() => {     const STATUS = {         OK: 200     };     const ERROR = {         NONE: 'NONE',         PARSE: 'INVALID_JSON',         STATUS: 'INVALID_STATUS_CODE'     };     const loadData = (url, data = {}) => {         return new Promise((resolve, reject) => {             const xhr = new XMLHttpRequest();             // Using traditional function definition             // to prevent invalid context (this)             xhr.onreadystatechange = function () {                 if (XMLHttpRequest.DONE !== this.readyState) {                     // Not resolving nor rejecting as we need this promise to be done when request is                     return;                 }                 if (STATUS.OK !== this.status) {                     // In case that status code is not 200 (OK) we assume something went wrong                     return reject({ error: ERROR.STATUS, url });                 }                 let data;                 try {                     data = JSON.parse(this.responseText);                 } catch (error) {                     // In case that server response was not valid json                     // we reject this promise with proper error                     return reject({ error: ERROR.PARSE, response: this.responseText, url });                 }                 return resolve({ error: ERROR.NONE, data });             };             xhr.open('GET', url, true);             xhr.send();         });     };     window.onload = () => {         loadData(API_ENDPOINT)             .then((data) => { window.API_DATA = data; })             .catch((error) => { console.error(error); });     }; })();

ES6 can be transpiled using Babel

[CoaPsyFactor]

Quote:

Originally Posted by harsimarriar96 ES6 can be transpiled using Babel

Yup, I know, but then arrow functions and their context are gone (compiled to traditional), let variables are also changing their scope.... in other words, if you don't plan on supporting browers that does nit implement new ES, Avoid using any transpiler....

[Mr.Anonymous]

Quote:

Originally Posted by CoaPsyFactor Here is js code, you put this in your main js, or inside <script> tags on index (main) file. Just replace "PUT_YOUR_URL_HERE" with your url After request is finished successfully your data will be stored in "window.API_DATA" NOTE: API Must return proper JSON format NOTE: ES6 is supported on most current generation browsers, you can checkout compatibility table here PHP код: code...

Wow thanks a lot for that function. I really appreciate it

[CoaPsyFactor]

Quote:

Originally Posted by Mr.Anonymous Wow thanks a lot for that function. I really appreciate it

Don't mention it
Hope it will help.