tablesorter custom charset :: Blog

tablesorter custom charset

Today I stood before a decision - how to make table sort fast (dirty or not). Yes, AJAX is always an option, but I was kinda lazy to go that way today. Google > tablesorter jQuery plugin. Let's see, yes, pretty neat. I was sceptical though - will this work with default EN chars or will this work generally. Well, it didn't, but since it was considered quite easy I decided to make this right.

The first thing to start with - don't forget to use the proper META tag:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

The second step is to include my updated jquery.tablesorter.js file. I downloaded this file today - 11.2.2009. With further versions - you may need to update your tablesorter js source file yourself. Maybe it'll be packed in future versions already, I can't tell ;) Anyway, my changes are really simple and there are just a few of them.

My changes of the js source

1. The defaults object

this.defaults = {
    cssHeader: "header",
    cssAsc: "headerSortUp",
    cssDesc: "headerSortDown",
    sortInitialOrder: "asc",
    sortMultiSortKey: "shiftKey",
    sortForce: null,
    sortAppend: null,
    textExtraction: "simple",
    parsers: {},
    widgets: [],       
    widgetZebra: {css: ["even","odd"]},
    headers: {},
    widthFixed: false,
    cancelSelection: true,
    sortList: [],
    headerList: [],
    dateFormat: "us",
    decimal: '.',
    debug: false,      //comma added by kvaQ ;)
 
    //added by kvaQ - Slovak chars
    chars: 'aA&aacute;&Aacute;&auml;bBcCčČdDďĎeE&eacute;&Eacute;fFgGhHiI&iacute;&Iacute;jJkKlLĺĹľĽmMnNňŇoO&oacute;&Oacute;&ocirc;pPqQrRŕŔsS&scaron;&Scaron;tTťŤuU&uacute;&Uacute;vVwWxXyY&yacute;&Yacute;zZžŹ'
};

2. The loop in the multisort method

for(var i=0; i < l; i++) {
 
    var c = sortList[i][0];
    var order = sortList[i][1];
    var s = (getCachedSortType(table.config.parsers,c) == "text") ? ((order == 0) ? "sortText" : "sortTextDesc") : ((order == 0) ? "sortNumeric" : "sortNumericDesc");
 
    var e = "e" + i;
 
    dynamicExp += "var " + e + " = " + s + "(table,a[" + c + "],b[" + c + "]); ";      //added by kvaQ - I added => "table," in front of "a["
    dynamicExp += "if(" + e + ") { return " + e + "; } ";
    dynamicExp += "else { ";
}

3. The sortText and sortTextDesc methods edit

function sortText(table,a,b) {   //this method was edited by kvaQ
    if (table.config.chars != '')
    {
        return sortTextCustom(table,a,b);
    }
    else
    {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    }
};
 
function sortTextDesc(table,a,b) {   //this method was edited by kvaQ
    if (table.config.chars != '')
    {
        return (sortTextCustom(table,a,b) * (-1));
    }
    else
    {
        return ((b < a) ? -1 : ((b > a) ? 1 : 0));
    }
};

4. The sortTextCustom method

function sortTextCustom(table,a,b)   //this method was added by kvaQ
{
    var l1  = a.length;
    var l2  = b.length;
 
    var len = (l1 < l2)? l1 : l2;
 
    for (var i = 0; i < len; i++)
    {
        var ca = a.charAt(i);
        var cb = b.charAt(i);
 
        var p1 = table.config.chars.indexOf(ca);
        var p2 = table.config.chars.indexOf(cb);
 
        if (((p1 >= 0) && (p2 >= 0)) || (ca == cb))
        {
            if (p1 != p2)
            {
                return (p1 < p2)? -1 : 1;
            }
        }//if (((p1 >= 0) && (p2 >= 0)) || ( ...
        else
        {
            return ((ca < cb) ? -1 : ((ca > cb) ? 1 : 0));
        }
    }//for
 
    return ((l1 < l2) ? -1 : ((l1 > l2) ? 1 : 0));
};//sortTextCustom

Using updated tablesorter

You can set your charset as follows:

$('table_selector').tablesorter({
    chars: 'aAbB...'
});

To make tablesorter work as before my updates - set chars attribute to an empty string "":

$('table_selector').tablesorter({
    chars: ''
});

I'm aware of the fact you wouldn't really do this since you are looking for custom charset altered tablesorter, but to make this complete ...

By default, the chars attribute is set to Slovak charset (rings a bell? :)). That means that if you dont set the chars attribute at all, this charset will be used.

How is the sorting performed (or how to set your charset)

My sorting focuses on chars given in the chars attribute. The order of the chars attribute is THE order. Create this attribute as a simple string that consists of chained chars - which u wish to have special treated (as opposite to default JavaScript strings sorting) - you have an example how to do this above - step 1. The defaults object. There's only one thing to have in mind - only the chars in chars attribute are special treated, thus their indexes are compared. The engine loops through the strings chars from start till ...
Results of this engine:

1. Strings equal till some point -> first is the shorter one
2. Strings unequal at some point -> the lesser is the first one of course
3. Char NOT(!) found within the chars attribute - combined with the same case in the second string
a) these chars are equal -> continue
b) they differ -> sort these strings by default JavaScript string sorting
4. Char NOT(!) found within the chars attribute - combined with char found(!) within the chars attribute in the second string -> sort these strings by default JavaScript string sorting

And that's pretty much everything there is, njoy ;)

Peter Rossa