定义一个点击事件,获取关键词,传到后台,根据关键词搜索并分页。获取根据关键词分页后的数据,展示到前台。直接替换原来的数据。

//接收当前页
        $page = Request::instance()->param('page');
        //判断当前页
        $page = empty($page)?1:$page;
        //统计数据
        $count = Db::table('yun')->count();
        //设置每页条数
        $length = 4;
        //获取总页数
        $num_page = ceil($count/$length);
        //设置偏移量
        $limit = ($page-1)*$length;
        //接受搜索值
        $search = empty($_POST['search'])?"":$_POST['search'];
        //获取搜索的数据
        $data = Db::table('yun')->where("name","like","%$search%")->limit($limit,$length)->select();
        //将所需要的值都赋值给一个变量
        $arr['search'] = empty($search) ? "" : $search;
        $arr['data'] = $data;
        $arr['home_page'] = 1;
        $arr['prev_page'] = $page-1<=1 ? 1 : $page-1;
        $arr['next_page'] = $page+1>=$num_page?$num_page:$page+1;
        $arr['last_page'] = $num_page;
        return view('show',['list'=>$arr]);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示数据</title>
</head>
<body>
<center>
    <input type="text" id="search" value="{$list.search}">
    <input type="button" value="搜索" onclick="page(1)">
    <table border="1">
        <tr >
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        {volist name="list.data" id="vo"}
        <tr class="{$vo.id}">
            <td>{$vo.id}</td>
            <td>{$vo.name}</td>
            <td>{$vo.age}</td>
            <td>{$vo.address}</td>
        </tr>
        {/volist}
    </table>
    <input type="hidden" name="page">
    <a href="javascript:void(0);" onclick="page({$list.home_page})">首页</a>
    <a href="javascript:void(0);" onclick="page({$list.prev_page})">上一页</a>
    <a href="javascript:void(0);" onclick="page({$list.next_page})">下一页</a>
    <a href="javascript:void(0);" onclick="page({$list.last_page})">尾页</a>
</center>
</body>
</html>
<script src="/static/js/jquery.js"></script>
<script>
    function page(obj) {
        var search = $("#search").val();
        $.ajax({
            method:"POST",
            url:"{:url('search/show')}?page="+obj,
            data:{
                search:search
            }
        }).done(function(data){
            $("body").html(data);
        });
    }
</script>

 

posted on 2018-11-19 14:11  英勇博客  阅读(279)  评论(0编辑  收藏  举报