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

川长思鸟来 2022-06-13 02:39 95阅读 0赞

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

前台代码:

记得先引入[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', '男');

效果截图如下：

![Center][]

![Center 1][]

![Center 2][]

PS:欢迎大家来加群来探讨:135499297

[bootstrap]: http://v3.bootcss.com/dist/css/bootstrap.min.css
[Center]: /images/20220613/b8be16345b3240879e3f17c99244c4d7.png
[Center 1]: /images/20220613/9cffff7401bf4138a976274832fe99be.png
[Center 2]: /images/20220613/bfb8a3e4fcb240b7ae91b5883bc3221a.png