TinyTable JavaScript Table Sorter – 2.5KB

Javascript 298 responses so far

Table Sorter

This updated table sorter script is easy to use and feature packed at only 2.5KB. New features include column highlighting, optional pagination, support for links, and date/link parsing. A few other features are alternate row highlighting, header class toggling, auto data type recognition and selective column sorting. More updates will follow soon.

To initialize a table sorter follow the pattern below:

var sorter = new TINY.table.sorter('sorter');
sorter.head = 'head'; //header class name
sorter.asc = 'asc'; //ascending header class name
sorter.desc = 'desc'; //descending header class name
sorter.even = 'evenrow'; //even row class name
sorter.odd = 'oddrow'; //odd row class name
sorter.evensel = 'evenselected'; //selected column even class
sorter.oddsel = 'oddselected'; //selected column odd class
sorter.paginate = true (false); //toggle for pagination logic
sorter.pagesize = 15 (20); //toggle for pagination logic
sorter.currentid = 'currentpage'; //current page id
sorter.limitid = 'pagelimit'; //page limit id

Before initialization, a new table sorter object must be created. The parameter taken by TINY.table.sorter is the variable name used for the object. The object.init function takes 2 parameters: the id of the table and the initially sorted column index (optional). If you want to exclude a column from sorting add class=”nosort” to the appropriate table header. Table styling is completely customizable via the CSS.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here for the demo.

Click here to download the source code.

The following two tabs change content below.
Scriptiny is a web development blog featuring fresh articles on JavaScript, AJAX, CSS, XHTML, PHP, Photoshop and more.

