Implement dynamic object lists using HTMX #8057
Description
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