How to write sort function for List.js?

Question

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

St3an · Accepted Answer · 2017-05-11 08:56:31Z

1

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

answered May 11, 2017 at 8:56

St3an

7911 gold badge7 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hubert Kubiak Over a year ago

I think it would indeed put the 'PLN' records first but I'm afraid it has also side effects. For example, 'NGN' would go before 'JPY' in this case. I just need the 'PLN' exception.

Community · Accepted Answer · 2017-05-23 11:47:06Z

1

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

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered May 11, 2017 at 12:00

Hubert Kubiak

6451 gold badge11 silver badges36 bronze badges

Collectives™ on Stack Overflow

How to write sort function for List.js?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related