Load more is usually seen on a website that has no pagination in the page. This functionality has a power to do infinite loading data from the database without refreshing the page. With the combination of jQuery and Ajax, fetching result from a page to another is just a breeze.
Below are the step by step process that you should do.
- Create a database in the MySQL and name it “subjectdb”.
- Do the following query for creating a table in the database that you have created.
CREATE TABLE IF NOT EXISTS `subject` (
`SUBJ_ID` int(11) NOT NULL AUTO_INCREMENT,
`SUBJ_CODE` varchar(30) NOT NULL,
`SUBJ_DESCRIPTION` varchar(255) NOT NULL,
PRIMARY KEY (`SUBJ_ID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=88 ;- Insert the following records in the table that you have created.
INSERT INTO `subject` (`SUBJ_ID`, `SUBJ_CODE`, `SUBJ_DESCRIPTION`) VALUES
(1, 'Theology 1', 'Faith and Creed and Basic Catholic Doctrine'),
(2, 'English 0', 'English Plus '),
(3, 'English 1', 'Developmental Reading'),
(4, 'Theology 1', 'Faith and Creed and Basic Catholic Doctrine'),
(5, 'History 1', 'Philippine History and Culture'),
(6, 'Psychology 1a', 'General Psychology with Moral Regen & Drug Abuse Ed.'),
(7, 'Chem. 1', 'General and Organic Chemistry'),
(8, 'Philosophy 1', 'Introduction to Philosophy'),
(9, 'PE 1', 'Physical Education'),
(10, 'NSTP 1', 'NSTP'),
(11, 'Theology 2', 'Bible and Salvation History '),
(12, 'English 1', 'Study and Thinking Skills '),
(13, 'English 02', 'Developmental Reading 2'),
(14, 'Math 2', 'Modern College Algebra '),
(15, 'Nat. Sci. 3', 'Physical Science'),
(16, 'Philo. 3', 'Logic'),
(17, 'Educ. 2', 'Child and Adolescent Development'),
(18, 'PE 2', 'Rhythmic Activities'),
(19, 'NSTP 2', 'NSTP'),
(20, 'Theology 3', 'Liturgy and Sacraments in General'),
(21, 'English 2 ', 'Writing in the Decipline'),
(22, 'English 3', 'Speech Communication'),
(23, 'English 4', 'Interactive English'),
(24, 'Filipino 1', 'Komunikasyon sa Akademikong Filipino'),
(25, 'Math 2', 'Plane and Spherical Trig.'),
(26, 'Philo. 5', 'Philosophy of being'),
(27, 'Philo. 2', 'General Ethics'),
(28, 'PE 3', 'Individual/ Dual Sports/ Games'),
(29, 'Theology 4', 'Commandments and Christian Morality '),
(30, 'English 15', 'Philippine Literature'),
(31, 'English 7a', 'Effective Writing'),
(32, 'Filipino 2', 'Pagbasa at Pagsulat Tungo sa Pananaliksik'),
(33, 'Nat. Sci. 4', 'Ecology'),
(34, 'Philo. 6', 'Philosophy of Nature'),
(35, 'Philo. 17', 'Special Ethics'),
(36, 'PE 4', 'Team Sports and Games'),
(37, 'Theology 5', 'Church History and Church Today'),
(38, 'Filipino 3', 'Masining na Pagpapahayag'),
(39, 'Nat. Sci. 2 ', 'Biological Science'),
(40, 'Philo. 4', 'Theodicy'),
(41, 'Philo. 13', 'History of Ancient Philosophy'),
(42, 'Philo. 8a', 'Philosophical Pyschology'),
(43, 'Educ. 104', 'Principles of Teaching 1'),
(44, 'Computer 1', 'Basic Computer'),
(45, 'Theology 6', 'Social Teaching of the Church'),
(46, 'English 5', 'Business English and Correspondence'),
(47, 'English 17', 'World Literature'),
(48, 'Philo. 14', 'History of Medieval Philosophy'),
(49, 'Philo. 7', 'Philosophy of Knowledge'),
(50, 'Philo. 19', 'Philosophy of Education'),
(51, 'Computer 2', 'Software Application'),
(52, 'Humanities 2', 'Art Education'),
(53, 'Pol. Sci. 4', 'Politics and Governance with PC'),
(54, 'Philo. 51', 'Philosophy of Religion'),
(55, 'Philo. 16', 'History of Modern Philosophy'),
(56, 'Philo. 31', 'Oriental Philosophy'),
(57, 'Economics 1', 'Principles of Economics with TAR'),
(58, 'Educ. 102', 'Facilitating Learning'),
(59, 'Soc. Sci. 19', 'Society and Culture'),
(60, 'Philo. 18 ', 'History of Contemporary Philosophy '),
(61, 'Philo. 9a', 'Social Phylosophy'),
(62, 'Philo. 20', 'Elements of Filipino Phylosophy'),
(63, 'Philo. 11', 'Social Phylosophy II: Values Identification & Inculcation (lncl. Institution & Ideologies)'),
(64, 'Rizal', 'Life, Works and Writings of Doctor Jose Rizal'),
(65, 'Theology 1', 'Faith and Creed and Basic Catholic Doctrine'),
(66, 'English 0', 'English Plus'),
(67, 'English 01 ', 'Developmental Reading'),
(68, 'History 1', 'Philipine History and Culture'),
(69, 'Psycho. 1a', 'General Psychology with Moral Regen & Drug Abuse Ed.'),
(70, 'Chem. 1', 'General & Inorganic Chemistry'),
(71, 'Economics 1', 'Principles of Economics with TAR'),
(72, 'PE 1', 'Physical Fitness'),
(73, 'NSTP 1', 'NSTP'),
(74, 'Theology 2', 'Bible & Salvation History'),
(75, 'English 1', 'Study and Thinking Skills'),
(76, 'English 02', 'Developmental Reading 2'),
(77, 'Math 2', 'Modern College Algebra'),
(78, 'Soc. Sci. 19', 'Society and Culture with FP '),
(79, 'Nat. Sci. 1', 'Physical Science'),
(80, 'Educ. 2', 'Child & Adolescent Development'),
(81, 'PE 2', 'Rhythmic Activities'),
(82, 'NSTP 2', 'NSTP'),
(83, 'Theology 3', 'Liturgy and Sacraments in General'),
(84, 'English 2', 'Writing in the Decipline'),
(85, 'English 3', 'Speech and Communication'),
(86, 'English 33a', 'Introduction to Language Study'),
(87, 'Filipino 1', 'Komunikasyon sa Akademikong Filipino');- Create a page for the configuration of MySQL Database and PHP script. Name it “config.php”.
<?php
$server = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'subjectdb';
$con = mysql_connect($server, $dbuser, $dbpass);
if (isset($con)) {
# code...
$dbSelect = mysql_select_db($dbname);
if (!$dbSelect) {
echo "Problem in selecting database! Please contact administraator";
die(mysql_error());
}
} else {
echo "Problem in database connection! Please contact administraator";
die(mysql_error());
}
?>- Create a design for the landing page and name it “index.php”.
<?php include 'config.php'; ?>
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body style="background-color:#5b5959;">
<div class="container">
<div class="row">
<h1 style="color:#fff;">Page Scroll Using jQuery,Ajax And PHP</h1>
<div id="displayRows">
<?php
$select=mysql_query("select * from subject limit 0,5");
while($row=mysql_fetch_array($select)) {
echo "<div class='panel well'>
<div class='panel-body'>";
echo "<p class='rows'> <h3><small>".$row['SUBJ_ID']."</small>.".$row['SUBJ_CODE']." <small>[".$row['SUBJ_DESCRIPTION']."]</small></h3></p>";
echo "</div>
</div>";
}
?>
</div>
</div>
</div>
<input id="numRows" type="hidden" value="5">
</body>
</html>- Create a script for fetching a result from the other page.
<!-- jQuery extension -->
< script type = "text/javascript"
src = "jquery/jquery.min.js" > < /script>
<script type="text/javascript
">
$(window).scroll(function () {
if($(document).height() <= $(window).scrollTop() + $(window).height()) {
var r = document.getElementById("
numRows
").value;
$.ajax({
type: 'post',
url: 'loadresult.php',
data: {
rows:r
},
success: function (response) {
var content = document.getElementById("
displayRows
");
// display your result
content.innerHTML = content.innerHTML+response;
// We increase the value by 5 because we limit the results by 5
document.getElementById("
numRows
").value = Number(r)+5;
}
});
}
});
</script>- Create a page for loading data from the MySQL database. Name it “loadresult.php”.
<?php
include 'config.php';
if (isset($_POST['rows'])) {
$r = $_POST['rows'];
$sqlQuery = mysql_query("select * from subject limit $r,10");
while ($row = mysql_fetch_array($sqlQuery)) {
echo "<div class='panel well'>
<div class='panel-body'>";
echo "<p class='rows'> <h3><small>" . $row['SUBJ_ID'] . "</small>." . $row['SUBJ_CODE'] . " <small>[" . $row['SUBJ_DESCRIPTION'] . "]</small></h3></p>";
echo "</div>
</div>";
}
exit();
}
?>
For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :
Email – [email protected]
Mobile No. – 09305235027 – tnt