jQuery页面替换+php代码实现搜索后分页

Posted hopelooking

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery页面替换+php代码实现搜索后分页相关的知识,希望对你有一定的参考价值。

html代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text" id="word" value="{$data.word}">
    <input type="button" value="搜索" onclick="page(1)">
<table>
    <tr>
        <th>ID</th>
        <th>账号</th>
        <th>密码</th>
        <th>手机</th>
        <th>登录时间</th>
        <th>登录次数</th>
        <th>状态</th>
    </tr>
    {volist name="data.list" id="v"}
    <tr>
        <td>{$v.id}</td>
        <td>{$v.uname}</td>
        <td>{$v.pwd}</td>
        <td>{$v.phone}</td>
        <td>{$v.login_time|date="Y-m-d H:i:s",###}</td>
        <td>{$v.login_num}</td>
        <td>
            {switch name="$v.is_on" }
                {case value="1"}正常{/case}
                {case value="2"}锁定{/case}
            {/switch}
        </td>
    </tr>
    {/volist}
</table>

<a href="javascript:void(0);" onclick="page({$data.home_page})">首页</a>
<a href="javascript:void(0);" onclick="page({$data.prev_page})">上一页</a>
<a href="javascript:void(0);" onclick="page({$data.next_page})">下一页</a>
<a href="javascript:void(0);" onclick="page({$data.last_page})">尾页</a>

<script src="__STATIC__/js/jquery.js"></script>
<script>
    function page(obj){
        //获取搜索框的值
        var word = $("#word").val();
        if(word==‘‘){
            $.get("{:url(‘Three/home‘)}?page="+obj,function(data){
                $("body").html(data);
            })
        }else{
            //有值
            $.get("{:url(‘Three/home‘)}?page="+obj+"&word="+word,function(data){
                $("body").html(data);
            })
        }
        
    }
</script>
</body>
</html>

 

 

php代码:

//展示页面
    public function home(){
        //接收关键字
        $word = Request::instance()->param(‘word‘);
        if(empty($word)){
            //查询所有的数据
            //求出总条数
            $count = Db::table("user")->count();
            //设置每页显示的条数
            $length = 2;
            //求出来总页数
            $zong_page = ceil($count/$length);
            //接收当前页
            $page = Request::instance()->param(‘page‘);
            $current_page = empty($page) ? 1 : $page;
            //求出偏移量
            $limit = ($current_page-1)*$length;
            //查询
            $data = Db::table("user")->limit($limit,$length)->select();
        }else{
            //根据关键字实现多条件查询
            //求出总条数(满足条件的)
            $count = Db::table("user")->where(‘uname|phone‘,‘like‘,"$word%")->count();
            //设置每页显示的条数
            $length = 2;
            //求出来总页数
            $zong_page = ceil($count/$length);
            //接收当前页
            $page = Request::instance()->param(‘page‘);
            $current_page = empty($page) ? 1 : $page;
            //求出偏移量
            $limit = ($current_page-1)*$length;
            //查询
            $data = Db::table("user")->where(‘uname|phone‘,‘like‘,"$word%")->limit($limit,$length)->select();
        }
        
        //判断页码
        $arr[‘list‘] = $data;
        $arr[‘home_page‘] = 1;
        $arr[‘prev_page‘] = $current_page-1 <= 1 ? 1 : $current_page-1;
        $arr[‘next_page‘] = $current_page+1 >= $zong_page ? $zong_page : $current_page+1;
        $arr[‘last_page‘] = $zong_page;
        $arr[‘word‘] = empty($word) ? null : $word;

        return view(‘home‘,[‘data‘=>$arr]);
    }

 

以上是关于jQuery页面替换+php代码实现搜索后分页的主要内容,如果未能解决你的问题,请参考以下文章

表单提交后分页页面标签POST实现 —— 一个小小的bug引发的思考

关键词搜索&分页功能的前端代码(ajax + jQuery)

tp5+jquery通过模板页面替换的方式实现分页

使用 ajax php mysql 实现分页搜索

php实现搜索和分页效果-亲测有效

求一个php搜索全站的代码