TinyTable JavaScript Table Sorter – 2.5KB

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
sorter.init('table',1);

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.

Posted by Michael in JavaScript on March 7, 2009

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?
http://www.leigeber.com Michael

@Koen – There are only 50 entries.
http://www.vcarrer.com Vladimir

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

Hey

wil you incorperate a search feature in the future?
Pingback: My Bad Attitude » TinyTable JavaScript Table Sorter
Pingback: JavaScript Table Sorter - Web Development Blog
http://www.leigeber.com Michael

@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
http://www.edmondscommerce.co.uk edmondscommerce

Hi nice little script

please tell me that isn’t real data in the demo tho!
http://www.redesignyourbiz.com WebDesigner

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
http://www.leigeber.com Michael

@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.
http://sanbor.name Sanbor

This plugin has any domentation? Thanks for share!
volkan

great sortable for tables.

internationalization for sorting would be nice for future versions.
http://windesignworld.com winmonaye

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.
C
http://www.badnmad.com/ Badnmad WebDev

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
http://www.leigeber.com Michael

@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!
http://1timetracking.com Derek Organ

How many table rows do you think it can handle before it would fall over or load very slowly?
http://www.leigeber.com Michael

@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:
2006-05-31
2008-10-08
2008-09-10
2008-10-27
2009-01-10

Any idea how to fix it?
http://www.leigeber.com Michael

@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
Date(datePart[0],datePart[1]-1,datePart[2],timePart[0],timePart[1],timePart[2]);
} 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!
http://www.v3tech.co.in Website Development

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)
http://techinject.blogspot.com Rasmus Christensen

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?

Thanks!
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
http://n/a Sean Clarke

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”);”
http://www.angiedelgado.com.mx angiedelgado

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
sorter.init(“lunes”,2);
sorter.init(“martes”,2);
sorter.init(“miercoles”,2);
sorter.init(“jueves”,2);
sorter.init(“viernes”,2);
</script>
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?
http://www.evanwatkinswebdesign.com Evan

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
http://jenz3n.dk Thomas Jensen

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?

Thanks.
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

Opp’s
** 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:
13/01/1962
03/08/1963
27/11/1961
19/08/1962
31/12/1961
10/08/1963

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?
class=”desc”

thx for help
Pingback: Common Sense Atheism » 400+ Atheism vs. Theism Debates
http://www.ilu.be Jean Eloy

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.

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

enjoy!
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;
sorter1.init(“table1″,1);

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;
sorter2.init(“table2″,1);

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.

S.
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?
http://Personal 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 ?
Thanks
http://webdevelog.com/ Webdev

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”)
Thanks
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}
+ }
+</style>

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?
http://www.equantum.net Andre

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
http://www.8nine.co.uk burnley web developer

i like the speed of this compared to some of the ajax.net stuff.
http://www.galuba.net René

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
http://www.2ememain.net c3essam

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”)
http://parfum-coffret.blogspot.com/ Izzuddin Noor

OK HERE IS HOW TO MAKE THE SORTING TO DESC

===============================================
1ST Change:

sorter.init(“table”, 0);

COMMENT: 0 IS THE ROW id COLUMN BECAUSE I WANT TO SORT THE id BY DESCENDING. YOU CAN PUT ANY NUMBER ACCORDINGLY TO YOUR COLUMN. SO 0 IS THE 1ST COLUMN.

=============================================
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}

TO

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

THEN SAVE THE JS AND START PAGE.

THERE YOU GO. YOU JUST DONE THE DESC ORDER.

MAIL ME IF STIL GOT PROBLEM. TQ
izzuddinmeister@gmail.com
http://parfum-coffret.blogspot.com/ Izzuddin Noor

MR LAMI. MAIL ME FOR THE CODE I MANAGE TO PUT THE CONTROL ON THE TOP PAGE. THANKS. BUT HERE HOW IT GOES IF HTML.

TRICKS : CREATE NEW TABLE WHICH SHARE THE SAME CLASS=”sortable”.
SO BY THAT MEAN WE GOT 2 TABLE INSTEAD OF 1. AND REMOVE THE CONTROL AT THE BOTTOM PAGE. BECAUSE IT WILL CRASH THE PAGING AND ENTRIES VIEW.

============================================
<table cellpadding=”0″ cellspacing=”0″ border=”0″ id=”table1″ class=”sortable” width=”998px;”>
<tr>
<td>
<!– 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>
</select>
<span>Entries Per Page</span>
</div>
<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>
<div id=”text”>Displaying Page <span id=”currentpage”></span> of <span id=”pagelimit”></span></div>
</div>
<!– TOP: END Paging And Sorting –>
</td>
</tr>
</table>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ id=”table1″ class=”sortable” width=”998px;”>
<!– HERE IS THE NORMAL PAGE –>
</table>
============================================
http://deafaccessfilms.com Greg

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).

thakns,
Greg
http://hackerfriend.net HackeR FrienD

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)
http://parfum-coffret.blogspot.com/ Izzuddin Noor

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?? )
http://www.apexinnovations.com Wendtly

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

for(i=0;i<this.l;i++){t.a[i]={}}

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
http://weblogs.javahispano.org/feli feli

Print friendly implementation in my spanish blog "http://weblogs.javahispano.org/feli/entry/sort_table_printfriendly".
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?
Thanx
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.
http://parfum-coffret.blogspot.com/ Izzuddin Noor @ DESC METHOD

