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

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

前台代码:

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

index.php

    
    
    
    
    


    

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

            

                

                    
在线搜索
                        
                
            
            搜索
        
 
        

        
        
        
        
            
            

                

                    
ID
                    
名字
                    
性别
                    
语言
                
                

                    

                
            
            
            
                
            
        
    
    
        
    
    

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

 $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