Search code examples
javascriptsortinglist.js

How to write sort function for List.js?


I use list.js to make a simple sorting of my table's data. Sorting functionality works fine but I want to modify it's initial behaviour. When an user sees the table for the first time he/she should have records with some certain value in one column (with my local currency in this example) put to the top. Just initially, later sorting should work in a standard way.

Let's see the code:

<table id="accountsList">
<thead>
    <tr>
        <th scope="col" class="sort" data-sort="currency-td" aria-role="button"><span>Currency</span></th>
        <th scope="col" class="sort" data-sort="accountNo-td" aria-role="button"><span>Account number</span></th>
        <th scope="col" class="sort td-centered" data-sort="used-td" aria-role="button"><span>Used</span></th>
    </tr>
</thead>
<tbody class="list">
    <tr>
        <td class="currency-td">EUR</td>
        <td class="accountNo-td">53106010151036926643566665</td>
        <td class="used-td td-centered">
            <input type="checkbox" checked>
        </td>
    </tr>
     <tr>
        <td class="currency-td">PLN</td>
        <td class="accountNo-td">83106010151036926643522665</td>
        <td class="used-td td-centered">
            <input type="checkbox">
        </td>
    </tr>
     <tr>
        <td class="currency-td">PLN</td>
        <td class="accountNo-td">59996010151036926643566665</td>
        <td class="used-td td-centered">
            <input type="checkbox" checked>
        </td>
    </tr>
     <tr>
        <td class="currency-td">USD</td>
        <td class="accountNo-td">33106010151036999643566675</td>
        <td class="used-td td-centered">
            <input type="checkbox">
        </td>
    </tr>
</tbody>

<script type="application/javascript">
$(document).ready(function(){
var options = {
    valueNames: ['currency-td', 'accountNo-td', 'used-td']
};

var accountsList = new List('accountsList', options);

accountsList.sort("currency-td", {
    order: "desc"
});
});
</script>

The only thing I'd like to do is to put all the records with the 'PLN' currency at the top at the beginning. Why I don't just order them the way I want in HTML the way I want and later enable sorting, without initial sorting? Because in fact, these records are generated by PHP (I simplified the code above, just showing an example of generated HTML) and I can't predict what data I will get.

I need to write a sorting function in this place:

accountsList.sort("currency-td", {
    order: "desc",
    sortFunction: function () {}
});

Do you have any ideas? :)


Solution

  • I figured it out this way:

    accountsList.sort('currencyTd', {
            order: 'asc',
            sortFunction: function (a, b) {
                if ((a.currencyTd === 'PLN') != (b.currencyTd === 'PLN')) {
                    return a.currencyTd === 'PLN' ? 1 : -1;
                }
                return a.currencyTd > b.currencyTd ? 1 :
                       a.currencyTd < b.currencyTd ? -1 : 0;
            }
        });
    

    The solution suggested in: https://stackoverflow.com/a/17254561/5420497