-1

I've recently changed my searching page to a searchable datatable page due to my employer's request for easier data management. The problem is that it is taking too long to load.

I'm wondering it there is a way to only load like a portion of the table and finish loading the page first. Then finish off loading the rest of the table after that, e.g. while the user actually attempt to search for the data.

This was requested because the user might want to navigate to other parts of the page instead of using the datatable.

Extra info : The page is in .php and the data is loaded using php do-while loop. Maybe we can do a workaround using php functions?

Miyazaki Ahmad
  • 139
  • 1
  • 3
  • 12
  • You could use an asynchronous script (pretty sure others are deprecated anyways) and load it in via AJAX. You could even load each item at a time and populate it as you get more data. – Brandon White Oct 04 '15 at 04:13
  • Create a new PHP file that actually returns all of the table data and then you can load it using an AJAX call. – blazerunner44 Oct 04 '15 at 04:14
  • @BrandonWhite & blazerunner I actually saw something about AJAX, I am trying to prevent using it since I don't know about AJAX. Any good websites to refer on how to use AJAX? Even just a website to start off. – Miyazaki Ahmad Oct 04 '15 at 04:24
  • @wsssixteen Check my answer below. That should be a good start. AJAX is highly used in modern web applications, and I would definitely recommend becoming more familiar and reading documentations/looking at SO examples when possible. jQuery is a good library to get you started as well. – Brandon White Oct 04 '15 at 04:27
  • @BrandonWhite Thanks. Am a bit familiar with jQuery fortunately. – Miyazaki Ahmad Oct 04 '15 at 04:35

1 Answers1

0

Using the AJAX method recommended in the comments, the following is similar to how you could handle the page-load. You would need the jQuery library for the below.

Initial page

<script type="text/javascript">

// when the page is done loading,
// let's send a call to load more data
$(document).ready(function(){
    myFunction();
});

// function to handle AJAX request to gather data
function myFunction(){
    $.ajax({
        type: "POST",
        url: "./linkToMyPHP.php?loadData=1",
        success: function(data){
            // handle the data using the "data" variable
        }
    });
}
</script>

AJAX Page

<?php

if(isset($_GET["loadData"])){

    // call query here and echo information

}

It may be recommended, to actually use a PHP function called json_encode() to echo back the information from your AJAX page in JSON form. This would allow you to transmit an array of information, instead of raw data. You would then need to update your AJAX request function similar to below.

$.ajax({
    type: "POST",
    url: "./linkToMyPHP.php?loadData=1",

    dataType: "json",

    success: function(data){
        $("#myDivToChange").html(data);
    }
});

You can read up on JSON at this highly rated question.

Community
  • 1
  • 1
Brandon White
  • 997
  • 9
  • 22
  • `if(isset($_GET["loadData"])){` you sure about that? – DirtyBit Oct 04 '15 at 06:21
  • Yes? Technically you can change the type of ajax request to GET instead of POST. This being because you are not sending any other data. But the request is still there. Check the AJAX url. – Brandon White Oct 04 '15 at 12:53