Question

I am sorry, this might be a very basic question, but I teach myself from the web, and dont know who else to ask.

I want to know if there is a way to execute a php/mysql query to a remote server and then return the result to the client machine. I plan to use the result of the query (2D) to be accessed by the user and another queries to be executed. It has to be accessed by the javascript script with ajax call or in a better way

I want to do this cos I want to “speed up” the site, and limit the time the user looses while the query is executed.

Example: The user wants to see some data for a all employees of a company X. Php selects all employees of company X and “sends back” the result to the machine, where it is stored. Later the user can filter only employees who are male, or have a car, or a male and have a car

EDIT:
As I get it, this will show the whole query as a table on the page, and them will filter based on user input.

I use a similar solution, showing the table columns I need to show and adding the other as custom div values inside the div that presents the data.

<div class="card selected" id="26912" name="Afflicted Deserter" cost="3R" dualface="Werewolf Ransacker" exp="DKA" type="Creature - Human Werewolf">Afflicted Deserter || Werewolf Ransacker</div>

I use onclick event to select the div and store div values as variables.

  SelectCard = function  (card) {
    $('body').data({"currentID":$(card).attr('id'), "currentNAME":$(card).attr('name'), "currentCOST":$(card).attr('cost'), "currentTYPE":$(card).attr('type'), "currentEXP":$(card).attr('exp')})
    $('#cardIMG').attr('src',"mtg-img/" + $(card).attr('exp') + "/" + $(card).attr('name') + ".full.jpg");
  }

I apply hidden to all entries I dont want to use. I also use code select next/previous div on arrow up/down.

MoveArrows = function  () {

$(document).keydown(function(e){

      if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('div.card').length) {
          // testvalue = $('div.card').next(".hidden").index();
          // console.log("testvalue:", testvalue)
            chosen++; 
        }
        $('div.card').removeClass('selected');
        while ($('#' + parentDiv).find('div.card').eq(chosen).hasClass('hidden')){
          chosen++;
        }
        $('#' + parentDiv).find('div.card').eq(chosen).addClass('selected');
        SelectCard( $('#' + parentDiv).find('div.card').eq(chosen))
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        $('div.card').removeClass('selected');
        while ($('#' + parentDiv).find('div.card').eq(chosen).hasClass('hidden')){
          chosen--;
        }
        $('#' + parentDiv).find('div.card').eq(chosen).addClass('selected');
        SelectCard( $('#' + parentDiv).find('div.card').eq(chosen))
        return false;
    }
})
}

While cycle is executed to find the next non-hidden div.

My problem is, that when there are too many entries, up/down clicks takes a while to select next div.

How does datatables handle filtered results?

Answer 1

An option for client side processing in javascript is the excellent datatables jQuery plugin. This would achieve your goal of removing additional server calls to sort or filter the original query.

If you want the data to persist between sessions, you may want to consider HTML5 Web Storage