How Do You Get a Table in HTML/Javascript to Display Only The First n (or 10) Rows?

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

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:

Leave a comment

Your email address will not be published. Required fields are marked *