CODEWITHSUNDEEP
javascriptsortinglist.js
Hubert Kubiak
Hubert Kubiak

Reputation: 635

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? :)

Upvotes: 1

Views: 2639

Answers (2)

Hubert Kubiak
Hubert Kubiak

Reputation: 635

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

Upvotes: 1

St3an
St3an

Reputation: 806

try using alphabet feature of List.js, smthg like :

var options = {
    valueNames: ['currency-td', 'accountNo-td', 'used-td']
};

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

accountsList.sort("currency-td", { alphabet: "PLNABCDEFGHIJKMOQRSTUVXYZplnabcdefghijkmoqrstuvxyz" }
);

This is documented here http://listjs.com/api/#sort

Upvotes: 1

Related Questions