List navigator is the most important and convenient tool for showing the data list view. This will help if there are hundreds or even thousands of data to be display in list. The list navigator helps the users to easily navigate the list rows page by page and also can go to the specific page they want to go. Also, user can customize the number of data to be displayed per page which is very convenient for their laptop, PC, or tablet display.

This tutorial will direct you to create your own data list navigator without refreshing page using Ajax List Navigator.  This will also requires you to understand each part of the scripts to fully implement to your page. Once you understood, you will be able to use this function in every page your wish to have the data list navigator. Please follow the instruction carefully.

INSTRUCTION

There are 4 files here: js script file (function.js), PHP file (getData.php), PHP file (datalist.php), and PHP file (list.php).

JS File (functions.js)

function startListLoadProcess(){
var listWidth = $("#right_dataContent").width(), listHeight=$("#right_dataContent").height();
$("#listLoadProcess").width(listWidth);
$("#listLoadProcess").height(listHeight);
$("#listLoadProcess").fadeIn(100);
}
function endListLoadProcess(){
$("#listLoadProcess").fadeOut(100);
}
function listNavigator(request,functionName){
var pageNum=$("#pageNum").val();
if(request=='first'){
$("#pageNum").val(1);
}else if(request=='previous'){
$("#pageNum").val(parseInt(pageNum)-1);
}else if(request=='next'){
if(parseInt(pageNum)!==parseInt($('#pageNum option:last').val())){$("#pageNum").val(parseInt(pageNum)+1);}
}else if(request=='last'){
$("#pageNum").val($('#pageNum option:last').val());
}
var pageNum=$("#pageNum").val();
if(pageNum==1){$("#navFirst").prop('disabled', true);$("#navPrev").prop('disabled', true);}else{$("#navFirst").prop('disabled', false);$("#navPrev").prop('disabled', false);}
if(pageNum==$('#pageNum option:last').val()){$("#navLast").prop('disabled', true);$("#navNext").prop('disabled', true);}else{$("#navLast").prop('disabled', false);$("#navNext").prop('disabled', false);}
window[functionName](0);
}

Function.js contains the list navigation functions for the navigating buttons in the data list navigation and are used in the Ajax data request in list.php.

PHP File (getData.php)

//---- START List Navigator
$allFilteredSQL="SELECT * FROM tblAsset ORDER BY id DESC";
$notif_qry = exec_query_utf8($allFilteredSQL);		
$pageNum = post("page");if($pageNum==''){$pageNum=1;}
$rowPerpage = post("numPerPage");
$totalRow = mysqli_num_rows($notif_qry);
$totalPages = $totalRow/$rowPerpage;
if($totalRow%$rowPerpage>0){$totalPages = intval($totalPages) + 1;}
$firstLoading=post("firstLoading");$resetNavList=post("resetNavList");
if($firstLoading=='true' or $resetNavList==1){$pageNum=1;
echo '<script type="text/javascript">
$("#navFirst").prop("disabled", true);$("#navPrev").prop("disabled", true);
$("#navNext").prop("disabled", false);$("#navLast").prop("disabled", false);
$("#pageNum").empty();
for(var i=1;i<='.$totalPages.';i++){
$("#pageNum").append('<option value="'+i+'">'+i+'</option>');
}
</script>';}
if($totalRow==0){echo '<script type="text/javascript">$("#listNavigator").css("display","none");</script>';}else{echo '<script type="text/javascript">$("#listNavigator").css("display","block");</script>';}
//---- END List Navigator
echo '<table><thead><tr><td>Column Name</td</tr></thead><tbody>';		
$visibleFilteredSQL="SELECT * FROM tblAsset ORDER BY id DESC LIMIT ".(($pageNum-1)*$rowPerpage).",".$rowPerpage;

$asset_qry = exec_query_utf8($visibleFilteredSQL);
while($row_asset =mysqli_fetch_array($asset_qry)){
//query your data to table using tr tag
 }
if(mysqli_num_rows($asset_qry)==0){echo '<tr><td colspan="ColumnNum">No Notification found</td></tr>';}	
echo '</tbody></table>’;

getData.php is the data query file requested by ajax function and return the list html script. In this file, you need to make your own query condition to match your own data to be listed. In this tutorial, we build the list using table element which is returned to the ajax request result. For data query function, we use exec_query_utf8 to query the utf8 characters.

PHP File (dataList.php)

<div style="height:0px; width:0px;"><div id="listLoadProcess"></div></div>
<div id="right_dataContent"></div>
<div id="listNavigator">                                	
<input id="numPerPage" class="btnNav" type="text" title="Number of row per page" value="20" onchange="<?php echo $showListFunciton;?>(1);" onkeypress="return isNumberKey(event)" />&nbsp;
<input id="navFirst" type="submit" title="First" onclick="listNavigator('first','<?php echo $showListFunciton;?>');" value="<<" />&nbsp;
<input id="navPrev" type="submit" title="Previous" onclick="listNavigator('previous','<?php echo $showListFunciton;?>');" value="<" />&nbsp;
<select id="pageNum" title="Go to page" onchange="<?php echo $showListFunciton;?>(0);" ></select>&nbsp;
<input id="navNext" type="submit" onclick="listNavigator('next','<?php echo $showListFunciton;?>');" value=">" title="Next" />&nbsp;
<input id="navLast" type="submit" onclick="listNavigator('last','<?php echo $showListFunciton;?>');" value=">>" title="Last" />
</div>

datalist.php contains html script as the container of the data list and also the loading element and navigating buttons. In  this file, we do not set the static function for onchange event because doing this will be able you to use this files dynamically meaning that you can implement this file for all your pages which show different data by just change the function name in list.php. 

Main File (list.php)

var firstLoading=true;
function assetPriceList (resetNavList){
startListLoadProcess();			
var pageNum=$("#pageNum").val(),numPerPage=$("#numPerPage").val();
$.post("includes/getData.php",{hostname:localhost,page:pageNum,numPerPage:numPerPage,firstLoading:firstLoading,resetNavList:resetNavList} ,function(data){ 				
endListLoadProcess();
$("#right_dataContent").html(data);	
firstLoading=false;
});
}

<?php $showListFunciton='assetPriceList'; include("includes/dataList.php"); ?>

list.php is your main file to display the data list. The main Ajax function is placed in this file or you may have your own external JavaScript file. Also, you need to include the datalist.php file where all the html layout of the list located. Together with list.php, you also need to assign the value of the variable showListFunciton to specify the function to be used to display the data list. In this tutorial, we use function named assetPriceList to get the price data list from the database.  If you have another data list page, you just have a new Ajax function and specify the function name to the showListFunciton variable.

Similar Tutorials

Comments