How to implement data filtering and sorting on javascript-web pages

The backend reads a result set from the database, stores it in an array, and displays it in the front-end table. However, the table needs to be dynamically displayed based on user filtering and sorting. The thought I can think of is: 1. Transfer the data read from the database on the backend to the javascript array, using java... the backend reads a result set from the database, stores it in an array, and displays it in the front-end table. However, the table needs to be dynamically displayed based on user filtering and sorting. The thought I can think of is:

1: transfer the data read from the database to the javascript array at the backend, and use javascript to operate the Array Based on the user's selection (operate data on the front end)
2: Embed php code in html and use php to operate arrays (operate data on backend)
3: according to the user's choice, each operation in the database and read the required data, return to the front-end page (operate data in the database)

The operated data cannot exceed 1000 records
My backend language PHP (thinkphp Framework)

Q:

1: I hope our predecessors can analyze the advantages and disadvantages of each solution and give them the most appropriate ideas!
2: if Javascript is used, how do I transmit data to js?

Reply content: the backend reads a result set from the database, saves it in the array, and then displays it in the front-end table. However, the table needs to be dynamically displayed based on user filtering, sorting, and other operations. The thought I can think of is:

1: transfer the data read from the database to the javascript array at the backend, and use javascript to operate the Array Based on the user's selection (operate data on the front end)
2: Embed php code in html and use php to operate arrays (operate data on backend)
3: according to the user's choice, each operation in the database and read the required data, return to the front-end page (operate data in the database)

The operated data cannot exceed 1000 records
My backend language PHP (thinkphp Framework)

Q:

1: I hope our predecessors can analyze the advantages and disadvantages of each solution and give them the most appropriate ideas!
2: if Javascript is used, how do I transmit data to js?

Solution 1:
Suitable for scenarios with small data volumes and fast page response
Advantages:
1. You only need to obtain data from the server once, which puts less pressure on the server.
2. All user operations are performed on the front-end, and there is no need to communicate with the server. The user experience is better.
Disadvantages:
1. js operations on data and then splicing html, or template engine, or MVVM, are relatively more difficult than generating html directly at the backend, but now this should not be a disadvantage.

Solution 2:
The second solution is also suitable for scenarios with small data volumes. The difference between it and the first solution is:
1. users need to communicate with each other from the server
2. Generating html is more convenient for developers.
Compared with the two solutions, we recommend that you use the first one.

Solution 3:
It is suitable for obtaining data from the database in batches when the data volume is large.
The final display at the front end is nothing more than html generated by php or html generated by js

Data is transmitted to js in two ways:
1. When a page is generated, data is transmitted
2. Use ajax to call

If the result set is within 1 million rows. Recommended https://github.com/Mottie/tablesorter

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

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

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