如何同时实现table标签的分页和搜索？

Question

我原本table的分页功能使用的是thinkphp框架中的分页：

// 查询状态为1的用户数据 并且每页显示10条数据
$list = Db::name('user')->where('status',1)->paginate(10);
// 把分页数据赋值给模板变量list
$this->assign('list', $list);
// 渲染模板输出
return $this->fetch();

<div>
<ul>
{volist name='list' id='user'}
    <li> {$user.nickname}</li>
{/volist}
</ul>
</div>
{$list->render()}

搜索功能则是自己写一个一小段JavaScript代码，代码就不贴出来了，只是对当前页面的table进行遍历查找，但这个代码只能对当前的页面进行搜索，无法对全部数据搜索。
如何能在搜索框输入数据后能马上跳转到该数据所在的页面并单独显示出来？希望大家能提供点思路。

Answer 1

根据你的问题，你现在的js代码是对当前页面的数据进行搜索然后将不符合数据过滤到，这样肯定只能过滤当前页的，如果要实现你所说的在全表搜索，那你需要重定向到这个路由，并且带上参数再查询一次数据来返回给前端，这样就可以得到所有你想得到的数据了。
简单说下两个方法吧。

控制器这么写
$cat = isset($_GET['cat']) ? $_GET['cat'] : '';

$QB_logs = DB::where('qb_status', 'e')->where(function($query) use ($cat){
    if($cat) {
        $query->where('qb_action', '=', $cat);
    }
}->select();
前端这么写
{!!  $QB_logs->appends(['cat'=>$cat])->render() !!}

这个是laravel的写法，具体到你的框架应该也差不多。

第二个方法，如果你不想要页面跳转来重新加载数据的话，你可以考虑用datatable来渲染数据，这样也能达到你所说的效果。

Answer 2

谢邀：

• 首先这里是两个功能，默认展示跟分页，
• 搜索结果展示，是另一个功能，至于搜索的分页，跟默认展示没有关系。

思路：

• 用户输入搜索的内容后，可以表单提交并跳转到搜索结果页，展示根据关键字搜索出来的结果，数据多的话也就有了分页。
• 如果是单页应用，那就更简单了，用户输入内容后，ajax、fetch等提交关键字到后台，返回数据，替换默认的数据，展示搜索结果。