Ajax, jquery, PHP load data in iteration

AJAX/PHP related question, is there a way to list 5000 records at a time and than APPEND next 5000 records in HTML Table and so on until end of records using ajax - php



Load Script on click of a HTML Button: OR document.ready() and also show progress bar.

What I have tried:

// counter that allows you to get a new set of rows
var step = 0;
// set variable if you want to restrict the number of rows will be loaded
var maxStep = 0;//
// how many rows should be returned
var count = 5000;
// if the cancel button is pressed
var cancel = false;

$(function() {

    $('#load').click(function(){

        getData();
    })

    $('#cancel').click(function(){
        cancel = true;
    })
});

function getData()
{
    step++;

    //If cancel variable is set to true stop new calls
    if(cancel == true) return;
    // checks if the variable is set and limits how many rows to be fetched
    if(maxStep >0 and step >= maxStep) return;


    $.post('ajax.php'
        ,{
            'step':step,
            'count':count,
        }
        ,function(data, textStatus, jqXHR){   

		if(textStatus == "success")
                 foreach ($data as $row) {
          echo $row['username']." -- ID :" .$row['user_id']. " -- FirstName :" .$row['first_name']. "<br>\n";
		}
		if(textStatus == "error")
      alert("Error: " + jqXHR.status + ": " + jqXHR.statusText);
		       
	
             // when it finishes processing the data, call back function
             getData();

        }
        ,'json'
    )       
}

==== ajax.php  =====


step = 0;
if(isset($_POST['step'])) $step = (int)$_POST['step'];

$count = 0;
if(isset($_POST['count'])) $count = (int)$_POST['count'];



if($step>0 and $count>0)
{
    $offset = ($step-1) * $count;        
    $limit = $offset.','.$count;

    // --------------        
    // your code here
    // --------------
  
  $data = $DB->query("SELECT * FROM user_details LIMIT .$limit")->fetchAll();
    $result = mysql_query($sql);
    $arr_result = array();
  foreach ($data as $row) {
           $arr_result[] = $row;
        }
   
    $arr_result_enc = json_encode($arr_result);
    echo $arr_result_enc;

    // echo rows
    //echo json_encode($rows);        
}

Tags: HTML5, Ajax, PHP