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

来源：互联网发布：股票收益率数据编辑：程序博客网时间：2024/05/22 15:07

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

前台代码:

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

阅读全文

1 0