How to achieve paging and searching of table tags at the same time?

my original table paging function uses pagination in the thinkphp framework: 

// 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()}
The

search function is to write a small piece of JavaScript code by yourself, and the code will not be posted, but only traversing the table of the current page, but this code can only search the current page, not all the data.
how can I jump to the page where the data is located and display it separately after entering data in the search box? I hope you can provide some ideas.

Javascript html php
Oct.09,2021

according to your question, your current js code is to search the data on the current page and then it will not conform to the data Filter, so it must only be on the current page of Filter. If you want to achieve what you said to search in the full table, you need to redirect to this route and query the data again with parameters to return it to the front end, so you can get all the data you want.
Let's briefly talk about two methods. 


$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

the second method, if you do not want the page to jump to reload the data, you can consider using datatable to render the data, which can also achieve the effect you said.

< H2 > Thank you for inviting < / H2 >
  • first of all, here are two functions, default display and paging,
  • the display of search results is another function. As for the paging of the search, it has nothing to do with the default display.
< H2 > ideas: < / H2 >
    After
  • users enter the search content, they can submit the form and jump to the search results page to show the search results based on keywords. If there is a lot of data, there will be paging.
  • if it is a single-page application, it is even easier. After the user enters the content, ajax, fetch and other keywords are submitted to the background to return the data, replace the default data, and display the search results.

Previous: Some problems encountered in the implementation of vue-cli packaging one code and sharing multiple projects

Next: How to ensure the atomicity of the program?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea1a17-1b6f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea1a17-1b6f.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?