废话不多说,直接上代码:
前台代码:
记得先引入bootstrap:http://v3.bootcss.com/dist/css/bootstrap.min.css
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基于BootStrap与PHP相结合的带有搜索框的ajax无刷新分页案例(支持三种搜索)</title>
<link rel="stylesheet" href="http://v3.bootcss.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="container">
<h2>基于BootStrap与PHP相结合的带有搜索框的ajax无刷新分页案例(支持三种搜索)</h2>
<form class="form-inline" style="text-align: right" οnsubmit="return false;">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">在线搜索</div>
<input type="text" class="form-control" id="content" placeholder="请输入搜索内容……">
</div>
</div>
<button type="button" class="btn btn-primary" id="search">搜索</button>
</form>
<br />
<input type="hidden" id="currentPage" value="1">
<input type="hidden" id="totalPages" value="">
<input type="hidden" id="search_content" value="">
<table class="table table-bordered table-hover table-striped table-condensed">
<thead>
<tr>
<td width="25%">ID</td>
<td width="25%">名字</td>
<td width="25%">性别</td>
<td width="25%">语言</td>
</tr>
<tr id="tip" style="display:none;">
<td colspan="4"></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="list-div">
</div>
<script>
$(document).ready(function() {
loadingData();
var totalPages = 0;
//页面加载数据
})
function loadingData(){
var currentPage = $('#currentPage').val();//当前页码
var totalPages = $('#totalPages').val();//总页码
var search_content = $('#search_content').val();//搜索内容
content = search_content ? search_content : '';
$.ajax({
url: 'test.php',
type:'POST',
data:{'currentPage':currentPage,'content':content},
dataType: 'json',
success:function(data){
var info = data.datas,total = data.total;
//调用ajaxSuccess处理函数
ajaxSuccess(total,currentPage,info);
}
})
//点击按钮搜索
$("#search").click(function(){
search();
});
//边输入边搜索
$("#content").keyup(function(){
search();
});
//回车键搜索(为了避免表单提交,已经禁止上面的表单提交了)
$(document).keydown(function() {
if (event.keyCode == 13){//表示按的是回车键
search();
}
});
//PS:边输入边搜索和回车键搜索最好分开用,以免引起紊乱
}
//给分页列表绑定事件的方法
function bindingEvent()
{
$("#first").click(function(){
if($("#currentPage").val() != 1 && $('#totalPages').val() != 0){//第一页点击时无效
$("#currentPage").val(1);//即第一页
//加载数据
loadingData();
}
})
$("#last").click(function(){//最后一页点击时无效
if($("#currentPage").val() != $('#totalPages').val() && $('#totalPages').val() != 0){
var total = $('#totalPages').val();//把总页数存到隐藏框里
$("#currentPage").val(total);
//加载数据
loadingData();
}
})
$("#down").click(function(){
if($('#totalPages').val() != 0){//总页数为0时,不能点击无效,主要是考虑搜索没数据时的情况
var n = $("#currentPage").val();
if(n>1)
{
n--;
}
else
{
n=1;
}
$("#currentPage").val(n);
}
//加载数据
loadingData();
})
$("#up").click(function(){
if($('#totalPages').val() != 0){//总页数为0时,不能点击无效,主要是考虑搜索没数据时的情况
var n = $("#currentPage").val();
if(n<totalPages)
{
n++;
}
else
{
n=totalPages;
}
$("#currentPage").val(n);
//加载数据
loadingData();
}
})
$(".center").click(function(){
if($('#totalPages').val() != 0){//总页数为0时,不能点击无效,主要是考虑搜索没数据时的情况
var n = $(this).text();
if($("#currentPage").val() != n){
$("#currentPage").val(n);//中间的页码,点击哪一页就去那一页
//加载数据
loadingData();
}
}
})
}
//把ajax相同部分封装成函数调用
function ajaxSuccess(total,currentPage,info){
var html = ''
for(var i = 0;i < info.length;i++){
html += '<tr>';
html += '<td>'+ info[i].id +'</td>';
html += '<td>'+ info[i].name +'</td>';
html += '<td>'+ info[i].sex+'</td>';
html += '<td>'+ info[i].language +'</td>';
html += '</tr>';
}
$('tbody').html(html);
var pages = Math.ceil(total/3);
totalPages = pages;
$('#totalPages').val(totalPages);//把总页数存到隐藏框里
var dangqian = currentPage ? parseInt(currentPage) : 1; //当前页数
$('#currentPage').val(dangqian);//把当前页存放到隐藏框
var j = 0;
var s = '<nav class="page" aria-label="Page navigation"><ul class="pagination"><li><a id="first">首页</a></li>';
if(dangqian != 1){
s += '<li><a id="down">上一页</a></li>';
}
for(var i = dangqian - 2;i <= dangqian + 2;i++)
{
if(j == 5){//页码列表只显示3列,即只显示1、2、3或2、3、4这样的三列,以此类推。
break;
}else{
j++;
}
if(i>0 && i <= pages)
{
if(dangqian==i)
{
s += '<li class="thisclass"><a class="current center">'+ i +'</a></li>';
}
else
{
s += '<li><a class="center">'+ i +'</a></li>';
}
}
}
if(dangqian != totalPages){
s += '<li><a id="up">下一页</a></li>';
}
s += '<li><a id="last">末页</a></li>';
s += '<li><span class="pageinfo">共 <strong>'+ totalPages +'</strong>页<strong>'+ total +'</strong>条</span></li></ul></nav>';
$(".list-div").html(s);
//给分页列表绑定事件
bindingEvent();
}
//搜索封装成函数
function search(){
var content = $('#content').val();
var currentPage = 1;//搜索时默认就是第一页
$('#search_content').val(content);//把搜索内容写到隐藏域
$.ajax({
url:"test.php",
data:{currentPage:currentPage,content:content},
type:"POST",
dataType:"JSON",
success: function(data){
var info = data.datas,total = data.total,html = '';
if(!info){
$('tbody').empty();
$('#tip').show().find('td').html('<center>暂无数据!</center>');
$('#totalPages').val(0);//此时的总页数为0
$(".list-div").html('<nav class="page" aria-label="Page navigation"><ul class="pagination"><li><a id="first">首页</a></li><li class="thisclass"><a class="current center">1</a></li><li><a id="up">下一页</a></li><li><a id="last">末页</a></li><li><span class="pageinfo">共 <strong>1</strong>页<strong>0</strong>条</span></li></ul></nav>');
return false;
}
$('#tip').hide();
//调用ajaxSuccess处理函数
ajaxSuccess(total,currentPage,info);
}
})
}
</script>
</body>
</html>
style.css
.page {
text-align: center;
margin: 10px 0 -20px 0;
}
a:hover{
cursor: pointer;
}
tr td{
text-align: center;
}
.page .current {
background: #FF0403;
color: white;
}
后台代码:
test.php
<?php
header("Content-Type:text/html;charset=utf-8");
error_reporting(0);
//连接数据库
mysql_connect('localhost','root','');
mysql_select_db('ajax');
mysql_query('set names utf8');
//查询数据库
$page = $_POST['currentPage'] ? intval($_POST['currentPage']) : 1;//默认是第一页
if(!empty($_POST["content"])){//获取提交的关键字
$content = $_POST["content"];
$params = " name like '%{$content}%' or language like '%{$content}%' or sex like '%{$content}%' or id like '%{$content}%' ";//拼接查询条件
$where = "where {$params}";
}else{
$where = '';
}
$perPageNums = 3;//每页显示条数
$offset = ($page - 1) * $perPageNums;
$sql1 = "select a.* from ajax_fenye a $where limit $offset,$perPageNums";
$sql2 = "select count(*) count from ajax_fenye $where";
$resource1 = mysql_query($sql1);
$resource2 = mysql_query($sql2);
$count = mysql_fetch_assoc($resource2);
while ($row = mysql_fetch_assoc($resource1)) {
$result[] = $row;
}
echo json_encode(array('datas' => $result,'total' => $count['count']));
?>
新建一张数据表:
SQL语句如下
/*
Navicat MySQL Data Transfer
Source Server : localhost_3306
Source Server Version : 50612
Source Host : localhost:3306
Source Database : ajax
Target Server Type : MYSQL
Target Server Version : 50612
File Encoding : 65001
Date: 2017-06-24 15:54:36
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for ajax_fenye
-- ----------------------------
DROP TABLE IF EXISTS `ajax_fenye`;
CREATE TABLE `ajax_fenye` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键id',
`name` varchar(50) CHARACTER SET utf8 NOT NULL COMMENT '名字',
`language` varchar(50) CHARACTER SET utf8 NOT NULL COMMENT '语言',
`sex` varchar(5) CHARACTER SET utf8 NOT NULL COMMENT '性别',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of ajax_fenye
-- ----------------------------
INSERT INTO `ajax_fenye` VALUES ('1', '张三', 'PHP', '男');
INSERT INTO `ajax_fenye` VALUES ('2', '李四', 'Java', '男');
INSERT INTO `ajax_fenye` VALUES ('3', '王五', 'C++', '男');
INSERT INTO `ajax_fenye` VALUES ('4', '马六', 'Swift', '男');
INSERT INTO `ajax_fenye` VALUES ('5', '林七', 'Go', '女');
INSERT INTO `ajax_fenye` VALUES ('6', '郑八', 'Python', '男');
INSERT INTO `ajax_fenye` VALUES ('7', '欧九', 'C', '女');
INSERT INTO `ajax_fenye` VALUES ('8', '叶十', 'JavaScript', '男');
INSERT INTO `ajax_fenye` VALUES ('9', '金人', 'PHP', '男');
INSERT INTO `ajax_fenye` VALUES ('10', '魏伟', 'PHP', '男');
INSERT INTO `ajax_fenye` VALUES ('11', '白厚', 'PHP', '男');
效果截图如下:
PS:欢迎大家来加群来探讨:135499297