ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

Advance Pagination with jQuery and PHP

advancepagingPI

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">
 /*** for paging */
#pagination { 
 padding-left: 0;
 border-radius: 4px;
}

#pagination > li {
 display: inline;
 list-style: none;
 font-size: 15px;
 color: #0063DC;
 padding: 10px;
 border: solid #ddd 1px;
}
#pagination > li:active {
 color: #fff;
 background-color: #bd0909;
}
#pagination > li:hover {
 color: #FF0084;
 background-color: #dedede;
}
#wrap { 
 margin-bottom: 0;
 width: 50%; 
 font-family: arial;
}
#wrap > .content {
 height: 50px;
 width: 50px;
 border: 1px solid #eee;
}

 </style>
</head>

<body> 
 
<div class="container">
<h1 style="color:red">jQuery Pagination Plugin</h1> 
<form action="#"> 
 <div id="wrap">
 <?php 
 /*set a query for retrieving data in the database*/
 $sqlQuery = "SELECT * FROM `subject`";
 /*Execute the query*/
 $result = mysql_query($sqlQuery) or die(mysql_error());
 /*get the total rows in the table*/
 $maxrow = mysql_num_rows($result); 
 /*load data in the table*/
 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>
/*Get the total rows in the table*/
var maxrow = '<?php echo $maxrow; ?>';
/*Set the page limit*/
var pageLimit = 5;
 
/**load the method in validating the records in the page document*/
$(function () { 
 load = function() {
 window.tp = new Pagination('#pagination', {
 /*load the total rows in the table*/
 itemsCount: maxrow,
 /*load the page limit*/
 pageSize: pageLimit,
 
 /*Set the events for changing the page of records*/
 onPageChange: function (paging) { 
 var start = paging.pageSize * (paging.currentPage - 1), /*set the starting page */
 end = start + paging.pageSize, /**/
 $rows = $('#wrap').find('.data'); /*fetching data in the table*/
 $rows.hide(); /*hidding the existing rows*/
 for (var i = start; i < end; i++) {
 $rows.eq(i).show(); /*retrieving records per page*/
 }
 }
 });
 }

 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 – jannopalacios@gmail.com
Mobile No. – 09305235027 – tnt

 

Download Sourcecode

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!