使用 PHP，MySQL 和 jQuery 进行分页

分页是任何 web 项目的重要组成部分，一般根据分页页数请求，然后从数据库中列出符合分页的记录。在本文章中，我们将使用 PHP，MySQL 和 jQuery，告诉你简单的方式实现分页。

本教程实例包含三个 PHP 文件，一个 CSS 文件和两个 JavaScript 文件，包括 jQuery 插件。

1.数据库表

-- Table structure for table `employee`
--
CREATE TABLE IF NOT EXISTS `employee` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key',
`employee_name` varchar(255) NOT NULL COMMENT 'employee name',
`employee_salary` double NOT NULL COMMENT 'employee salary',
`employee_age` int(11) NOT NULL COMMENT 'employee age',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=58 ;
--
-- Dumping data for table `employee`
--

INSERT INTO `employee` (`id`, `employee_name`, `employee_salary`, `employee_age`) VALUES
(1, 'Tiger Nixon', 320800, 61),
(2, 'Garrett Winters', 170750, 63),
(3, 'Ashton Cox', 86000, 66),
(4, 'Cedric Kelly', 433060, 22),
(5, 'Airi Satou', 162700, 33),
(6, 'Brielle Williamson', 372000, 61),
(7, 'Herrod Chandler', 137500, 59),
(8, 'Rhona Davidson', 327900, 55),
(9, 'Colleen Hurst', 205500, 39),
(10, 'Sonya Frost', 103600, 23);

2.数据库连接: config.php

这是一个配置文件来使进行 MySQL 数据库连接。必须更改主机名(host)、用户名(user)、 密码(password)和数据库名称。

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "phpzag_demos";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());

if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
?>

3.PHP 代码: pagination.php

这是用于显示分页记录的用户界面。

<?php
include('config.php');
$per_page = 10;

//Calculating no of pages
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee";
$result = mysqli_query($conn, $sql);
$count = mysqli_num_rows($result);
$pages = ceil($count/$per_page)
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery_pagination.js"></script>
<link rel='stylesheet' href='style.css' type='text/css' />
<div id="loading" ></div>
<div id="content" ></div>
<ul id="pagination">

<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>

4.PHP 代码: pagination_data.php

这是一个简单的 PHP 文件来显示雇员表中的数据。此文件调用 jQuery 文件 (jquery_pagination.js) 来加载雇员记录。

<?php
include('config.php');
$per_page = 10;
if($_GET)
{
$page=$_GET['page'];
}

$start = ($page-1)*$per_page;
$sql = "select * from employee order by id limit $start,$per_page";
$result = mysqli_query($conn, $sql);
?>

<table width="800px">
<?php
while($row = mysqli_fetch_array($result))
{
$id=$row['id'];
$emp_name=$row['employee_name'];
$employee_salary=$row['employee_salary'];
$employee_age=$row['employee_age'];
?>
<tr>
<td><?php echo $id; ?></td>
<td><?php echo $emp_name; ?></td>
<td><?php echo $employee_salary; ?></td>
<td><?php echo $employee_age; ?></td>
</tr>
<?php
}
?>
</table>

5.JS 代码: jquery_pagination.js

这是一个 JavaScript 文件，就像一个要从服务器加载记录的数据控制器。

$(document).ready(function() {
//Hide Loading Image
function Hide_Load() {
$("#loading").fadeOut('slow');
};

//Default Starting Page Results
$("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
$("#content").load("pagination_data.php?page=1", Hide_Load());

//Pagination Click
$("#pagination li").click(function(){

//CSS Styles
$("#pagination li").css({'border' : 'solid #dddddd 1px'}).css({'color' : '#0063DC'});
$(this).css({'color' : '#FF0084'}).css({'border' : 'none'});

//Loading Data
var pageNum = this.id;
$("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
});
});

6.CSS 代码：Style.css

这是用于显示分页的 CSS 代码。

.pagination{
float:left;
width:100%;
}

.botoom_link{
float:left;
width:100%;
}

.content{
float:left;
width:100%;
}

ul {
list-style: none;
float:left;
margin:0;
padding: 0;
}

li{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:solid 1px #dddddd;
color:#0063DC;
}

li:hover{
color:#FF0084;
cursor: pointer;
}

代码百度云盘下载：http://pan.baidu.com/s/1c1GmVRi