Advance Pagination with jQuery and PHP

In this tutorial, I will teach you how to set pagination in your existing data in the document of the page with jQuery, PHP and MySQL database. Pagination is the process of segragating data into individual pages. It’s an advance method for creating sequence of numbers assigned to pages in a document of the page.

Let’s begin:

Create a database in MySQL and name it “dbpagination“.
Create a 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,
 `UNIT` int(2) NOT NULL,
 `YR` varchar(30) NOT NULL,
 `AY` varchar(30) NOT NULL,
 PRIMARY KEY (`SUBJ_ID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=438 ;

Create a query for inserting data in the table.

INSERT INTO `subject` (`SUBJ_ID`, `SUBJ_CODE`, `SUBJ_DESCRIPTION`, `UNIT`, `YR`, `AY`) VALUES
(11, 'Theology 1', 'Faith and Creed and Basic Catholic Doctrine', 3, 'Grade 7', '2013-2014'),
(12, 'English 0', 'English Plus ', 3, 'Grade 7', '2013-2014'),
(13, 'English 1', 'Developmental Reading', 3, 'Grade 7', '2013-2014'),
(14, 'Theology 1', 'Faith and Creed and Basic Catholic Doctrine', 3, 'Gade 8', '2013-2014'),
(15, 'History 1', 'Philippine History and Culture', 3, 'Grade 7', '2013-2014'),
(16, 'Psychology 1a', 'General Psychology with Moral Regen & Drug Abuse Ed.', 3, '22', '2013-2014'),
(17, 'Chem. 1', 'General and Organic Chemistry', 5, '22', '2013-2014'),
(18, 'Philosophy 1', 'Introduction to Philosophy', 3, '22', '2013-2014'),
(19, 'PE 1', 'Physical Education', 2, '22', '2013-2014'),
(20, 'NSTP 1', 'NSTP', 3, 'Grade 7', '2013-2014'),
(21, 'Theology 2', 'Bible and Salvation History ', 3, '22', '2013-2014'),
(22, 'English 1', 'Study and Thinking Skills ', 3, '22', '2013-2014'),
(23, 'English 02', 'Developmental Reading 2', 3, '22', '2013-2014'),
(24, 'Math 2', 'Modern College Algebra ', 3, '22', '2013-2014'),
(25, 'Nat. Sci. 3', 'Physical Science', 3, '22', '2013-2014'),
(26, 'Philo. 3', 'Logic', 3, '22', '2013-2014'),
(27, 'Educ. 2', 'Child and Adolescent Development', 2, '22', '2013-2014'),
(28, 'PE 2', 'Rhythmic Activities', 3, '22', '2013-2014'),
(29, 'NSTP 2', 'NSTP', 3, '22', '2013-2014'),
(30, 'Theology 3', 'Liturgy and Sacraments in General', 3, '23', '2013-2014'),
(31, 'English 2 ', 'Writing in the Decipline', 3, '23', '2013-2014'),
(32, 'English 3', 'Speech Communication', 3, '23', '2013-2014'),
(33, 'English 4', 'Interactive English', 3, '23', '2013-2014'),
(34, 'Filipino 1', 'Komunikasyon sa Akademikong Filipino', 3, '23', '2013-2014'),
(35, 'Math 2', 'Plane and Spherical Trig.', 3, '23', '2013-2014'),
(36, 'Philo. 5', 'Philosophy of being', 3, '23', '2013-2014'),
(37, 'Philo. 2', 'General Ethics', 3, '23', '2013-2014'),
(38, 'PE 3', 'Individual/ Dual Sports/ Games', 2, '23', '2013-2014'),
(39, 'Theology 4', 'Commandments and Christian Morality ', 3, '23', '2013-2014'),
(40, 'English 15', 'Philippine Literature', 3, '23', '2013-2014'),
(41, 'English 7a', 'Effective Writing', 3, '23', '2013-2014'),
(42, 'Filipino 2', 'Pagbasa at Pagsulat Tungo sa Pananaliksik', 3, '23', '2013-2014'),
(43, 'Nat. Sci. 4', 'Ecology', 3, '23', '2013-2014'),
(44, 'Philo. 6', 'Philosophy of Nature', 3, '23', '2013-2014'),
(45, 'Philo. 17', 'Special Ethics', 3, '23', '2013-2014'),
(46, 'PE 4', 'Team Sports and Games', 2, '22', '2013-2014'),
(47, 'Theology 5', 'Church History and Church Today', 3, '24', '2013-2014'),
(48, 'Filipino 3', 'Masining na Pagpapahayag', 3, '24', '2013-2014'),
(49, 'Nat. Sci. 2 ', 'Biological Science', 3, '24', '2013-2014'),
(50, 'Philo. 4', 'Theodicy', 3, '24', '2013-2014'),
(51, 'Philo. 13', 'History of Ancient Philosophy', 3, '24', '2013-2014'),
(52, 'Philo. 8a', 'Philosophical Pyschology', 3, '24', '2013-2014'),
(53, 'Educ. 104', 'Principles of Teaching 1', 3, '24', '2013-2014'),
(54, 'Computer 1', 'Basic Computer', 3, '24', '2013-2014'),
(55, 'Theology 6', 'Social Teaching of the Church', 3, '24', '2013-2014'),
(56, 'English 5', 'Business English and Correspondence', 3, '24', '2013-2014'),
(57, 'English 17', 'World Literature', 3, '24', '2013-2014'),
(58, 'Philo. 14', 'History of Medieval Philosophy', 3, '24', '2013-2014'),
(59, 'Philo. 7', 'Philosophy of Knowledge', 3, '24', '2013-2014'),
(60, 'Philo. 19', 'Philosophy of Education', 3, '24', '2013-2014'),
(61, 'Computer 2', 'Software Application', 3, '24', '2013-2014'),
(62, 'Humanities 2', 'Art Education', 3, '24', '2013-2014'),
(63, 'Pol. Sci. 4', 'Politics and Governance with PC', 3, '25', '2013-2014'),
(64, 'Philo. 51', 'Philosophy of Religion', 3, '25', '2013-2014'),
(65, 'Philo. 16', 'History of Modern Philosophy', 3, '25', '2013-2014'),
(66, 'Philo. 31', 'Oriental Philosophy', 3, '25', '2013-2014'),
(67, 'Economics 1', 'Principles of Economics with TAR', 3, '25', '2013-2014'),
(68, 'Educ. 102', 'Facilitating Learning', 3, '25', '2013-2014'),
(69, 'Soc. Sci. 19', 'Society and Culture', 3, '25', '2013-2014'),
(70, 'Philo. 18 ', 'History of Contemporary Philosophy ', 3, '25', '2013-2014'),
(71, 'Philo. 9a', 'Social Phylosophy', 3, '25', '2013-2014'),
(72, 'Philo. 20', 'Elements of Filipino Phylosophy', 3, '25', '2013-2014'),
(73, 'Philo. 11', 'Social Phylosophy II: Values Identification & Inculcation (lncl. Institution & Ideologies)', 3, '25', '2013-2014'),
(74, 'Rizal', 'Life, Works and Writings of Doctor Jose Rizal', 3, '25', '2013-2014'),
(75, 'Theology 1', 'Faith and Creed and Basic Catholic Doctrine', 3, '14', '2013-2014'),
(76, 'English 0', 'English Plus', 3, '26', '2013-2014'),
(77, 'English 01 ', 'Developmental Reading', 3, '26', '2013-2014'),
(78, 'History 1', 'Philipine History and Culture', 3, '26', '2013-2014'),
(79, 'Psycho. 1a', 'General Psychology with Moral Regen & Drug Abuse Ed.', 3, '26', '2013-2014'),
(80, 'Chem. 1', 'General & Inorganic Chemistry', 3, '26', '2013-2014'),
(81, 'Economics 1', 'Principles of Economics with TAR', 3, '26', '2013-2014'),
(82, 'PE 1', 'Physical Fitness', 2, '14', '2013-2014');

Create a landing page and name it “index.php“.
Create a configuration between MySQL database and PHP script.

 <?php
 $server = 'localhost';
 $dbuser = 'root';
 $dbpass = '';
 $dbname = 'dbpagination';
 $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());
 }
 ?>

Do this following codes for the style, design and retrieving data in the database.

<!doctype html>
<html>
<head> 
<title>jQuery Materialize Pagination Plugin Examples</title> 

 <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all" title="" /> 
 
<style type="text/css">
 
 while ($row = mysql_fetch_array($result)) {
 echo '<div class="data panel">'; 
 echo '<div class="content">
 <div class="panel-header">
 <h3> <small>'.$row['SUBJ_ID'].'.</small> <a href="">'.$row['SUBJ_CODE'].'</a></h3>
 </div>
 <div class="panel-body">'.$row['SUBJ_DESCRIPTION'].'</div></div>' ;
 echo '</div>';
 }
 
 ?>
 </div> 
 <!--the pagination will display here. -->
 <ul id ="pagination"> </ul> 
 
</form> 
</div> 
 
</body>
</html>

Set the following jQuery plugins.

<!-- jQuery Plugins -->
<script src="jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="jquery/pagination.js"></script>

Finally, create a script for the pagination of the page.

<script>

 }
 }
 });
 }

 load();
 });
</script>

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

Download Sourcecode

Let’s begin:

Leave a Comment Cancel reply