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

最新推荐文章于 2024-04-17 05:11:02 发布

sensus森森

最新推荐文章于 2024-04-17 05:11:02 发布

阅读量3.5k

点赞数 2

分类专栏： PHP 文章标签： bootstrap ajax 分页搜索无刷新分页

本文链接：https://blog.csdn.net/qq_27682041/article/details/73692354

版权

PHP 专栏收录该内容

97 篇文章 1 订阅

订阅专栏

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

前台代码:

记得先引入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

sensus森森

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
7
评论
基于BootStrap与PHP相结合的带有搜索框的ajax无刷新分页案例(支持三种搜索)

废话不多说，直接上代码:前台代码:记得先引入bootstrap:http://v3.bootcss.com/dist/css/bootstrap.min.cssindex.php 基于BootStrap与PHP相结合的带有搜索框的ajax无刷新分页案例(支持三种搜索) http://v3.bootcss.com/dist/css/bootst
复制链接

扫一扫