定义一个点击事件,获取关键词,传到后台,根据关键词搜索并分页。获取根据关键词分页后的数据,展示到前台。直接替换原来的数据。
//接收当前页 $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>