HTMX Guides

Adding API parameters like filters and sorting is simple using the OINO.cloud command line parameters. You can for example add a dropdown for the options and trigger an API refresh when it changes.

<select class="form-control" id="filterActive" onchange="htmx.trigger('#apis-rows', 'OINODbApiTrigger-apis')">
<option value="(active)-eq(1)" selected="">Show only active</option>
<option value="">Show also inactive</option>
</select>
                        

Here the select value is a static filter-parameter and selecting a value will trigger a page load HTMX-event.

<tbody id="apis-rows" 
    hx-get="/api/v1/DevAccount/apis" 
    hx-vals="js:{oinosqlfilter:document.getElementById('filterActive').value}" 
    hx-trigger="load, OINODbApiTrigger-apis from:body" 
    hx-target="#apis-rows" 
    hx-swap="innerHTML" 
    hx-indicator="this">
</tbody>
                        

When the tbody event triggers it will fetch the value from the select and include the request query parameters.