OK THIS IS THE EXAMPLE FOR DESC ORDER. I HAVE UPLOAD THOSE FILES. AND PLEASE GIVE CREDIT TO ORIGINAL AUTHOR. MR. LEIGEBER.
I MADE SOME MODIFICATION ON THE SCRIPT.JS AND ADDED NEW VARIABLE FOR TELLING JAVASCRIPT TO RENDER IT DESCENDING ORDER.

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

GREAT JOB MR. LEIGEBER LOVES UR WORKS.
Pingback: JavaScript Table Sorter « creative 5 stars
http://www.gamerection.com Michael House

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!!!
http://weblogs.javahispano.org/feli feli

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.

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

enjoy!
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

From:
i=Date.parse(f); n=Date.parse(c);
To:
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.
http://www.canosys.com nacho cano

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,''));
if(!isNaN(i)&&!isNaN(n)){g=i,h=n}
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,''));
if(!isNaN(i)&&!isNaN(n)){g=i,h=n}
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)
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?
http://www.cubichost.org/ Cameron Gunnufson

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!
http://www.behindthedot.net 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!!
http://www.whousescoldfusion.com Derek

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.

0723309571
439710-1628
7511SFA2419
20356412IM
8707SV40XT

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

ANY HELP WOULD BE GREATLY APPRECIATED!!! THANKS!
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,
de:
var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));

por
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

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

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

realy works! ,
Regards
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
http://www.insolite-du-geek.fr/ lemoussel

Is it possible to know which is the number of column sorted out ?
How can I do that ?
For example :
sorter.init("table",2);
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}
if(this.currentcolumn){T$(this.currentcolumn).innerHTML=y}
if(this.currentorderdir){T$(this.currentorderdir).innerHTML=x.className}
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

Hello,
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

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

Thanks Ivan
Ivan

hello!
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)
list.php?23()

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 vb2005xu

http://vb2005xu.javaeye.com/blog/481236
Tiny.Table Chinese Char sorter support!
http://www.frucomedia.com/ Web design company london

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
http://www.davestewart.co.uk Dave Stewart

Ach!

Just discovered a really bad feature / bug.

It kills existing cell classes. Really not good
http://www.davestewart.co.uk Dave Stewart

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… ?

Cheers,
Dave
Pingback: Getting a Website is Easy » Blog Archive » JavaScript Table Sorter
http://www.velocitydata.com Jared Allen

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?
http://www.panthera.ro Panthera

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.

Thanks!
Sh0gun

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

http://www.jslint.com/
http://www.grabhost.com Oliver

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

http://www.grabhost.com/tinytable/indextick.html

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
Oliver
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!?
thanks
Jia

Hi nacho cano
your script for dd/mm/yyyy is great! thanks
http://www.vossfeldt.de Thomas

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.
http://www.vossfeldt.de Thomas

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
http://www.vossfeldt.de Thomas Voßfeldt

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

span.dontshow
{
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
http://www.skyemedia.com Chris

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);
Date.ToString("'dd'-'mmm'-'yyyy'")

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?

Thanks,
Chris
http://www.skyemedia.com Chris

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,''));
if(!isNaN(i)&&!isNaN(n)){g=i,h=n}
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)

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,''));
if(!isNaN(i)&&!isNaN(n)){g=i,h=n}
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.

Thanks,
Chris
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.

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

NEW
——-
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.

Bye.
Fritz

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

Hello!

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.
http://marioalopez.com Mario

This script rocks!

But, I was wondering how you disable all columns from sorting?
http://elo-950.blogspot.com elo950

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:)
http://www.netbrackets.com Jeff Schmitz

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/2.0.20.27.0.3.1">Pebbles2</a>

<a href="/cgi-bin/WebObjects/netBrackets.woa/-9999/wo/sTwdytWIgLTRRITxhDDtbM/2.0.20.27.1.3.1">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)?

Thanks!
Jeff
http://www.stuartmansfield.com Stuart M

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
http://www.eluminoustechnologies.com/ web development services

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"> 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…
http://www.facebook.com/people/Diego-Lopez/1205944028 Diego Lopez

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.

Thanks
Micah

I finally figured this out. If you are sorting on column 1 it will, by default, sort in ASC order:
sorter.init("table",1);

If you want that to sort by default in DESC order just add a comma desc after the column number:
sorter.init("table",1,desc);
Micah

Opp I forgot to add quotes. Should be:
sorter.init("table",1,'desc');
http://profiles.google.com/marrero.c Carlos Marrero

Hi, the script is working fine on IE 8; but doesn't in firefox 3.6.13; any body is having this problem?
http://profiles.google.com/marrero.c Carlos Marrero

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.

REgards
Preethi
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.
http://pulse.yahoo.com/_EQG2GZADCEMUNQVD3FDCCONMLQ Vijay prakash Shukla

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

Hi
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/2.0.20.27.0.3.1">Pebbles2</a></td>

Rathen than

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

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
http://www.facebook.com/people/Fumio-Hatano/100002013652005 Fumio Hatano

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?
http://twitter.com/derekknight Derek Knight

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. :P
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…..
http://twitter.com/hihats Hisahiro Tsukamoto

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?
http://www.webdeveloperblog.co.uk Jamie Murphy

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!!
http://hsmoore.com hsmoore.com

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.