Latest posts by Scriptiny Editorial (see all)

  • Koen

    I’m using firefox with the Noscript plugin. I can turn Javascript support off in the click of a button, and I noticed that when viewing your demo without Javascript active, only 50 of the 100 entries were in there.

    Now, a browser without Javascript these days is about as common as air on the moon, but wouldn’t it be better if the full 100 were visible when Javascript isn’t active?

  • @Koen – There are only 50 entries.

  • I’m using tablesorter(plugin) with jquery. But this looks awesome only 2,5kb! Maybe for the next version of my product I will consider using this library. Thanks

  • Frederik


    wil you incorperate a search feature in the future?

  • Pingback: My Bad Attitude » TinyTable JavaScript Table Sorter()

  • Pingback: JavaScript Table Sorter - Web Development Blog()

  • @Frederik – Absolutely, it is already in the works.

  • ShaggyStyle

    It looks great… when is the jQuery version ready? 😛

  • EricB

    Great work on this, Michael! Thanks for sharing!

  • Csaba

    Amazing script. It would be cool to have this combined with Ajax support, because there are lot of admins with huge number of data. e.g. 10.000 items in DB table.

  • Pingback: Ordenar tablas con javascript « In Nomine Pixel()

  • Federico Grilli

    Great! Superbe! Prima (de)! Ganzissima (it)!

  • Pingback: Neat Lightweight Javascript Table Sorter | Edmonds Commerce Blog()

  • Hi nice little script

    please tell me that isn’t real data in the demo tho!

  • wow, just some time back i was searching for a similar script on google and suddenly i happened to check delicious… an here i am…..

    thanks michael, thanks delicious 🙂

  • Pingback: Recursos: TinyTable - Tabela Javascript de fácil utilização e com paginação | Criatividade Visual()

  • @Csaba – AJAX support will be part of the next release along with search and a couple other options.

    @edmondscommerce – No, of course it is not real information. I used a random data generator.

  • This plugin has any domentation? Thanks for share!

  • volkan

    great sortable for tables.

    internationalization for sorting would be nice for future versions.

  • haven’t look detail yet, but demo looks great!!bookmarked and subscribed for updates.

  • Pingback: JavaScript Table Sorter - TinyTable()

  • chad

    I notice you use a background image for the arrows and then CSS to rotate between ascending and descending. Any chance you can code in a textual equivalent for JAWS users that also rotated between the words “Ascending” and “Descending”? You can even make the words invisible by wrapping them in CSS that moved them off the screen (left: -5000px; position: absolute;). This way your table (which is great!) would be accessible to all users, not just visual users. 🙂

  • Awesome! This looks great, I can’t wait to try it out!
    This post is will definately be bookmarked

  • Pingback: Top Gossips » Blog Archive » Table Sorting With JavaScript: TinyTable()

  • Laurent

    for info the initial pagination logic parameter is sorter.pagesize instead of sorter.pagsize
    therefore you can have the good initial value 🙂

  • @Sanbor – More complete documentation will be available when Scriptiny launches.

    @volkan – Thank you for the suggestion, it is now on my list.

    @Laurent – Thanks for the catch, I have updated the post.

  • Deb Fahey

    How about table filtering based on column values? For instance, instead of search, you might support selection of data based on a value picked from a dropdown list (prebuilt filter of unique values from one of the columns). it seems like filters are gaining in popularity.

    Nice tool!

  • How many table rows do you think it can handle before it would fall over or load very slowly?

  • @Deb – Thanks for the suggestion, I will keep that in mind for the next version.

    @Derek – It really depends on a few factors… the speed of the client computer, the browser type and version, the complexity of the table, etc. In most scenarios I would not exceed a couple hundred hundred rows. Past that point it would make more sense to go server-side/AJAX.

  • scalar

    I just wan’t to say thanks a lot 🙂 .. this is very useful for my current project .

  • zoggy

    I tried out your script and I do like it, I actually have 8 different instances on the same page. One thing I notice is that it does not sort Date correctly in the (yyyy-mm-dd) format due to it sorting the numbers up to the – marks for each part.

    sample of the data sorted asc:

    Any idea how to fix it?

  • @zoggy – The Date.parse method does not accept the format in your example to convert into date objects. You could add the logic in the cp function to replace dashes but I am reluctant to add anything else in the function to try and keep the processing time down. I will take a look at it and do some testing.

  • Pingback: An Awesome JavaScript Table Sorter | TinyTable | Magazine | Resources | Fish in the River()

  • zoggy

    I searched around for sorting using javascript in the SQL date format (YYYY-MM-DD hh:mm:ss) where the time part is optional and I stumbled across:

    myParseDate = function (oData) {
    if (oData === undefined) return oData;
    var parts = oData.split(‘ ‘);
    var datePart = parts[0].split(‘-‘);
    if (parts.length > 1) {
    var timePart = parts[1].split(‘:’);
    return new
    } else {
    return new Date(datePart[0],datePart[1]-1,datePart[2]);

    Hope this helps anyone else that ran into my issue.

  • John

    Nice script. Not sure if I’m doing something wrong, but for some reason the nosort column feature does not work in column 2. I can add the class=”nosort” to any other column. Keep up the good work!

  • Everything works fine, except the “entries per page” selector. It should reset itself on page reload. For eg: if I choose to display 5 records, and next time I refresh the page, it’d display all the records, but the selector continues to display 5.

  • Carl

    I keep getting “sorter is not defined : line 18” from script.js , any ideas? The only thing potentially “weird” about how I am using your script is it is on a table that gets generated from an AJAX request. That said I am using the table structure from the example almost exactly.(same class name and id)

  • Great work!.
    I’ve just created my own grid using jquery and some native javascript, but maybe it will be replaced by this one. But when do you plan to support ajax json? a possible day? I’ve implemented it in my own grid, it’s quite simple.

  • carlos

    @Vladimir, it’s not a library it’s plain javascript and stop using js libraries: THEY SUCK

  • Gary

    This is fantastic. I am trying to add a table that is very wide (horizontal) with lots of columns. I would like to be able to have a horizontal scroll bar with this. Any idea how I might manipulate things to accomodate?


  • Dimitris

    great work once again

    i miss one thing though, especially when dealing with dates you often want the default sorting to be in reverse order, is there a way to do this?
    could be done by adding a “reverse” class to the header?

    also, when adding a second class on the header apart from “nosort” (say for styling purposes) the element is no longer treated as nosort

  • How do you implement this to sort multiple tables on teh same page ?

  • Karel

    Amazing script! Is it possible to put the default sorting of a field containing date AND time in reverse order? For example: 19-03-2009 00:51:13 (DD-MM-YYYY HH:MM:SS). Can’t figure that one out…

    Keep up the good work, Michael.

  • Carl

    If anyone comes across my above issue with ajax, I fixed it by simply removing the var from
    “var sorter = new TINY.table.sorter(“sorter”);”
    now reads
    “sorter = new TINY.table.sorter(“sorter”);”

  • How do you implement this to sort multiple tables on teh same page ?

    Como implemento para multiples Tablas

    <script type=”text/javascript”>
    var sorter = new TINY.table.sorter(“sorter”);
    sorter.head = “head”; //header class name
    sorter.asc = “asc”; //ascending header class name
    sorter.desc = “desc”; //descending header class name
    sorter.even = “evenrow”; //even row class name
    sorter.odd = “oddrow”; //odd row class name
    sorter.evensel = “evenselected”; //selected column even class
    sorter.oddsel = “oddselected”; //selected column odd class
    sorter.paginate = true (false); //toggle for pagination logic
    sorter.pagesize = 15 (20); //toggle for pagination logic
    sorter.currentid = “currentpage”; //current page id
    sorter.limitid = “pagelimit”; //page limit id

  • Chris

    I tried the tip from angiedelgado to get multiple tables working on one page, labeled the tables with id=”table1,2,…” and added sorter.init(”table1,2…”,1) but now nothing is sortable. anyone can help?

  • This looks like a nice way to sort a table. Very lightweight also. I think I am going to test it this weekend thanks!

  • Pingback: TinyTable - Script de tan solo 2.5KB para crear Tablas personalizadas()

  • I would like to make a mouseover background-color on the rows, how is that possible?

  • Pingback: Webmasterkit.info » TinyTable Javascript()

  • Websfear

    I really like what you have done.

    Since I can’t see any documentation, is there a way to open to a specific page? The problem is that I have a link in each row to go to a detail page, and after going to the detail, having a way back to the specific page that the link was on.

  • upandbeyond

    Thank you very much for this useful table sorter!

    I am having trouble getting the table to start out with a specific row sorted in descending order. I added class=”desc” to the header row for the column I want to sort descending, but it doesn’t work. When the object is init’ed, the DOM is modified and the class=”desc” is dropped and changed to class=”head” instead. Any ideas?


  • Sky

    Hi Michael,

    Nice little script you got. Just want to ask a question or two.
    Do you have the unpacked version available? I would love to see it.

    Also, how soon would multi-lingual support become available? Especially, in my case, for asian characters?

    Your help is much appreciated.

  • Sky

    ** When I say unpacked version, I mean the version with the full variable names and possibly notes you might have written***

  • websphere

    Specific page update…

    Well I did figure out a way of dooing it, but it isn’t very elegant.

    I placed a for loop in my onload function to repeatedly call sorter.move(i);

    I would have been nicer if the move function took anything other than -1 an 1.

  • Pingback: TinyTable - Script de tan solo 2.5KB para crear Tablas personalizadas | Programming Blog()

  • jorge torres

    Great script !
    Sadly it does not sort dates correctly in the dd/mm/yyyy format.

    Sample output:

    Thanks for sharing !

  • exer

    That’s a pretty nice script I use now for my projects. But i’ve got a problem. How do you sort a column descading at initialization?

    thx for help

  • Pingback: Common Sense Atheism » 400+ Atheism vs. Theism Debates()

  • Thank you for thisd very nice script, I use it on my site.

    To make a mouseover background-color (and color) on the rows, you can use the css:

    .sortable tr:hover {background-color: #99F; color:black;}
    .sortable tr:hover td {background-color: #99F; color:black;}

  • Lee

    This script is great. I would love to use it in some projects but the fact that you can’t specify a date format on a column is a show-stopper. Dates aren’t always in the format of MM/dd/yyyy.

    Thanks for the script though…your work is appreciated.

  • Pingback: TinyTable - Script chiquito para crear Tablas personalizadas « Norte Creativo - Otro blog más de WordPress()

  • zoggy

    To make this script work with the YYYY-MM-DD format (mysql date) just change these line in the script.js which is in the cp function.

    i=Date.parse(f); n=Date.parse(c);
    i=f.replace(/-/g,”); n=c.replace(/-/g,”);


  • Lance

    How could this be altered to sort in descending order rather than ascending upon initialization?

  • zoggy

    in case anyone ran into my situation with needing items that start with _ to be sorted above numerical (0-9) items here you go.

    example data: 300 , _test , test2 , test
    would sort to become: _test, 300, test, test2

    in the cp function, right above ‘return g>h?1:(g<h?-1:0)’ add:
    if(i.match(/_/)) { g=g.replace(/_/,’!’); }
    if(n.match(/_/)) { h=h.replace(/_/,’!’); }

    What this does is replace the first _ found in the string with ! which comes before 0 in sorting. I’m sure there is a better fix but this works just fine.

  • Claudia

    thanks for this Excelent script but,
    How can I implement multiples tables in the same page?

  • acctman

    Hi is there a new version coming out? I ask because I’m about to use this table for a user mail system and wanted to know before I started writing the code

  • John

    I really like that script. It is really efficient and simple.
    But is there away to use multiple tables on one page?
    If not it would be a great addition for next version I think. thx

  • Tony

    Hi, with the sorter option selected at 10 on page load and when click to go to the next page (arrow at bottom) and then click a link in the next page, when I click the BACK button in IE 7 the page loads with it’s initial 10, not where I left off in the next page. Is there a way to keep it at the last page? FireFox this works okay.

  • acctman

    there seems to be a problem when having the script display anything other than 20 per page. if you set <option value=”10″ selected=”selected”>10</option> it still shows 20 when the page is loaded.

  • Pingback: TinyTable - JavaScript Bibilothek/Widget | tagdocs.de()

  • zoggy

    @Claudia and John – Multiple tables on the same page.

    in the javascript script section where you define your table id and var just make it unique, example of 2 tables that I have on the same page:

    var sorter1 = new TINY.table.sorter(“sorter1”);
    sorter1.head = “head”;
    sorter1.asc = “asc”;
    sorter1.desc = “desc”;
    sorter1.even = “evenrow”;
    sorter1.odd = “oddrow”;
    sorter1.evensel = “evenselected”;
    sorter1.oddsel = “oddselected”;
    sorter1.paginate = false;

    var sorter2 = new TINY.table.sorter(“sorter2”);
    sorter2.head = “head”;
    sorter2.asc = “asc”;
    sorter2.desc = “desc”;
    sorter2.even = “evenrow”;
    sorter2.odd = “oddrow”;
    sorter2.evensel = “evenselected”;
    sorter2.oddsel = “oddselected”;
    sorter2.paginate = false;

    just make sure you have id=”table1″ for one table, and id=”table2” for the next.. enjoy!

  • alaguraja

    how to set default selected table head.And then if after last page how to disable achor tag

  • Pingback: TinyTable JavaScript Table Sorter - 2.5KB | sastgroup.com()

  • Pingback: TinyTable - Script de tan solo 2.5KB para crear Tablas personalizadas - MixInformatico.com()

  • mojaam

    First off, awesome script!

    I don’t know if this is a bug but when using both these scripts, they will both work initially. But when you click a sortable column, clueTip loses it’s functionality. This surprisingly doesn’t happen in IE6 but Chrome and Firefox. Is there a way to keep clueTip’s functionality even after sorting and switching pages and page sizes?

  • liverpool

    VERY NICE, yet small script. Got one question

    How To Start A Table With Sorting In A Certain Column? supposed, i want to start “desc” in sortable column B. How to do that?

  • Simon

    @Carl on 19 Mar 2009 at 3:58 pm

    Many thanks for posting that, fixed my very similar AJAXy problem.


  • henky

    hello, i’m currently trying to design my website using joomla 1.5, i downloaded sorter.zip but don’t know how to build a sortable table in one of the article. Can anybody please help??.. I tried to copy and paste the html code in the sample page to my article, but it doesn’t work.

  • Rick St Jean

    To add sorting by desc, just add

    sorter.sortmethod = “desc”;

    and change line 18 to
    if(f!=null){var a=new Function(this.n+’.wk(‘+f+’)’); a(); if(this.sortmethod.toLowerCase() == “desc”){a();}}

    Better and leaner than tablesorter.com Although I like the multiple column sorting tablesorter does.

  • Lukas

    I use your script in combination with Thickbox. So I have one column with links which should open in a thickbox window. The problem is now: as soon as I sort the table any other than the default way, the thickbox doesn’t work anymore, so the link is just opened in a new window.
    Any idea how to fix this?

  • Jay

    How can you format the date as dd-mmm-yyyy and make it sort correctly?

  • alfageek

    Is someone can explain me how to use this script with awstats. I need to sort columns, i tried many things like this one, but without results 🙁http://www.frequency-decoder.com/2006/09/16/unobtrusive-table-sort-script-revisited

    i use firefox or safari, but i can’t see sortables possibilities.

    Is TinyTable javascript can help me? Is there any tuto | how to ?

  • Thank you very much 🙂 As many of the above comment authors I also like to use JavaScript libraries, but this is the second or maybe third occasion I found your solution when searching for lightweight scripts, so this time I dugg this post to make sure I won’t forget about it 🙂

  • Feli

    Fantastic script!
    How print te entire table?
    (disable pagination in media=”print”)

  • Feli

    :::::::::::: Sugestion for disable pagination in media=”print”:::::::::::::::

    — Change the —————–
    1.- <tr class=”evenrow” style=”display: none;”>
    2.- <tr class=”oddrow” style=”display: none;”>

    3.- t.a[i].o=i; var v=t.r[i].cells[y]; t.r[i].style.display=”;
    4.- for(i;i<this.l;i++){t.r[i].style.display=i>=s&&i<l?”:’none’}

    –With ——————-

    +<style type=”text/css”>
    + .rowhidden {
    + display:none
    + }
    + @media print {
    + .rowhidden { display: }
    + }
    + @media screen {
    + .rowhidden { display:none}
    + }

    1.- <tr class=”evenrow rowhidden” >
    2.- <tr class=”oddrow rowhidden” >

    +function addClass(element, value) {
    +function removeClass(element, value) {

    3.- t.a[i].o=i; var v=t.r[i].cells[y]; removeClass( t.r[i], ‘rowhidden’ );
    4.- for(i;i<this.l;i++){ addClass( t.r[i], ‘rowhidden’ }

    Its a solution?

  • The person in charge of this website needs to have their head examined. I clicked on the prompt above that reads “click here for a demo” and I got a folder list. Now, it wold be OK if it was a list of different demos, bu it’s not. It’s an email tag that opens your email client. What a joke? What kind of idiot is responsible for this nonsense?

  • James Chalmers

    I like this a lot. I’ve only got two comments – when I use it none of the gif images in the table head work for some reason. Also it displays all the table entries even if you tell it to show only ten. Any solutions?

  • samdhal

    Hi … Nice Script ..

    Anyone with a solution to sort date in format dd/mm/yyyy ?

  • Paul

    Thanks a lot, saved me a bit of time

    (Twittering mode) I just found this, ad video about development process, quite funnny actually : http://www.youtube.com/watch?v=IlFL-uJ4hmw

  • i like the speed of this compared to some of the ajax.net stuff.

  • For sort the german date replace this

    //i=Date.parse(f); n=Date.parse(c);

    with this

    i=f.replace(/./g,”); n=c.replace(/./g,”);

  • Lukas

    Hm..sorry René but it doesn’t work for me

  • How to make column initial sorting descending ?
    Thanks for your good work !

  • Pingback: JavaScript Table Sorter | Themeflash : The Better Resources For All Your Web Needs()

  • mrLami

    Does anyone know how to make the navigation controls at the bottom of the table also appear at the top?

    That is the controls should be both @ the top and bottom of the page.

    FYI, just copying <div id=”controls”> section to the top of the grid does not work 100% (it does not display the paging text properly – “page x of y”)


    1ST Change:

    sorter.init(“table”, 0);


    2nd Change:
    IN script.js EDIT THIS LINE 29

    if(t.p==y){t.a.reverse(); x.className=t.d?this.asc:this.desc; t.d=t.d?0:1}


    if(t.p!=y){t.a.reverse(); x.className=t.d?this.asc:this.desc; t.d=t.d?0:1}






    <table cellpadding=”0″ cellspacing=”0″ border=”0″ id=”table1″ class=”sortable” width=”998px;”>
    <!– TOP: BEGIN Paging And Sorting –>
    <div id=”controls”>
    <div id=”perpage”>
    <select onchange=”sorter.size(this.value)”>
    <option value=”5″>5</option>
    <option value=”10″ selected=”selected”>10</option>
    <option value=”20″>20</option>
    <option value=”50″>50</option>
    <option value=”100″>100</option>
    <span>Entries Per Page</span>
    <div id=”navigation”>
    <img src=”images/first.gif” width=”16″ height=”16″ alt=”First Page” onclick=”sorter.move(-1,true)” />
    <img src=”images/previous.gif” width=”16″ height=”16″ alt=”First Page” onclick=”sorter.move(-1)” />
    <img src=”images/next.gif” width=”16″ height=”16″ alt=”First Page” onclick=”sorter.move(1)” />
    <img src=”images/last.gif” width=”16″ height=”16″ alt=”Last Page” onclick=”sorter.move(1,true)” />
    <div id=”text”>Displaying Page <span id=”currentpage”></span> of <span id=”pagelimit”></span></div>
    <!– TOP: END Paging And Sorting –>
    <table cellpadding=”0″ cellspacing=”0″ border=”0″ id=”table1″ class=”sortable” width=”998px;”>

  • Great, small code! Thanks. If one makes table boxes editable, and adds link to write in more rows, as needed, would this make your sorting code a simple spreadsheet? (It would have all the basic functions I need to work with most web data).


  • Hi Michael, code is useful and excellent. Thanks!

  • mrLami

    I’m having the same issue mojaam and lukas had. When I use tinytable with another script like thickbox or something, it works fine at first, even after paging.

    BUT AFTER SORTING THE TABLE, it breaks. Has anyone been able to figure out why it’s breaking stuff after a sort?

  • fern

    your code is simplier than what i’ve found….great code…

    I’ve tried experimenting your code, i’ve put some null values on the table,
    works well but how about not to sort null values on the table, should it be better if all null cell will appear on the bottom of the table?…

  • Pingback: JavaScript Table Sorter | thisispopup.com()

  • mrMartin

    wow..i guess i should redesign my tables using this as a source code..

    thanks a lot!

  • dimitris

    great work, thanks for sharing
    is there a way to destroy the sorter manually? (ie in case one wants to print the full table after sorting the table)

  • Ok i notice you updated with new version of table sorter. can you explain me abit wht are the changelog that had been made, before im upgrading to new sorter. Thanks Dude.

  • lofty

    very cool script. Is a version which uses ajax paging/sorting on the cards as this always becomes an issue?

  • steve

    @lofty -why the hell wont you read instead of asking question which has been asked (and answered (yes) many times before??)

    Nice script. I wouldnt add too much to it, otherwise it just becomes big and you can never match ALL the features of the big boys
    – In any event, AJAX retrieval may be overkill, why? because you can always issue another query and make it granular enough so that the resulting dataset fits within the reasonable 200 item limit.

    I am trying to get this to work on mobile device with some success 🙂 will keep you posted -thanks for your work in this and other tiny,useful scripts! ( Like a mouse's penis, it may be small, but it gets the job done!- and who doesnt need more mice?? )

  • In case no second arg is specified in init(), this line:


    Needs to be changed to:

    for(i=0;i<this.l;i++){t.a[i]={}; t.r[i].className=i%2==0?this.even:this.odd;}

    So that rows get formatted correctly with even/odd

  • Pingback: Functional Tables with JavaScript Framworks Libraries | Developer Assets | Ultimate Smashing()

  • Print friendly implementation in my spanish blog "http://weblogs.javahispano.org/feli/entry/sort_table_printfriendly&quot;.

  • William

    How to make the sorting function in Descending Order

    Find this code:

    return g>h?1:(g<h?-1:0)

    Replace with this Code:

    return g<h?1:(g>h?-1:0)

  • Giovanni

    @ William
    I William I've made this change but don't work. The sorting is alwais ascendent. Are there any other changed to do in the code?

  • Rodrego

    I've found this script by chance and thought great! I was doing a ReportMaker(Grelo) with php and not found any easy-to-use solution without ajax. And it was like a glove (brazilian slang). Thank you so much! When I launch my first version I tell you and don't thought that I'll not disclose your scipt. I'll write all your rights.


    DOWNLOAD LINK : http://www.mediafire.com/?im5xmoznvwm


  • Pingback: JavaScript Table Sorter « creative 5 stars()

  • I tried this on an old table and it works great even with 4000 rows! Very good!

  • poxcoo

    I use this on Firefox is ok…
    but use this script on IE is not run sort…
    Plase Help me…and…tell me… thanks!!!

  • To make this script work with the "YYYY-MM-DD hh:mm" format just change these line in the script.js which is in the cp() function.

    i=Date.parse(f); n=Date.parse(c);
    i=Date.parse(f.replace(/\-/g,'/')); n=Date.parse(c.replace(/\-/g,'/'));


  • lofty

    I needed to have certain rows with specific styles depending on the data in them, but when the table fires up it kills all classes you have in there. In order to get your own classes to persist add in place of this line
    r.className=i%2==0?this.even:this.odd; var cells=T$$('td',r);

    the following
    var oldClasses = t.r[t.a[i].o].className.replace(this.odd,'').replace(this.even,'');
    r.className=i%2==0?this.even + ' ' + oldClasses:this.odd + ' ' + oldClasses; var cells=T$$('td',r);

  • poxcoo

    thanks feli …. i trying..change script.js

    i=Date.parse(f); n=Date.parse(c);
    i=Date.parse(f.replace(/\-/g,'/')); n=Date.parse(c.replace(/\-/g,'/'));

    but…. is not runing sorting…. so sad…!!

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts | Tools()

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts - Programming Blog()

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts | Internet Marketing Tips and Strategy To Make Money Online()

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts | Technology you can trust here...()

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts | Mac Bargains()

  • Vikram

    Hi there. Any idea why I cannot use TinyBox and TinyTable on the same page? Only the script i load last works.

  • Hola, he logrado ordenar las fechas en formato dd/mm/aaaa, capaz que haya alguna otra forma, pero esta funciona bien!.
    Hi, I have the solution to order dates in dd/mm/aaaa format:

    —- remplazar: – replace this:

    var g,h; f=g=f.v.toLowerCase(), c=h=c.v.toLowerCase();
    var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));
    i=Date.parse(f); n=Date.parse(c);
    if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
    return g>h?1:(g<h?-1:0)

    —- por: – for this:

    var dX,mX,aX,fX,dY,mY,aY,fY,pos,pos2;
    var g,h; f=g=f.v.toLowerCase(), c=h=c.v.toLowerCase();
    var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));
    pos = f.indexOf("/"); pos2 = f.lastIndexOf("/");
    dX=f.substring(0,pos); mX=f.substring(pos+1,pos2); aX=f.substring(pos2+1,(pos2)+5);
    dY=c.substring(0,pos); mY=c.substring(pos+1,pos2); aY=c.substring(pos2+1,(pos2)+5);
    i=Date.parse(fX); n=Date.parse(fY);
    if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
    return g>h?1:(g<h?-1:0)

  • LSJack

    The code doesn't work with more than 5000 lines, any hint of how to handle such an amount of information?

  • Pingback: marcelopedra.com.ar()

  • Pingback: JavaScript Table Sorter | PHP Hosts()

  • xiaomin

    thanks for sharing,i love it so much,I would like to have a question,how to obtain the value of rise sequence and show it?

  • This is a great javascript library. Would be great for customer bases with dedicated hosting, virtual private servers, and even reseller hosting to showing top bandwidth usage, GB, MB, memory usage, disk storage, ftp usage, email usage, mysql database usage, and so on. I am thinking of developing a control panel software to maybe include this style of tables.

    Great find!

  • Ed

    This is great. Within 5 minutes i had turned a monster 5000 row table into a easy to navigate datasheet… can't wait for the search facility!! Good work 🙂

  • DWG

    I'm having issues sorting a column of sku's with variable lengths and numbers/letters in them.. For some reason it's sorting by length, not by actual number/alpha order.. any thoughts? PLEASE HELP!!

  • If anyone wants to know how to default the sort to DESC on load, do this.

    Line 30 should read
    else{t.p=y; t.a.sort(cp); t.d=0; x.className=this.asc}

    change it to this
    else{t.p=y; t.a.sort(cp).reverse(); t.d=0; x.className=this.desc}

    if that isn't ur line 30, then just find that line and replace it. Should have the option on init to specify.

  • DWG

    Still hoping someone could help me with answer.. here's an example of the sku's that are not sorting properly – it seems to default to the next column over with the descriptions.. all other sorting seems to be working properly.


    I also have an example posted here: http://www.thetps.com/tablesort.html


  • adrian

    Hola, a todos, hice esta prueba con el código para ordenar fechas en formato aaaa-mm-dd, lo unico que agrege es en esta linea,
    var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));

    var i=parseFloat(f.replace(/(\$|\,|\-)/g,'')), n=parseFloat(c.replace(/(\$|\,|\-)/g,''));

    y funcionó, espero ha alguien le sirva :), saludos.

    Hello everyone, I have other form for the dates, the solution to order dates in format :yyyy-mm-dd

    var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));

    var i=parseFloat(f.replace(/(\$|\,|\-)/g,'')), n=parseFloat(c.replace(/(\$|\,|\-)/g,''));

    realy works! ;),

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts « test()

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts | Download E-Books Free Video Training Courses Softwares()

  • Pingback: JavaScript Table Sorter | Web Design GroundBreak()

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts | X Design Blog()

  • Is it possible to know which is the number of column sorted out ?
    How can I do that ?
    For example :
    document.write (sorter.what ?) => return 2

    Thank's for your help

  • chris

    How to get the current column and order direction:

    Write between this to lines (30 and 31) …
    else{t.p=y; t.a.sort(cp); t.d=0; x.className=this.asc}
    … here …
    var n=document.createElement('tbody');
    … the returning code like this.

    else{t.p=y; t.a.sort(cp); t.d=0; x.className=this.asc}
    var n=document.createElement('tbody');

    Ad to config init:
    sorter.currentcolumn = "current_column";
    sorter.currentorderdir = "current_orderdir";

    And to your html file:
    <div id="current_column"></div>
    <div id="current_orderdir"></div>

    Thats it!

  • js

    Not sure if this script handles <tfoot> tags correctly

  • BT

    Great script!

    I just wanted one row of data to display at a time so I modified the script.js to default to that and deleted the Entries Per Page from the HTML.

    Question – I need to change the way the data is displayed. Since I'm only displaying one record at a time, I'd like to shift the table so that the column headings are on the left side going down with the data displayed next to it rather than across the top with the data underneath. How do I do this? Can I do this?

    Thanks again.

  • PoMiLLo

    Hello!! this is a usefull javascript code 😀

    I have a question! How can i fill the table dynamically using php??
    for example in a search and fill the table again in base the result!

    Regards! 😀

    PD: sorry by my English is no so good :S

  • talsja

    I have tried your code with asp.net. I have used an asp.net listview bind to and objectdatasource. Everything works just great.

    Now i have added an select linkbutton with the select command so when i select a row the containing details will be filled out in a asp.net detailsview. Also this detailsview is bount to an objectdatasource.

    When i run the page i can select a row and the details get filled in and the paging will remain it's pageindex and pagesize.

    Now i have wrapped everything up in an updatepanel. When running the pages i see my grid paged and wile paging my pagesize remains and paging occures correctly. When i click my select button the detailsview get's filled but the page size will be losed. So when i set the pager to 10 records a page and i have 100 total records, the paging will be set to 100. The page dropdownlist has 10 records selected.

    I tried to implement the JQuery.NoConflict() theory but this doesn't help.
    Will there be a solution for this issue?

    Hope so

    Great work

    Thanks Talsja

  • Elerium

    First of all, this script is amazing. Excellent work! I am having a similar problem to the other posters; my site is using thickbox with links within the table, and there are two sorted tables on the page.

    Everything works great at first, the thickbox links work properly, the tables both sort, etc. But once you have sorted one of the tables, the thickbox links within no longer work correctly. Instead of popping up the linked html within the page, they send you to a new one, as it seems the class of the <a> element was removed when the table was sorted.

    Any ideas?

  • Ivan

    Excellent script!
    It's possible to sort 2 o 3 column simultaneously?
    name and surname. If to sort name is not possible to sort surname.

    Thanks Ivan

  • Ivan

    is possible multiple column sorting like tablesorter?

  • DoCBReeD

    Anyone have success wrapping Form tags around this to make each line editable?

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts | Lunch Time Laugh()

  • Korsakov

    When I got the Console error "sorter not defined" I put the sorter declaration above the table. Now I receive in Firebug:
    p is null:
    T$$("tbody", Object name=p)script.js (line 4)
    ge("table-list")script.js (line 53)
    anonymous("table-list", 2)script.js (line 9)

    What am i doing wrong? Thanks!

  • fharris

    how do I apply my own styles to cells and rows

  • Pingback: Sort your HTML Tables with AJAX & JavaScript()

  • Eason

    Several suggestions:
    1. Show the page control buttons dynamically. That is, on the first/last page, hide “first/last page” and “previous/next page” button; when there is only one page, hide all buttons.
    2. Add a “go to page {page #}” input box for quick navigation.
    3. In the “entries per page” drop-down list, show the actual number instead of a fixed number on the first load of the webpage.
    4. Think about this situation. I have a table whose first column is just the row number, and I want it to be fixed when I apply sorting on other columns. It would be better if there is a class for this kind of column.

  • http://vb2005xu.javaeye.com/blog/481236
    Tiny.Table Chinese Char sorter support!

  • hi, it looks very attractive, but can any one tell me about its feedback?

  • Pingback: テーブルに実装できるjQueryプラグインいろいろ | WEB制作.Hack()

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts | 9Tricks.Com - Tips - Tricks - Tutorials()

  • wally

    Very nice script. I found an issue with putting a select list inside a cell of the table. The selected option no longer renders correctly. This works in FireFox, etc. but not IE. Any suggestions would be a great help

  • Pingback: Tablas dinámicas a sólo 2.5KB » LivinDev()

  • Ach!

    Just discovered a really bad feature / bug.

    It kills existing cell classes. Really not good 🙁

  • Sorry – I appear to be rather good at complaining about such a useful class.

    I'm using multiple tables on one page, and from what I can tell I have to instantiate as many table sorter instances as I have tables. As my tables are all being generated by PHP, this makes setting up sorters a rather messy process. What would be really nice would be a single class that manages the sorting of all tables. The best result for me would be for any instantiated sorter class to fire on load, grabbing all the tables of a certain class, perhaps, then initializing them to some internal pointers.

    Also, I don't really understand why I have to pass the "sorter" reference back into itself on creation. Is this to create the anonymous function? Surely there must be a cleaner way than this… ?


  • Pingback: Getting a Website is Easy » Blog Archive » JavaScript Table Sorter()

  • I am creating a results table dynamically with AJAX. On page init the table headers show as sortable, but after a form selection, the AJAX queries the database and re-populates the <tbody> element. This action destroys the sortability until a page refresh is handled.

    How can I call a "re-sort" after my AJAX has posted the data back to the table?

  • kyle johnson

    This script works great, but I do have one problem with it. I need to have a few rows in my table before the <thead>. I can't put another <thead> because then it will try to use those rows. If it isn't in a <thead>, then those rows will show below and sometimes above the <thead> and the sorting won't work. Any solutions or workarounds for this?
    Thanks a lot.

  • hadiaruz

    Hi all,

    This is very amazing script. i already use this in my project and it works very cool. but now i'm facing with some problem which is i dont want number shown on the first of the column to be sorted decreasingly.. i wanna the first column to be static in ascending order while other column is sorted.
    Kindly pelase help me.

    Thank you very much for your assistance in this matter.

  • ConixIT

    "echo date("M jS",strtotime($result['date']));"

    breaks date sorting, if I leave the date in raw mySQL format (i.e. 2009-11-15) it works fine. Any suggestions?

  • First of all, thank you for a great script! Fabulous work. Second: When will the search function arrive? Thanks.

  • Pingback: Advanced JavaScript Table Sorter – TinyTable V3 - Web Development Blog()

  • Whitney

    Nice script!

    I'm trying to hide some of my table rows, until someone selects a button to display them.
    When I do:

    <tr style="display:none> … </tr>

    The row is still displayed. Any idea on how to keep it hidden through out the sorting
    process until my displayRow() button is pushed?

  • jason

    Excellent script. It would be even more useful when the filtering functionality is added. thanks!

  • MB

    How do I set the navigation buttons to appear and dissapear based on number of pages? For example in there is only 1 page to view I dont want the navigation buttons to show, or if the user is on page 1 of 3 I dont want the back buttons to be viewable.

    Thanks…great script!

  • Pingback: Ordenar columnas de una tabla con Javascript y TinyTable | Craftyman Blog()

  • Kris A

    This is an amazing script!!

    There is one issue though, after sort, the internal dom references are lost. I have Microsoft presence embedded in one of the columns, after a sort the references to the onhover effect to the presence icon is lost.

  • Gary Jia

    really amazing script! works perfectly for me!
    One question is : does the Javacript work in Microsoft masterpage?

    Thank you very much!

  • Biju Philip

    This is truly a great script – it performs so well. Is there any way that you could pass on readable source? It's hard to understand the current one posted.


  • Sh0gun

    Excellent work! But for your next release, please JSLINT it a couple of time to improve the code.


  • Good script.. I having a problem with add a new column with checkbox when click any column sort desc that checkbox is not working….


    I’ve added jquery alert tick box – true/false. alert message is not working after click sort column.

    Do anyone can resolve this bug? If so, drop me a mail smiler18@hotmail.com

    Thank you

  • aziz

    Hi all,
    I started to use another plugin which I will not name names, but it was too complicated and it takes time every time, while yours is super, bravo.
    I have a small question, is it possible to record a selection in Excel!?

  • Jia

    Hi nacho cano
    your script for dd/mm/yyyy is great! thanks 🙂

  • I´m working with jQuery/TableSorter at the present, but I really like this TinyTable script. jQuery/TableSorter is fine when I also benefit from other possibilities jQuery offer. But when making a table sortable is really the only task to be fullfilled, TinyTable seems like the better solution to me because of its small size. I will try it out soon.

  • These days I managed to implement TinyTable into a table in a Joomla content item. It is really a great tiny script.
    It should work with PHP/MySQL, to answer the post before this one, as long as the frontend output is a html table.

  • Pingback: TinyTable JavaScript Table Sorter « FlagMag()

  • Ramya

    Can someone tell me how to sort dates in dd-Mmm-yyyy format?

  • Gerry

    It appears this script is missing one vital capability of sorters – the ability to customize keys or write a parser. For example, suppose that, in a column to be sorted numerically, the script allows one to specify that ">25" is sorted as if it was "26".

  • Xavier

    I insert the script in a complex PHP /MySql Website without any issue.
    I only undertake some changes on the css file due to the environment: for example I change thead/th/h3 in thead/th/span because of h3 is used by the website.
    Many thanks for this script

  • lmn

    Thanks for the excellent script. Could you advise how I could sort the table, if I have for example values '20 MB', '20 GB' and '20 TB' on one field? Would it be possible to create a 'counterfield' and give '20 TB' value '3', '20 GB' value '2' and '20 MB' value '1' and sort the table showing original values but sorting from "counterfield". Turning all values into same unit MB/GB/TB isnt possible.. Need other way. Can they be given sorting value somehow?

  • Pingback: TinyTable : JavaScript Table Sorter Script | TechnoGadge()

  • Pingback: ゆっくりと… » 「TinyTable V3」の使い方()

  • Hariram

    Everything works fine, except the “entries per page” selector. It should reset itself on page reload. For eg: if I choose to display 5 records, and next time I refresh the page, it’d display all the records, but the selector continues to display 5.

  • Pingback: TinyTable (Javascript) sortiert HTML-Tabellen | vossfeldt | operating media()

  • I worked out a way to sort by a column that contains images instead of text/numbers, like Icons for checked/unchecked, counrty flags or the like. TinyTable doesn´t work with that straight away. My workaround: I put a <span class="dontshow"> before the <img> and in this span I put a text that is used for sorting. The CSS for the span class goes like

    visibility: hidden;
    float: left;
    height: 0px;
    width: 0px;
    margin: 0;
    padding: 0;

  • Edgardo

    This is an excellent script! 🙂

    To sort in the european date format insert this code between line 57 and line 58:

    // convert dd/MM/yyyy to MM/dd/yyyy
    var tmp1 = f.split('/'), tmp2 = c.split('/');
    f = tmp1[1]+'/'+tmp1[0]+'/'+tmp1[2];
    c = tmp2[1]+'/'+tmp2[0]+'/'+tmp2[2];

  • Xavier

    Very nice script.
    I get the same issue as John:

    Nice script. Not sure if I’m doing something wrong, but for some reason the nosort column feature does not work in column 2. I can add the class=”nosort” to any other column. Keep up the good work!
    John on March 13, 2009 at 9:34 am

  • triviman

    sum in columns with format 1.234,56 is possible? please help

  • Very nice script! I have used it in production many times and I have never had an issue until now. Like many before me I am trying to format the date in European format as dd-mmm-yyyy.

    I have gotten close using this;

    i=Date.parse(f); n=Date.parse(c);

    It is now sorting in European format, but it breaks the Column highlighting and Zebra stripping on first load until you click a heading, then it works. Has anyone else tries this method or maybe can help me fix this to get it working?


  • For those of you who have been trying desperately to use the European format using dd/mm/yyyy & dd-mmm-yyyy, I have managed to get it working by changing some of the code found here http://forum.leigeber.com/topic/119-sorting-date-in-format-ddmmyyyy.

    Change the code found in the forum:

    var dX,mX,aX,fX,dY,mY,aY,fY,pos,pos2;
    var g,h; f=g=f.v.toLowerCase(), c=h=c.v.toLowerCase();
    var i=parseFloat(f.replace(/(\€|\,)/g,'')), n=parseFloat(c.replace(/(\€|\,)/g,''));
    pos = f.indexOf("/"); pos2 = f.lastIndexOf("/");
    dX=f.substring(0,pos); mX=f.substring(pos+1,pos2); aX=f.substring(pos2+1, (pos2)+5);
    dY=c.substring(0,pos); mY=c.substring(pos+1,pos2); aY=c.substring(pos2+1,(pos2)+5);
    i=Date.parse(fX); n=Date.parse(fY);
    if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
    return g>h?1:(g<h?-1:0)

    To This:

    var dX,mX,aX,fX,dY,mY,aY,fY,pos,pos2;
    var g,h; f=g=f.v.toLowerCase(), c=h=c.v.toLowerCase();
    var i=parseFloat(f.replace(/(\€|\,)/g,'')), n=parseFloat(c.replace(/(\€|\,)/g,''));
    pos = f.indexOf("-"); pos2 = f.lastIndexOf("-");
    dX=f.substring(0,pos); mX=f.substring(pos+1,pos2); aX=f.substring(pos2+1,(pos2)+5);
    fX=mX+" "+dX+", "+aX;
    dY=c.substring(0,pos); mY=c.substring(pos+1,pos2); aY=c.substring(pos2+1,(pos2)+5);
    fY=mY+" "+dY+", "+aY;
    i=Date.parse(fX); n=Date.parse(fY);
    if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
    return g>h?1:(g<h?-1:0)

    I currently have it working in production, so I hope this helps anyone who might need it.


  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts « Tips for online tech users, Designers, Blogger, Learners…()

  • Pingback: JavaScript表格排序 – TINYTABLE()

  • José Merino

    Easy Date order solution.

    change in script.js the "CP" function.

    // i=Date.parse(f)
    // n=Date.parse(c);

    var meses=new Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");

    i=Date.parse(f.split("/")[0] + " " + meses[parseInt(f.split("/")[1])] + "," + f.split("/")[2]);

    n=Date.parse(c.split("/")[0] + " " + meses[parseInt(c.split("/")[1])] + "," + c.split("/")[2]);

    Now the order is good.


  • Fritz

    Does anyone have a suggestion how to change document.body.style.cursor during sorting?

  • Erick


    I love this update, but i was wondering where to change the sorting order. I think ascending is standard, but i want to order descending (from 2010 to 2000 for example). Can somebody give me the clue?

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts | natku.com()

  • Pingback: TinyTable 开源项目 - Ajax代码大全 - Java开源项目 - 表格Table/网格Grid - ajax网格-表格-Grid-Table - Java免费软件 - TinyTable - 开源网()

  • Pingback: HTML Table Building: 30+ Beautiful Examples and Useful Javascripts - www.huedesigner.com()

  • Justin Masse

    First of all I love this script.

    I have hit a problem though, I would like the table to be smalled, lets say 400 px in length. Is there a way to do this? I have found the 825 px and 823 px settings within the CSS and modified them but it does not seem to be changing the width of the table.

  • This script rocks!

    But, I was wondering how you disable all columns from sorting?

  • how to?
    order a column in spain money format? example: 1.234,56 (#.###,00) , thanks for your help 🙂

  • krunal sonar

    I am using a tablesorterpager plugin, sorting, pagination working fine, no issue, but when we select anty page using pagination & click on any link which redirect to same page, reset a pagination to page1, i want after page refresh a pagination shrold not reset to first page, its should remeian as it is on selected page, please reply me soon, i will thakful to u:)

  • Hello,
    GREAT script. I'm just having one small problem. The link sorting doesn't seem to be working for me. e.g. when I click on the column with links and try to sort low to high (a to z), the Pebbles2 link is listed above the Betty2 link:

    <a href="/cgi-bin/WebObjects/netBrackets.woa/-9999/wo/sTwdytWIgLTRRITxhDDtbM/">Pebbles2</a>

    <a href="/cgi-bin/WebObjects/netBrackets.woa/-9999/wo/sTwdytWIgLTRRITxhDDtbM/">Betty2</a>

    Any ideas on what's wrong here?

    Also, is there any way to initialize it to sort on 2 columns instead of on just a single column, then left to right (at least I think that's what it's doing)?


  • Great !!! Script i am pretty new to JS but i love the things it can do i am using the JQuery
    Ui Scripts most of the stuff is great
    but this script is not compatible with <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
    it shuts all the other stuff down.
    and i am not sure how to use NO-Conflict Scripts
    I used a CSS Html table scroller works great until you look at it in IE then games over IE 6
    the scroll bar shows up 7,8, nothing .
    That's why i love this code hope you can help i want to put a song-list in a table that dosen't
    stretch the site down.

  • panit

    This is a very nice script! but I am running in trouble with submitting the form element in the sorter table. My submit button seems like doesn't work! Could any one tell me about this? Thanks so much!

  • Pingback: 150 JavaScript Techniques()

  • I am PROUD to be say it is Extraordinary blog for the readers,I like to subscribe it for the future.

  • Pingback: Team Challenge Endurance Training Program Generates $8 Million for Crohn’s … – PR Newswire (press release) » Health Review - Research, Resources & Advice on Colitis()

  • web Design india

    I never knew they provide so much like- online trading. I got help in selling my products without leaving my home when I worked with Catalog Design IndiaAnd offered me services 365 days a year. And kept my website among the top of major search engine listings. Thanks to them. <a href="http://www.weblarge.com"&gt; web Design india</a>

  • Live

    Thank you for this, I'm a beginner and it just worked. However no matter what I do, it seems I can't put the Images Folder to a remote folder.

  • Alberto

    Greetings from Mexico!! I'm using your script to format some catalogs extracted from a MySQL database, and it's gorgeous, i like it. But, i have some problems using it with XAJAX. My system generates the table HTML code via a PHP function, this goes to a XAJAX function that loads the results in a DIV, and yes, it works, but the TinyTable functionality disapears, i have to reload the entire page to enable it again. do you know how can i solve this? somebody here can help me? thanks…

  • i have the same problem using AJAX, the tinytable functionality disapears? the console sais that sorter is not defined but it's loaded. help pleaseee

  • newuser

    I am unable to sort identity columns as 1,2,3,4,5…10,11….
    It shows 1,10,11,12….,2,20,21….and so on…
    can anyone solve this problem as i am stuck.kindly help.

  • Whyuwanttoknowmyname

    Well it's nice, but I don't get it.
    When I'm using the nosort class, it still set the second th able to click, and it start sorting the second colum when the page get laoded, thats a kind of fail….
    I have a top 10, but my top 10 is like, 6,3,1,9,7….
    instead of 1,2,3 or 10,9,8.
    This is when I load my page, but not when I click on sort ofcourse.
    I hope there's a way to fix that else you better can remove this release and release it again when it's bugless.
    Thanks 😉

  • Anonymous

    Are you passing "1" as the initial column to sort? If so it may be overriding the nosort property. The number ordering would only happen when the script thinks the numbers are strings so look for empty spaces or non-integers in any of the rows in that particular column.

  • Micah

    Did you ever find a solution to this? I have been trying to figure this out as well. I would like to sort by date but the most recent first so I need to have desc order.


  • Micah

    I finally figured this out. If you are sorting on column 1 it will, by default, sort in ASC order:

    If you want that to sort by default in DESC order just add a comma desc after the column number:

  • Micah

    Opp I forgot to add quotes. Should be:

  • Hi, the script is working fine on IE 8; but doesn't in firefox 3.6.13; any body is having this problem?

  • Hi, the script is working fine on IE 8; but doesn't in firefox 3.6.13; any body is having this problem?

  • Preethi Sivakumar

    Hi Michael,

    I've implemented your code and it works perfect except in the place where i've a dropdown.
    The cloneNode() and copyInnerHTML works perfectly for Mozilla Firefox but, in IE the "selected" value of the dropdown is not displayed in the GUI even though I see "selected=selected" in ViewSource.

    Please Advice
    Thanks in advance.


  • Matt

    I am having massive performance problems, esp. on IE7 / IE8. I know that those renderers are slow, but maybe someone has some idea? When we get larger sizes of data to display in those tables, the whole applications gets stuck.

  • Anonymous

    Contact me with a link and I will take a look.

  • Lots of great information and inspiration, which we all need! I really appreciate the efforts made by you for this. Well Done! Thanks for sharing the information with us.

  • Esteban

    Hey, this code is simply great to build tables, I am amazed with its functionality but I want to make a question, my table is not written in HTML, I gather my data from a database and use php to create the table, I followed the same structure of your demo table but still I get javascript errors in the script.js file, would you help me? maybe I would have to explain you my problem better. Thanks

  • Benignli

    I solved this problem by removing any space/tab/line breaks etc between <td> and <a href…> and </td>.

    E.g. Use
    <td><a href="/cgi-bin/WebObjects/netBrackets.woa/-9999/wo/sTwdytWIgLTRRITxhDDtbM/">Pebbles2</a></td>

    Rathen than


    Hope it works for you!

  • Benignli

     Don't know why the example posted like that.
    I mean "<td><a href …"
    Don't add line break after the td

  • nice code!

  • Paul

    I'm getting problems with sort order in Chrome after it's latest update.
    It seems to start OK then when the page finishes loading what was lines 1, 2 3, etc. drops down the page and it's now 13,14,15 to 55 then 1,2,3.
    It's OK in Safari and Firefox.
    No errors reported in the JS console.

  • Timformation

    Love it!  But having the same sorting problems as others on numeric fields.  Have 1 – 1500 in a column and getting some really strange ordering…hard to explain. Ascending starts at 13 and ends at 49.  Field is a Long Integer pulled from a database.  Can you please take a look at this and provide a solution?

  • I would like to know just how Fletcher Briggs is making $142K.  Is clearly a goof off who has kissed his way up the food chain.  😛

  • Francesco

    Great script! Thanks. Can I ask you how can I do a second search (with a different query) within the results of first one? Bye, Francesco – Italy

  • Rithish

    Was a solution found for this?

  • Guest

    I have the same problem as timformation and paul. I.e. sorting does not work in chrome. any update on this ?

  • chirag

    this is tooo gooodd dear…frnds…..

  • I will try it. 

  • Greg

    Hello, great script. Just a quick question and bug that hopefully you may be able to help with. I have a table being drilled out of the database and everything works great. However whenever I sort the column all of my other jquery functions stop working…Any thought why this may be?

  • Great script! Thank you very much for providing this! It has come in extremely useful multiple times!!

  • steveregs

    Exactly what I was looking for. Thanks, guys

  • aaron mclean

    Has anyone gotten TinyTable to work inside a Coldfusion CFDiv or CFWindow? I'm sure this is a Coldfusion issue but I've struggled with a fix for this for 18 months and can't seem to find an answer. Thanks in advance!

  • Frederico1212

    Hello, great script ! Juste a quick question about the initialisation. We can choose the colomn with "sorter.init('table',NUMBER);" but not the direction of arrangement. I would like a decreasing arrangement for the begging. Thank you for your help

  • Jorge Humberto Gonzalez

    I don't speak English, I speak spanish.
    Muchas gracias por el aporte.  Me ha sido de gran ayuda y es la grilla que andaba buscando.  El script esta muy bien estructurado.

    Nuevamente muchas gracias.  

  • Anil

    if in a table tableSorter is used and when page is refreshed then it will on the original form not in tableSorted. I want to kept it in sorted form of the tableSorted after the page refreshment.
    Please give me the solution.
             Thank you for your help.

  • Info

    Great job ! Thank you.

  • Mike

    This is brilliant thank you very much

    However I just require the table how do I remove the blue hue background so it is just white and also make the blue horizontal line disappear also so it is just the table I insert?

    Thank you!!

  • This version seems a lot easier to implement than v3, but STILL cant get the ajax working 100%, or should I rather say I can only get it to work the first time, thereafter any new retrieved data "doesnt exist"….

  • Ari

    This is great!
    I have been asked to add sorting and paging function to perl-scripted table.
    This is just what I have been searching.

    I appreciate your excellent job.

  • Batchusunitha

     Hi All.
    I have used the script and works well for everything.expect when i used href link for data then i click on sort it is not sorting in order and it is giving wrong results.Any of you guys can you please help me.

  • Gopal Patel

    this is nice but i have some problem in it.it is working fine in mozila and in IE but it is not working in crome can you please help me fot it.thanks in advance.

  • Juan

     Great job!. Sleek and compact, congratulations. Just what I was looking for. Thank you very much.

  • Flip387

    This is a great tool! 
    I would love to see the init() function take a 3rd option,one that would determine the initial sort (usually my data fields need to be reversed to show latest first).

  • Macgadger

    Thanks a lot!!!! i love it!!! saved my lots of time!!! big thanks for this tiny script! 😀

  • Jhd

    does your script works with more than one table in same html ?

  • gasetr

    I'm testing with a table consisting of 1000 rows.

    Results so far have shown that TinyTable has problems sorting columns, whereas IE handles it fine.
    Any ideas?

  • Jeff schmitz

    Any idea when if/when a fix for chrome will be available?  

  • John

    Beautiful. Thank You.

  • venkat

    What i was looking of this and got it. Thanksw.

  • Julidamm

    Thank you very much, excelent web site.

  • Tank you very very much! the perfect idea for my proyect! 

  • Tiongshyue_ying

    Hi, how do I add row onmouseover change row background colour and onclick on any part of the row to show a popup DIV?

  • bluegene

    I had same problem, too.
    But I didn't need "date" type. So I could comment 2 lines to fix it.
    >> the 58th and 59th lines in script.js file.
    It looks like about date type handling. If you comment that, it will work well.

  • bluegene

    I think this problem is same with right below.

  • Somy53

    Very nice script, thank you very much, I wonder if it could support the numbering links??!! Thanks in advance 

  • Somy53

    how did you solve this problem please?? 

  • James Eady

    TinyTable contains a bug which occasionally causes floating point values to be misinterpreted as dates. Since my data did not have any dates, I modified the 'cp' to change:
    57 › › if(!isNaN(i)&&!isNaN(n)){g=i,h=n} 58 › › i=Date.parse(f); n=Date.parse(c); 59 › › if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
    to: 57 › › if(!isNaN(i)&&!isNaN(n)){g=i,h=n} 58 › › else { 59 › › i=Date.parse(f); n=Date.parse(c); 60 › › if(!isNaN(i)&&!isNaN(n)){g=i; h=n} 61 › › }

  • vince

    I'm quit new at php and i want to use to the script to search in a table with mysql results. I'm able to print the mysql results. But i can't search in the this table.


    Records – of

    echo "";
    while ($qry = mysql_fetch_array($query)) {
    echo "";
    echo $qry['id'];
    echo "";
    echo $qry['naam'];
    echo "";
    echo $qry['type'];
    echo "";
    echo $qry['kitnr'];
    echo "";
    echo "";
    echo "";


    view all


    Entries Per Page

    Page of

    var sorter = new TINY.table.sorter('sorter','table',{
    columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}],

  • vince

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="style.css" />
    <div id="tablewrapper">
    <div id="tableheader">
    <div class="search">
    <select id="columns" onchange="sorter.search('query')"></select>
    <input type="text" id="query" onkeyup="sorter.search('query')" />
    <span class="details">
    <div>Records <span id="startrecord"></span>-<span id="endrecord"></span> of <span id="totalrecords"></span></div>
    <div><a href="javascript:sorter.reset()">reset</a></div>

    <?php $db_config['server'] = 'localhost';
    $db_config['username'] = 'guofnchi_vlieg';
    $db_config['password'] = 'vini1347';
    $db_config['database'] = 'guofnchi_vlieg';

    mysql_connect($db_config['server'], $db_config['username'], $db_config['password']) or die(mysql_error());

    mysql_select_db($db_config['database']) or die(mysql_error());

    //MYSQL Statement
    $select = "SELECT * FROM `vliegers`;";
    //Plaats query in pointer
    $query = mysql_query($select);

    //While-lus met query die alles in html-tabel zet
    echo "<table cellpadding="0" cellspacing="0" border="0" id="table" class="tinytable">";
    echo "<tbody>";
    while ($qry = mysql_fetch_array($query)) {
    echo "<tr><td>";
    echo $qry['id'];
    echo "</td><td>";
    echo $qry['naam'];
    echo "</td><td>";
    echo $qry['type'];
    echo "</td><td>";
    echo $qry['kitnr'];
    echo "</td></tr>";
    echo "</tbody>";
    echo "</table>";


    <div id="tablefooter">
    <div id="tablenav">
    <img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
    <img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
    <img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
    <img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
    <select id="pagedropdown"></select>
    <a href="javascript:sorter.showall()">view all</a>
    <div id="tablelocation">
    <select onchange="sorter.size(this.value)">
    <option value="5">5</option>
    <option value="10" selected="selected">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
    <span>Entries Per Page</span>
    <div class="page">Page <span id="currentpage"></span> of <span id="totalpages"></span></div>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
    var sorter = new TINY.table.sorter('sorter','table',{
    columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}],

  • ahsan


    I want to make a function on JavaScript:
    the output will be like.
    there is a button on the screen on clicking it. 3 column will be created and on every click a new row will be added.
    and the colour of the even rows will be different form the odd rows.

    I will wait for your reply thank you.

    Ahsan Abdullah

    [___Insert Row___]

    ____col 1________col 2__________col 3____
    _____________!_____________!_____________! —-> RED
    _____________!_____________!_____________! —-> YELLOW
    _____________!_____________!_____________! —-> RED
    _____________!_____________!_____________! —-> YELLOW

  • Arun

    Simple Fix to make desc sort as default.
    First, Excellent and amazingly simple script to use. Thanks to the author.

    To change the sort order
    based on sort column. (1 = asc; -1= desc)

  • Paul Alexandru

    In order to sort by a field type date its very simple. It depends of how your field is looking. For example if you have your data in this format: day.month.year (ex: 15.04.2012) you have to add a code that looks like this:

    var test = c.split(".");
    if (test.length == 3){
    c = test[2]+''+test[1]+''+test[0];

    var test2 = f.split(".");
    if (test2.length == 3){
    f = test2[2]+''+test2[1]+''+test2[0];

    You have to add this code just before this line: return g>h?1:(g<h?-1:0) in script.js

    What does this code makes exactly? Well its preaty simple, It findes all date fields, and for this we check if in the field it findes exactly 3 "." characters. If yes, it converts the data from 15.04.2012 into 20120415 , and another example from 21.05.2012 into 20120521. And after this you can compare the numbers.

    15.04.2012 < 21.05.2012 but you can compare more easy with:
    20120416 < 20120521

    If your data was looking like this: 15/04/2012 , the code would look like this:

    var test = c.split("/");

    if (test.length == 3){

    c = test[2]+''+test[1]+''+test[0];



    var test2 = f.split("/");

    if (test2.length == 3){

    f = test2[2]+''+test2[1]+''+test2[0];



    If your data was looking like a daytime interval like this: 21-05-2012 10:45:35 the code will look a little bit diferent, but not that much:

    var test = c.split(" ");
    var test2 = test[0].split("-");
    if (test2.length == 3){
    c = test2[2]+''+test2[1]+''+test2[0];

    var test3 = f.split(" ");
    var test4 = test[0].split("-");
    if (test4.length == 3){
    f = test4[2]+''+test4[1]+''+test4[0];

    In this last example, first thing first you have to split the data and the time and after that you make the same operation like in the other cases.

    I waisted 3 hours to make this, but i hope many of you will use this and i will be happy that i managed to help not only me, but others to.

    Good luck !

  • Ewe

    If you use <selects>'s as td values, things can get pretty hosed with the selectedIndex, appears to be a known bug with the cloneNode that this script uses. http://support.microsoft.com/kb/829907

  • Fadi Frejat

    than you very much
    great work!!

  • Humberto

    as 2 TinyTable in a page html

  • laci

    How to set summary row in first row? Or before table?


  • hero

    where? sortdir is not in the demo code

  • vivek

    i have a total column in my table . The values are 21,22,23,43,1234,10,111,99,2111 . when i try to sort this column i got a wrong output .Tiny table treat this column as string value and the sorting so how can i specify the data type for the column kindly see the image plz help me

  • vivek

    have a total column in my table . The values are 21,22,23,43,1234,10,111,99,2111 . when i try to sort this column i got a wrong output .Tiny table treat this column as string value and the sorting so how can i specify the data type for the column kindly see the image plz help me

  • G.

    for those interested in sorting descending by default:

    Change these lines:
    if(t.p==y){t.a.reverse(); x.className=t.d?this.asc:this.desc; t.d=t.d?0:1}
    else{t.p=y; t.a.sort(cp); t.d=0; x.className=this.asc}
    if(t.p==y){t.a.reverse(); x.className=t.d?this.desc:this.asc; t.d=t.d?0:1}
    else{t.p=y; t.a.sort(cp); t.d=0; x.className=this.desc}

    Change this line:
    return g>h?1:(g<h?-1:0)
    return g>h?-1:(g<h?1:0)

  • G.

    to fix chrome (only is you dont use dates in your table!)
    remove these lines:

    i=Date.parse(f); n=Date.parse(c);

    if(!isNaN(i)&&!isNaN(n)){g=i; h=n}

  • Jake

    I have initiated a table, sorting by a particular column by default. How can I sort by that column for this table DESCENDING by default WITHOUT changing the settings for all other tables?

  • Srinivasan

    Is there any provision to load data based on pagination count?

  • standby

    I had problems at sorting local date formats in IE and FF browsers.
    I fixed it in this way (possible date formats: 2013-11-04, 2013-11-04 14:36)

    function myparsedate(str){
    var match = str.match(/^(d+)-(d+)-(d+)( (d+):(d+))?$/);
    if (match){
    if (match[5] && match[6]){
    var redate = new Date(match[1], match[2] – 1, match[3], match[5], match[6], 0);
    } else {
    var redate = new Date(match[1], match[2] – 1, match[3], 0, 0, 0);
    var parsedate = Date.parse(redate);
    return parsedate;
    return str;
    function cp(f,c){
    var g,h; f=g=f.v.toLowerCase(); c=h=c.v.toLowerCase();
    var i=parseFloat(f.replace(/($|,)/g,'')), n=parseFloat(c.replace(/($|,)/g,''));
    i = myparsedate(f); n = myparsedate(c);
    //i=Date.parse(f); n=Date.parse(c);
    if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
    return g>h?1:(g<h?-1:0)

  • Banyan36b

    I have a problem with ie9. Works fine on ie10, ie11, chrome, firefox.


    t.replaceChild(n, t.b); if (this.paginate) { this.size(this.pagesize) }

    An error is thrown and the sort fails

    0x800a139e – JavaScript runtime error: NotFoundError

    Any ideas

  • Bryan Eagle

    for your info, this does work to do default descending, but the second "Change this line" got messed up.
    We need to add a hyphen before the "1" in front of the colon in the return command.

  • Please help, the script shows n/a when ANY cell is empty, for example:
    1,2,3 empty,4,5
    will not calculate, how to adjust this script to allow for "if null then "0""

  • also how to add header to the totals?

    else{r.cells[i].innerHTML=' '}
    if I change the   to "Total" it populates "total" in every cell,I need it to the be in the first column at the bottom or combined all cells before the first summed cell?possible?

  • 何勋

    我先用中文回复一下 以免意思不准确 你可以在源码里头 找到init()方法 然后手动加上第三个参数cb 然后在init方法的最后加上一个if (cb) {cb();} 然后初始化调用的时候 sorter.init("exampleList", 2,setinitDesc);
    function setinitDesc() {
    }这样就解决问题了 虽然有点投机取巧。。

  • 何勋

    you can find init method in source code and add third parameters cb and add code "if (cb) {cb();} " manually to the last position of init method.finally write a call back method to make target td init method desc.athough it's like a trick but simple and avalible