Problem scenario
You have a web page with a table. It uses HTML and Javascript. You want only a sub-portion of the rows to be displayed and allow the user from the front-end to click a drop down menu to see more results. What should you do?
Possible Solution #1
Have two blocks in the .html file. Have the top one define a function that accepts a parameter and filters the table results if/when called. The parameter will accept a variable (e.g., a Boolean). The function will have conditional logic based on this Boolean value.
Have the lower block invoke the function. This function can be invoked with a drop down menu (associated with an event from the front-end of the web page). This function can be invoked in the Javascript code embedded in the .html file or in a separate .js file (referenced in the .html file).
Possible Solution #2
Use DataTables (the JQuery plugin) in Javascript code. HTML can have embeddeed Javascript (between tags) or refer to a separate .js file.
"DataTables is a powerful Javascript library for adding interaction features to HTML tables." Taken from https://www.c-sharpcorner.com/article/create-datatable-in-jquery/
The Javascript code can have stanzas such as these:
…
bpaginate: true,
bLengthChange: true,
…You can read more about them here. Here is an example of how to do it: https://www.programmersought.com/article/44601760749/