• Hello Fabrik Community

    Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.

    Exciting times to be sure.

    The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section

    We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..

    Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.

Sorting data

  • Views Views: 19,514
  • Last updated Last updated:

Navigation

  • 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:

    1. Unsorted - no little arrow at the right of the column name
    2. Sorted ascending - a little down arrow at the right of the column name
    3. Sorted descending - a little up arrow at the right of the column name
    By clicking the column name, you cycle through these 3 sorting Options.


    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:
    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”.
    Remember also to disable all element ordering, otherwise ordering can get totally unpredictable:
    Set within your edit element -> [List view settings] -> [List settings] -> [Allow ordering] to "No".
    Create an override of the Bootstrap filter by copying the file:
    components/com_fabrik/views/list/tmpl/arkisto-Bootstrap/layouts/list/fabrik-filters-Bootstrap.php
    to:
    components/com_fabrik/views/list/tmpl/{your template}/layouts/list/fabrik-filters-Bootstrap.php
    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:
    components/com_fabrik/js/list-{your list number}.js
    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:
    Code:

    components/com_fabrik/js/list_{your list number}.js
    Place this code on it:

    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();
    });
    });
    });
Back
Top