JTe
New Member
Here is a way to have drop down sorting of the 'Above' filters. Many modern search forms have an easy-to-user way to filter the search results. Here we will add a drop down option list on the bottom of the filters filed.
You can freely add filters to the list as long as elements you are using are accessible for your list. To add a sorting element add the element ID as an orderby value and the sorting direction (asc or desc) as an orderdir value.
Make the filter to trigger with a submit button, configure the filters above the list and enable single ordering:
Add the following (using your element IDs, directions, and titles:
Create a list java script file for your list:
That should do it! Hopefully this will be useful for somebody. I might also later on add it to the wiki.
You can freely add filters to the list as long as elements you are using are accessible for your list. To add a sorting element add the element ID as an orderby value and the sorting direction (asc or desc) as an orderdir value.
Make the filter to trigger with a submit button, configure the filters above the list and enable single ordering:
Remember also to disable all element ordering, otherwise ordering can get totally unpredictable:Set in list settings [Details] -> [Filters] -> [Filter trigger] to “Submit button”.
Set in list settings [Details] -> [Filters] -> [Filters] to “Above”.
Set in list settings [Details] -> [Advanced] -> [Enable single-ordering] to “Yes”.
Create an override of the bootstrap filter by copying the file:Set within your edit element -> [List view settings] -> [List settings] -> [Allow ordering] to "No".
to:components/com_fabrik/layouts/list/fabrik-filters-bootstrap.php
Starting after line 84:components/com_fabrik/views/list/tmpl/{your template}/layouts/list/fabrik-filters-bootstrap.php
HTML:
<input type="button" class="pull-right btn-info btn fabrik_filter_submit button"
HTML:
<select name="sortelement" id="sortelement" class="fabrikinput form-control inputbox input input-xlarge">
<option value='{"orderby":10,”orderdir":"asc”}’>Oldest date first</option>
<option value='{"orderby":11,”orderdir”:”desc”}’>Newest date first</option>
<option value='{"orderby":12,”orderdir”:”desc”}’>Latest changes first</option>
<option value='{"orderby":13,”orderdir":"asc”}’>User ids in alphabetical order</option>
<option value='{"orderby":14,”orderdir":"asc”}’>Towns in alphabetical order</option>
</select>
Adding these lines:components/com_fabrik/js/list-{your list number}.js
JavaScript:
Fabrik.addEvent('fabrik.list.loaded', function(list) {
var src = document.getElementById("sortelement")
src.addEventListener('input', function() {
sorting = JSON.parse(src.value);
list.form.orderby.value = sorting.orderby;
list.form.orderdir.value = sorting.orderdir;
});
});
That should do it! Hopefully this will be useful for somebody. I might also later on add it to the wiki.
Last edited: