Javascript-web page Implementation of data filtering, sorting and other functions of the idea

The backend reads a result set from the database, is stored in the array, and then appears in the front-end table, but the table needs to be dynamically displayed based on the user's filtering, sorting, and so on.

The idea I can think of is:

1: Data that is read from the database in the backend is passed to the JavaScript array, using JavaScript to manipulate the array based on the user's selection (manipulating the data on the front end)
2: Embed PHP code in HTML, manipulate arrays with PHP (manipulate data on back end)
3: According to the user's choice every time in the database operation and read the required data, return to the front page (operating data in the database)

No more than 1000 records of the data being manipulated
My backend language PHP (thinkphp framework)

Ask:

1: I hope that the predecessors can analyze the advantages and disadvantages of each solution, to a most suitable way of thinking!
2: If you use JS, how to transfer data to JS?

Reply content:

The backend reads a result set from the database, is stored in the array, and then appears in the front-end table, but the table needs to be dynamically displayed based on the user's filtering, sorting, and so on.

The idea I can think of is:

1: Data that is read from the database in the backend is passed to the JavaScript array, using JavaScript to manipulate the array based on the user's selection (manipulating the data on the front end)
2: Embed PHP code in HTML, manipulate arrays with PHP (manipulate data on back end)
3: According to the user's choice every time in the database operation and read the required data, return to the front page (operating data in the database)

No more than 1000 records of the data being manipulated
My backend language PHP (thinkphp framework)

Ask:

1: I hope that the predecessors can analyze the advantages and disadvantages of each solution, to a most suitable way of thinking!
2: If you use JS, how to transfer data to JS?

The first scenario:
Suitable for scenes with small data volume and fast page response
Advantages:
1, only need to get data from the server once, the pressure on the server is small
2, the user all operations in the front-end, no longer communicate with the server, experience better
Disadvantages:
1, JS operation data and then splicing HTML, or template engine, or MVVM is relatively more than the backend directly generated HTML is a bit more trouble, but now this should not be a disadvantage

The second scenario:
The second scenario is also suitable for scenarios where the data volume is small, which differs from the first scenario in the following ways:
1, the user every time from the server to communicate
2, the generation of HTML relative to the developer is more convenient
Compared to the two scenarios, it is recommended to use the first

The third scenario:
When the data volume is large, it gets from the database in batches.
The final display in the foreground is nothing more than PHP generated HTML or JS generated HTML

Data transfer to JS, two ways:
1, when the page generated, by the way the data to pass in
2, through the Ajax to call

If the result set is within thousands of lines. Recommended Https://github.com/Mottie/tablesorter

1. Example of a simple sort: http://mottie.github.io/tablesorter/

2. Example of a simple filter: http://mottie.github.io/tablesorter/docs/example-child-rows-filtered.html

3. All the examples: Http://mottie.github.io/tablesorter/docs/index.html#Demo

