-
New Commercial Services Section
We have now opened a commercial services section here on the forum for registered users. If you have a Fabrik project that you wish to have someone work on for you, post it under Help Wanted. If you are an application developer and wish to earn some money helping others, post your details under Fabrik Application Developers.
Both of these are unmoderated. It will be up to both parties to work out the details and come to an agreement.
-
Joomla 5.1
For running J!5.1 you must https://fabrikar.com/forums/index.php?wiki/update-from-github/ or include the new file manually https://fabrikar.com/forums/index.php?threads/joomla-5-1-and-fabrik-cannot-find-files-error.54473/post-285151 See also Announcements
Sorting data
- Views Views: 19,545
- Last updated Last updated:
-
Contents
Front end users
You can sort data in the table "view" by clicking on the underlined (clickable) name of that particular column. In order to be able to sort the designer of the form should have enabled first this option for that particular column (element) - see below.
There is a 3 state sorting:
- Unsorted - no little arrow at the right of the column name
- Sorted ascending - a little down arrow at the right of the column name
- Sorted descending - a little up arrow at the right of the column name
You can sort on several columns, any combination of ascending and descending, the most important sorting criteria is the leftmost.
Back end designers
In the column's (element's) properties, the "Table settings" tab from the right, the "Allow ordering" option should be set to "Yes". In order for the column to be visible in the table view the "Show in table" option should be set to "Yes". [link to the element properties article]
Ordering With The Querystring
You can effect the default ordering of the list by appending:
Code:
&order_by={full_element_name}&order_dir=desc
Replace {full_element_name} with the element name and you can specify the order_dir as either desc or asc.
You can also specify multiple orders, with a comma separated list of values
Code:
&order_by={element1},{element2}&order_dir=desc,asc
Add drop down sorting to list filters triggered by the 'Search' button
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:
Remember also to disable all element ordering, otherwise ordering can get totally unpredictable:
Create an override of the Bootstrap filter by copying the file:
to:
Starting after line 84:
[HEADING=tml]
<input type="button" class="pull-right btn-info btn fabrik_filter_submit button"
[/html]
Add the following (using your element IDs, directions, and titles:
[HEADING=tml]
<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>
[/html]
Create a list java script file for your list:
Adding these lines:
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;
});
});
Add drop down sorting to list filters triggered by selection of a sort option
Another variant: load result after change option.
Add this code in filter template or in pagination template.
[HEADING=tml]
<select name="sorting" id="sorting" class="fabrikinput form-control inputbox input">
<option value='{"orderby":element_id,"orderdir":"asc"}'>Price Asc</option>
<option value='{"orderby":element_id,"orderdir":"desc"}'>Price Desc</option>
</select>
[/html]
element_id - your sorting element.
Create a List JavaScript file for your list:
Place this code on it:Code:
components/com_fabrik/js/list_{your list number}.js
requirejs(['fab/fabrik'], function() {
Fabrik.addEvent('fabrik.list.loaded', function(list) {
var src = document.getElementById("sorting");
var orderby = list.form.orderby.value;
var orderdir = list.form.orderdir.value;
var sorting = '{"orderby":' + orderby + ',"orderdir":"' + orderdir + '"}';
src.value = sorting;
src.addEventListener('input', function() {
sorting = JSON.parse(src.value);
console.log(sorting);
list.form.orderby.value = sorting.orderby;
list.form.orderdir.value = sorting.orderdir;
list.submit();
});
});
});