Implement dynamic object lists using HTMX

[jeremystretch]

NetBox version

v3.1.1

Feature type

New functionality

Proposed functionality

Currently, moving to the next page of an object table or reordering by a different column requires a complete page refresh. This issue proposes employing HTMX in an opportunistic manner so that only the table itself needs to be returned.

For example, navigating to /dcim/sites/ will render a complete page, including the first page of the sites table, as NetBox does today. However, selecting the next page or a column header will re-render only the <table> element within the page. Using HTMX, the table is rendered entirely on the backend; no additional Javascript is required on the frontend. This concept can be extended to include the "quick find" search box as well.

I've experimented with a proof of concept, and implementing this seems to require shockingly little adjustment, and no additional Javascript. I believe this can be done in a way that's completely backward-compatible: All existing links (e.g. to filtered results) will continue to work.

The key parts of this implementation include:

• Extending the object list view to detect HTMX requests and return only the relevant HTML (i.e. rendered tables)
• Extending the table and paginator templates to add HTMX attributes to the the relevant links
• Some general cleanup of the table template structure

Use case

Rendering only the necessary page components, as opposed to the entire page, reduces overhead and load time, and makes for a more seamless user experience.

Database changes

No response

External dependencies

No response