starred/netbox
1
0
Fork 0
mirror of https://github.com/netbox-community/netbox.git synced 2026-01-11 21:10:29 +01:00
Code Issues 273 Packages Projects Releases 10 Wiki Activity

Implement dynamic object lists using HTMX #5769

New Issue
Closed
opened 2025-12-29 19:32:27 +01:00 by adam · 0 comments
adam commented 2025-12-29 19:32:27 +01:00
Owner
Copy Link

Originally created by @jeremystretch on GitHub (Dec 13, 2021).

Originally assigned to: @jeremystretch on GitHub.

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

Originally created by @jeremystretch on GitHub (Dec 13, 2021). Originally assigned to: @jeremystretch on GitHub. ### 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](https://htmx.org/) 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_
adam added the status: acceptedtype: feature labels 2025-12-29 19:32:27 +01:00
adam closed this issue 2025-12-29 19:32:28 +01:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
beta
breaking change
complexity: high
complexity: low
complexity: medium
needs milestone
netbox
pending closure
plugin candidate
pull-request
Mirrored from GitHub Pull Request
 severity: high
severity: low
severity: medium
status: accepted
status: backlog
status: blocked
status: duplicate
status: needs owner
status: needs triage
status: revisions needed
status: under review
topic: GraphQL
topic: Internationalization
topic: OpenAPI
topic: UI/UX
topic: cabling
topic: event rules
topic: htmx navigation
topic: industrialization
topic: migrations
topic: plugins
topic: scripts
topic: templating
topic: testing
type: bug
type: deprecation
type: documentation
type: feature
type: housekeeping
type: translation
No Label status: accepted type: feature
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/netbox#5769
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?