Learn

Load More results from database using jquery, PHP

Load more records like facebook, twitter using jquery
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Load More results from database using jquery, PHP

I am going to show you a simple method to load more results from the database using jquery. We will use PHP and mySql database. It’s a very simple script so you can implement it using any other client side language and database engine.

We need to create a database table. if you are familiar with mySql then it would be easy for you. For test purpose, I am giving a simple SQL query to create a table. Please replace the database_name with your own database name and table_name with your own table name.

CREATE TABLE `database_name`.`table_name` (
`recid` INT NOT NULL AUTO_INCREMENT ,
`name` VARCHAR(255) NOT NULL ,
`details` TEXT NOT NULL ,
PRIMARY KEY (`recid`) ) ENGINE = MyISAM;

After successfully created a table we will add some records using an SQL query into our database.

INSERT INTO `database_name`.`table_name`
(`recid`, `name`, `details`) VALUES (‘1’, ‘First Record’, ‘Detail of the first record’),
(‘2’, ‘Second Record’, ‘Detail of the second Record’),
(‘3’, ‘Third Record’, ‘Detail of the Third Record’),
(‘4’, ‘Forth Record’, ‘Detail of the Forth Record’),
(‘5’, ‘Fifth Record’, ‘Detail of the Fifth Record’),
(‘6’, ‘Sixth Record’, ‘Detail of the Sixth Record’),
(‘7’, ‘Seventh Record’, ‘Detail of the Seventh Record’),
(‘8’, ‘Eighth Record’, ‘Detail of the Eighth Record’),

Same as I wrote before to replace the database_name and table_name with your own. copy this SQL query and paste it into the SQL table of your PHPMyAdmin.

We have completed our MySQL database part. Now we will move forward and do some PHP work like Connecting to the database, opening the table and fetching the records.

Create a new PHP file and named it records.php and paste the following code in it.

<?php
mysql_connect(‘localhost’,’root’,”);
mysql_select_db(‘database_name’);

$no = $_POST[‘getresult’];
$select = mysql_query(“select * table_name limit $no,3”);
while($row = mysql_fetch_array($select))
{
echo “<p class=’result’>”.$row[‘name’].”<br>”.$row[‘details’].”<br><br></p>”;
}
?>

save this file and run using your localhost. We will get the following result.
First Record
Detail of the first record

Second Record
Detail of the Second record

Third Record
Detail of the Third record and so on.

This shows that our database and table is working fine. Now we will move to the next step where we will create another PHP file where we will load all these records according to the button action and our defined number of records.

Name this php file index.php
<html>
<head>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-2.1.4.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#load_feeds”).click(function(){
feed_loader();
});
});
function feed_loader()
{
var val = document.getElementById(“to_show”).value;
$.ajax({
type: ‘post’,
url: ‘records.php’, // Write the name of php file from where we will fetch the remaining records
data: {
getresult:val
},
success: function (response) {
var content = document.getElementById(“feeds”);
content.innerHTML = content.innerHTML+response;

// We increase the value by 3 because we limit the results by 3
document.getElementById(“to_show”).value = Number(val)+3;
}
});
}
</script>
</head>
<body>
<center>
<div id=”content”>
<div id=”feeds”>
<?php
mysql_connect(‘localhost’,’root’,”);
mysql_select_db(‘database_name’);

$no = $_POST[‘getresult’];
$select = mysql_query(“select * table_name limit 0,3”);
while($row = mysql_fetch_array($select))
{
echo “<p class=’result’>”.$row[‘name’].”<br>”.$row[‘details’].”<br><br></p>”;
}
?>

// We set the initial value 3 because we want only 3 results at a time
<input type=”hidden” id=”to_show” value=”3″>
<button id=”load_feeds”>Load More Results</button>
</div>
</div>
</center>
</body>
</html>

That’s it.

If you have any question feel free to write.


  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Most Popular

To Top