1. "Fabrik 4" helpers needed!

    You are invited to join other community members active in coding, maintaining and improving Fabrik. Please visit https://fabrik.help for more information!
    Dismiss Notice

Sorting data

May 26, 2021
Sorting data

  • Front end users (top)


    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 (top)


    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 (top)


    You can effect the default ordering of the list by appending:

    Code (Text):

    &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 (Text):

    &order_by={element1},{element2}&order_dir=desc,asc
     

    Add drop down sorting to list filters triggered by the 'Search' button (top)


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

    <input type="button" class="pull-right  btn-info btn fabrik_filter_submit button"
     
    Add the following (using your element IDs, directions, and titles:
    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>
     
    Create a list java script file for your list:
    Adding these lines:

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

    Add drop down sorting to list filters triggered by selection of a sort option (top)


    Another variant: load result after change option.
    Add this code in filter template or in pagination template.
    HTML:

    <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>
     
    element_id - your sorting element.
    Create a list javascript file for your list:
    Code (Text):

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

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