bootstrap结合php,基于BootStrap与PHP相结合的带有搜索框的ajax无刷新分页案例(支持三种搜索)...

废话不多说，直接上代码:

前台代码:

记得先引入bootstrap:http://v3.bootcss.com/dist/css/bootstrap.min.css

index.php

基于BootStrap与PHP相结合的带有搜索框的ajax无刷新分页案例(支持三种搜索)

基于BootStrap与PHP相结合的带有搜索框的ajax无刷新分页案例(支持三种搜索)

在线搜索

搜索

ID名字性别语言

$(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

{

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 += '

';

html += '

'+ info[i].id +'';

html += '

'+ info[i].name +'';

html += '

'+ info[i].sex+'';

html += '

'+ info[i].language +'';

html += '

';

}

$('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 = '

• 首页';

if(dangqian != 1){

s += '

上一页';

}

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 += '

'+ i +'';

}

else

{

s += '

'+ i +'';

}

}

}

if(dangqian != totalPages){

s += '

下一页';

}

s += '

末页';

s += '

共 '+ totalPages +'页'+ total +'条';

$(".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('

暂无数据！ ');

$('#totalPages').val(0);//此时的总页数为0

$(".list-div").html('

• 首页
• 1
• 下一页
• 末页
• 共 1页0条

');

return false;

}

$('#tip').hide();

//调用ajaxSuccess处理函数

ajaxSuccess(total,currentPage,info);

}

})

}

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

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