TinyTable Table Sorting V3

The third iteration of the TinyTable table sorting script adds search, column averages and totals, record numbering, a view all function, and a reset function. At only 6KB it is still lightweight, quick, and includes all previous TinyTable features. Other features include alternate row highlighting, header class toggling, auto data type recognition, and selective column sorting. If you don’t need the new features take a look at the second version of the script which weighs 2.5KB.

To initialize a table sorter follow the pattern below:

var sorter = new TINY.table.sorter('sorter','table',{
	headclass:'head', // Header Class //
	ascclass:'asc', // Ascending Class //
	descclass:'desc', // Descending Class //
	evenclass:'evenrow', // Even Row Class //
	oddclass:'oddrow', // Odd Row Class //
	evenselclass:'evenselected', // Even Selected Column Class //
	oddselclass:'oddselected', // Odd Selected Column Class //
	paginate:true, // Paginate? (true or false) //
	size:10, // Initial Page Size //
	colddid:'columns', // Columns Dropdown ID (optional) //
	currentid:'currentpage', // Current Page ID (optional) //
	totalid:'totalpages', // Current Page ID (optional) //
	startingrecid:'startrecord', // Starting Record ID (optional) //
	endingrecid:'endrecord', // Ending Record ID (optional) //
	totalrecid:'totalrecords', // Total Records ID (optional) //
	hoverid:'selectedrow', // Hover Row ID (optional) //
	pageddid:'pagedropdown', // Page Dropdown ID (optional) //
	navid:'tablenav', // Table Navigation ID (optional) //
	sortcolumn:1, // Index of Initial Column to Sort (optional) //
	sortdir:1, // Sort Direction (1 or -1) //
	sum:[8], // Index of Columns to Sum (optional) //
	avg:[6,7,8,9], // Index of Columns to Average (optional) //
	columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}], // Sorted Column Settings (optional) //
	init:true // Init Now? (true or false) //
});

The first parameter taken by TINY.table.sorter is the variable name used for the object, the second is the id of the table, and the third is the settings object. You can either initialize the script in the object creation by setting init to true or you can initialize it later using sorter.init().

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.

11/16/2009 – Updated script to function correctly in IE6/IE7.

Posted by Michael in JavaScript on November 15, 2009

91 Responses

This is exactly what I was looking for! Thank you so much.

pmroom on November 16, 2009 at 12:35 am

freakin fantastic! they will write songs about you

simon on November 16, 2009 at 1:13 am

Totally awesome! Thank you!

roadrunner on November 16, 2009 at 7:57 am

Great, but would have been nice to have swapped the upper right stuff (page X of Y) with the lower left stuff (navigation) so that the navigation is always in the same place on the screen no matter what filtering is done, or how many records happen to be on the page. Sure makes navigating easier! I'm sure I'll just end up editing to make this work.

Wendtly on November 16, 2009 at 9:13 am

Wait a sec… you're still putting the header and footer in manually?!? Dude, c'mon… need a one-line script to add after ANY table that will auto-insert header and footer. I'll stick with my home-grown… but I do like the sum and avg. Most of the rest of the init params are really irrelevant if you auto-insert header and footer.

Wendtly on November 16, 2009 at 9:25 am

I have problems running the demo in IE7 – Styling works but clicking on column headers to sort has no effect

Michael on November 16, 2009 at 9:45 am

@Wendtly – I didn't insert the header/footer as to not limit anyone from styling any way they like. Feel free to modify the script to your liking.

@Michael – Thanks for the heads up, forgot to change an onclick setting. It has been updated.

Michael on November 16, 2009 at 11:25 am

Check de Dojo toolkit. Dojo grid.

John Doe on November 16, 2009 at 2:19 pm

When you sort the columns, the column widths change, ideally they should stay the same widths so there is no jarring transition.

Pretty damn sweet, otherwise.

cancel bubble on November 16, 2009 at 2:50 pm

@cancel bubble – Will thank about that. Obviously it can easily be done on the table itself but at the same time you ideally want to minimize wrapping and fixed widths accommodating the largest content can really push out the width of the table. Thanks for the suggestion.

Michael on November 16, 2009 at 3:35 pm

Question!!

What happens if you have 10,000 rows to load? It could be slow to load all the page, no?

Any solution?

jordi romeu on November 17, 2009 at 7:05 am

@jordi romeu – I will be posting AJAX versions for both ASP.NET (C#) and PHP. This script is only intended for relatively small data sets.

Michael on November 17, 2009 at 8:29 am

Hey buddy! You made a really good work with this, but im trying to apply it into a table thats loads dynamically the content (PHP + MySQL), I have a list of products in a CRUD (Create, Read, Update and Delete) and the JS has a problem, can't order anything; its says: "'sorter' is null or not an object"; when you try to order by a colum or when you want to search.

Do you have a tip o trick to tell me how to solve this little thing?

Thanks!

Gaston on November 17, 2009 at 9:16 am

Setting "paginate:false," breaks the script. After applying the filter that produces no results (for example "asdfasdfasd"), removing the filter wouldn't restore the table. The only way to get rid of pagination is to set "size:500," (or something that's definitely bigger than the number of rows in your data set)

Shurik76 on November 17, 2009 at 9:20 am

@Gaston – Sounds like the object wasn't instantiated correctly. Would need a link to determine for sure.

@Shurik76 – I will look at that today, thanks for the heads up.

Michael on November 17, 2009 at 9:26 am

hi, is there any restrictions or problem if i try to display 4.000 entries/files with data??
and another question, if i have 200 entries the page will finish load when allllll thatst files are loaded? or it just load the first 10/20/40/50 rows (dependind of what i set)???

carlos on November 17, 2009 at 7:51 pm

@carlos – There are no restrictions except for the client browser, CPU, and memory restrictions. That being said I definitely would not recommend using this solution without AJAX for data set over 1,000 rows. Without AJAX all the rows will load at once.

Michael on November 17, 2009 at 8:29 pm

Hi michael, thanx for your answers, can you tell me how should i do that of the ajax load of the entries?
or maybe is there any way to first just show the seach box and after the peticion of the word to seach it does apear the results? in another page?

carlos on November 17, 2009 at 9:03 pm

very useful, but is there a way that the next buttons can actually do an ajax load.

this will be of course better than trying to load 50,000 records at once and then sorting it on the page with ajax

awake on November 19, 2009 at 10:18 am

Nice…this it he stuff for Champs. When you do the Ajax version can you also do one for Classic ASP if you find it in your heart to accommodate us.

Thanks

Webfoo on November 22, 2009 at 5:44 pm

Looks great small question: How can I use the search with two tables on a page?

Indy on November 24, 2009 at 6:33 am

Awesome functionality … but a few bugs.

1) When resetting, the filter box does not clear.
2) When resetting, if display all entries (eg 100 in your sample), only the first 20 draw.
(Table default) The row entries popup should reset to default. Also, using the row entries selector after a reset is wonky.
3) When resetting, the rows do not sort to the original table load. IE – all were sorted
initially on column 1 (ID). On reset, the initial load / sort should be restored.
4) On sort by columns with multiple same values (rating, etc.) – is there a second sort
key (such as ID)? Or is a hidden sort possible where each column can have an alternate sort key? For example a Table Name Word Numerals, Column 1 values are "one", "two", "three", "four" (alphabetic) but the sort would be numeric (1, 2, 3, 4).
At least one other JavaScript sort project has this. This is also a way to allow for
two column sorting. To Sort on Column A then Column B you would have Column A have
a hidden sort value of ColumnA+ColumnB. Each hidden sort value would be added by
the page programmer via a hidden column sort value definition function or variable assignment.

Rregardless, thanks for the hard work. I look forward to 3.1 — hopefully soon. My users
will love this.

jeffrey

Jeff Jodoin on November 24, 2009 at 5:11 pm

Hey! I love this script its absolutely incredible. However, I ran into a small issue where if pagination is set to false and you try to sort with they query search. The delete key doesn't fire the event like it does when pagination is set to true. Strange. Thought I would let you know. Thanks again! This is amazing.

Merrick Christenesn on November 25, 2009 at 11:50 am

I love the possibilities that this tool adds, is it possible to place the TinyTable into the TinyBox window? I have tried but it does not seam to hit the CSS settings of the file.

Barry Belford on November 25, 2009 at 12:15 pm

@Jeff Jodoin – Thanks for the reports/suggestion. Will keep them in mind.

@Merrick Christenesn – That is odd, will take a look and update if I figure something out.

@Barry – Sure it is possible, I plan on a post about TinyBox soon highlighting some integration possibilities with other scripts and a couple small updates.

Michael on November 25, 2009 at 3:18 pm

Hey, first thing, its really a good script ;)

I am wondering how can make the filter using Dropdowns.
For example, lets say we have a Dropdown and a list of items inside, if we choose one of them the filter will be applied to Column 1 or 2 … we could set somehow in which Column it should be used, and show only those records from the selected item in Dropdown.

Is it possible?
It would be really cool if we could do that.

Tomasz on November 26, 2009 at 3:01 am

Hi,

The following didn't work over here when I started experimenting on the demopage.

1st: Select "3" from the dropdown box. Now press the next button, it doesn't go to the next page (pressing the back button does work though).

2nd: Also using the back/forward buttons don't update to dropdown box.

Adding the next 2 lines (don't know if this is the correct way to do it) seem to fix that:

sorter.prototype.goto=function(s){
s=parseInt(s); // fixes 1st issue
if(s<=this.d&&s>0){this.g=s; this.page((s-1)*this.p.size)}
T$(this.p.pageddid).selectedIndex = this.g-1; // fixes 2nd issue
};

Best regards

Wouter on November 27, 2009 at 7:55 am

Hey Wouter,

The way you fix it really worked for me. Thanks

Jegan on November 30, 2009 at 1:54 am

Hi
how can I use two sortable table in one page?
Runs but not paginating…

giochi gratis on December 02, 2009 at 8:33 am

The best table sorter I found, excellent job! Thank you.
Only features missing (compared to others) are click-to-highlight (line) and multisort.

miki on December 02, 2009 at 11:31 am

You have great work as usual. I have a quick question. Do you ever intend on creating a table with fixed headers? For example, if there is a table 100 rows the user would be able to scroll down to the bottom but still see the column header for each column.

thanks,

Saheed

Saheed on December 03, 2009 at 12:23 pm

Hey dude I LOVE Tiny Tables, my only suggestion would be if after a sort you could add a way to add a callback so we could run our own functions cause currently you lose any event listeners on the table sort after it rebuilds the table.

Will Robertson on December 09, 2009 at 12:21 pm

Hello, great script, but I would adapt to a Smarty template, as you would like to know, and I can not get it to work, I load everything, but does not order and do not mind, please, if possible?, Publish

Cmt on December 11, 2009 at 10:34 am

Very cool. Row hover is not working in IE7.

Daniel Ferry on December 15, 2009 at 4:50 pm

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

Oliver on January 13, 2010 at 4:57 am

hi michael! thanks for the great script..however, i'm still having problems when this is used concurrently with another script (like a pop-up window for example). this issue was highlighted in version 2.5. was this issue addressed in this version (i think something to do with dom settings)?

ronald on January 26, 2010 at 12:15 am

Nice work .Good coding.Good explaination.But I couldnt understand sorter.init(). Could you explain in brief. The demo was great and easy to understand.

webdevelopment India on January 27, 2010 at 12:05 am

Totally Very nice stuff….

Karthi on February 01, 2010 at 12:37 am

Hi Michael,
any clue fot sorting date in European format like dd/mm/yyyy, now it seems to work only with the format mm/dd/yyyy?

Thanks!
Destro

Destro on February 07, 2010 at 10:43 am

Hello, i have to say that this is an awesome job! Thank you very much!

I have a question, how can i do search values like "Á" or "á" by only typing "A"? Because this values when I type "a" go to the end of the table…

I hope you can help me.

Regards!

Jorge on February 07, 2010 at 1:01 pm

Hi, I would like to use your tablesorter with dreamweaver templates, cause somebody with less html knowledge will use this in the future. But the sorter won't work anymore when I add some html comments between the html tags like td and tr. I had alse this problem with the accordion. Could you please help me out what to do?
Thanx a lot for a the great stuff you offer here!!!
Elles

Elles de Boorder on February 10, 2010 at 7:08 am

Hi!

Is there a way to make the sorter remember its state after a page reload? Cookies?

Thanks!

V.

Viktor on February 25, 2010 at 5:36 am

Hi Michael,

Can you please assist in changing your code to sort correctly of dd/mm/yyyy dates instead of just mm/dd/yyyy?

Cheers
Pete

Pete on March 05, 2010 at 8:47 am

I also need to swap the dates to UK format, but my js is a bit rusty to say the least! If I sort it I'll post back here Pete.

Jamie Sutherland on March 12, 2010 at 9:57 am

Pete, someone got it working here:

http://forum.leigeber.com/topic/119-sorting-date-in-format-ddmmyyyy/

I tried the same and it works fine for me, despite them saying it crashed in IE it doesn't appear to. Or rather it hasn't yet!

Jamie Sutherland on March 15, 2010 at 9:09 am

Your script is great but when i use href then is blows off. you can check it by typing mailto in your search option. it wont sort. i am trying to solve it. just wanted to help you….

Sunny on March 18, 2010 at 4:40 am

Hi! Your script is amazing, I was looking for something like this for a while. I have a short question: I want to use a second dropdown menu (select) in which there are 4 strings. If one of the options is selected I want to see only those rows in which the string appears. Can you help me with that?
Thanks

zsolt on March 23, 2010 at 2:52 pm

Hi. Love this script. I've found something that works in FF, but not in IE. I'm putting a <select> inside of a table cell as such

<td>
<select name="a1" id="a1" size=1 onChange="sendReq(a1);">
<option>Not Assigned</option>
<option selected>First</option>
<option>Second</option>
<option>Third</option>
</select>
</td>

In FF the "selected" value is shown in the table and you can even sort on that (Sweet!). IE does shows the first option, rather than the selected one. I've tried to find where this happens in your script.js file, but I'm not seeing it.

Thanks for your help.

Kevin on April 07, 2010 at 5:01 pm

I think I just answered my own question….

http://support.microsoft.com/kb/829907/

Kevin on April 07, 2010 at 5:53 pm

I don't see how to fix it even given that. Thanks for any help.

Kevin on April 07, 2010 at 6:00 pm

I guess I'm going to monopolize the blog. This is my fix. It's not elegant.

Line 6-13: (insert)
// Fix IE Bug
// http://support.microsoft.com/kb/829907/
//
selectedIndices = new Array();
var list = document.getElementsByTagName("select");
for (i=0;i<list.length;i++)
selectedIndices[list[i].id] = list[i].selectedIndex;
}

Line 64-71: (previously Line 64)
for(i=0;i<t.l;i++){
var r=t.r[t.a[i].o].cloneNode(true);
var rs = r.getElementsByTagName("select");
for (j=0;j<rs.length;j++) {
rs[j].selectedIndex = selectedIndices[rs[j].id];
}
n.appendChild(r);
}

Seems to work in both FF and IE. Suggestions welcome.

Kevin Johnson on April 07, 2010 at 7:44 pm

I tried this but not working for me.

I have generated a table dynamically like

StringBuilder strTable = new StringBuilder();
strTable.Append("<table cellpadding='0' cellspacing='0' border='0' id='table' class='tinytable'>" + '\n');
StringBuilder sbTbl = new StringBuilder();
//For Loop for Header
sbTbl.Append("<thead>" + '\n');
sbTbl.Append("<tr>" + '\n');
for (int i = 0; i < ds.Tables[0].Columns.Count; i++)
{
sbTbl.Append("<td>" + ds.Tables[0].Columns[i].ColumnName + "</td>" + '\n');
}
sbTbl.Append("</tr>" + '\n');
sbTbl.Append("</thead>" + '\n');

//For loop for Data
sbTbl.Append("<tbody>" + '\n');
for (int j = 0; j < ds.Tables[0].Rows.Count; j++)
{
sbTbl.Append("<tr>" + '\n');
for (int i = 0; i < ds.Tables[0].Columns.Count; i++)
{
sbTbl.Append("<td>" + ds.Tables[0].Rows[j][i] + "</td>" + '\n');
}
sbTbl.Append("</tr>" + '\n');
}
sbTbl.Append("</tbody>" + '\n');
string sTable = strTable.ToString() + sbTbl.ToString() + "</table></body></html>";

like the entire table values retrieved from database.

finally i have attached this to a div like

vv.InnerHtml = sTable;(vv is div id and i used for this as runat="server")

help me how to perform this…..

vijay on April 09, 2010 at 6:22 am

Is is possible to have the table sort by multiple columns at once? And also to have links outside the table to execute sorting? Thanks.

leland on April 26, 2010 at 9:21 am

I want to check alla visible checkboxes in one column, i have tested following script.

function CheckAll()
{
for (var x = 0; x < document.myForm.myBC.length; x++)
{

if ( document.myForm.myBC[x].style.Display == 'none') {
document.myForm.myCB[x].checked = false;

}
else {
document.myForm.myCB[x].checked = true;

}
}
}

Is there anyone who knows how to do?

Fredrik Johansson on May 04, 2010 at 6:36 am

yo;;;;

jack on May 14, 2010 at 3:55 am

Olá por favor alguém poderia ajudar…
Adorei o scritp é muito bom, mais não sei muito sobre javascript e gostaria de atribuir mais colunas quando faço isso a Yiny table não funciona.

Porque, será possível uma ajuda?

Coordialmente,
Djalma Bento

Djalma Bento on May 25, 2010 at 12:50 pm

Very useful script. Saved me a lot of work. However, after setting "paginate:false", the table is not restored when you delete what you have written on the filter.
This can be easily solved by adding an "else" part to the following line in "alt" function.
Replacing "if(!t.a[i].s){r.style.display='none'}" with "if(!t.a[i].s){r.style.display='none'}else{r.style.display=''}" solves the problem.

Victor on May 27, 2010 at 3:46 am

Hello Please could someone help …
I loved the scritp is very good, most do not know much about javascript and would like to assign more columns when I do this Yiny the table does not work.

Why? can be a help?

Sincerely,
Rafael Rodrigues

Rafael Rodrigues on May 28, 2010 at 2:36 pm

Hello, It seems that the GOTO PAGE NUMBER does not work in IE can somebody help me please.

Irvin Roy on June 03, 2010 at 9:31 pm

I disagree this. SEO has future.. SEO Is not only getting high positions in google. SEO Have defined lot. This is increased traffic for the websites

webcasting chennai, webcasting bangalore, webcasting india on June 05, 2010 at 12:44 pm

Hello, is it possible to use this without the <th> and the <h3> in the header? (as it is in the previous version of Tinytable sorter.
I m exporting big tables from excel weekly and can not mess with the (long & messy) CSS that excel produces…

what modif do i need to make in the .js for the script to work without <th> and <h3> in the header?

kato on June 06, 2010 at 7:27 pm

Mmm, there is one defect:
this script CAN NOT sort dates.
Here is my example: http://eve.firetrot.com/table.php
It doesn't understand what date is, so… i realy broke down :(

Can you fix that? Please send answer to my mail (mr.sobaka@online.ua).

Georgiy Giggle on June 13, 2010 at 12:47 pm

after the sorting column script removes the "title" attribute of any tag that is within the TD in TBODY

I want to use a tooltip that displays the text in "title" attribute

can someone help me

Zito on June 17, 2010 at 1:39 pm

Have you worked on a way to use AJAX to get the data on large datasets?
Also is there a way to freeze one or 2 of the first to columns. (Excel Freeze pane style?)

Cheers
Pete

Pete on June 22, 2010 at 11:28 am

Hi, many thanks for this excellent script.

I'm using in my site:
http://www.asteivg.it/auctions_show.php?option=featured

I have a little question: it's possible sorting money columns with euro sign = "€. " ?

Thanks to those who want to help.

Cheers
Federico

Federico on June 30, 2010 at 1:20 pm

Hello!
In your code I had been found an error.
Sorting according to a date of birth is fulfilled incorrectly.
Correct sorting is necessary for spending in a following order:
– To sort by a year of a birth,
– To fulfil sorting according to month of a birth,
– To sort by birthday.

I ask you to rectify an error and to send on my mail: vasek91@list.ru

Yours faithfully, Vasily

Vasilii on July 10, 2010 at 12:21 am

Hi!
In your code I had been found an error.
Sorting according to a date of birth is fulfilled incorrectly.
Correct sorting is necessary for spending in a following order:
– To sort by a year of a birth,
– To fulfil sorting according to month of a birth,
– To sort by birthday.

I ask you to rectify an error and to send on my mail: vasek91@list.ru

Yours faithfully, Vasily

Vasilii on July 10, 2010 at 12:22 am

I want to print the contents of the tiny table. can i do so. Please let me know.

Sunny Golani on July 10, 2010 at 6:59 am

Hi Michael

Your script is awesome. I like your script. It is so simple and easy to implement. I am waiting for your ajax version of script.

one thing I found that, the source code which is provided for download. It is not updated.

Dropdown selection for page is not working, when you want to move from page 1 to 5.

I have repalced following line. Not sure
Old Line :-
<select id="pagedropdown"></select>

New Line:-
<select id="pagedropdown" onchange="sorter.goto(this.options[this.selectedIndex].value);"></select>

I would like to hear you on my comment.

Regards
Ajay

Ajay B Mali on July 13, 2010 at 5:58 am

Hi, somebody know how to integrate the tinytable whit php & mysql query?
This will be great for me. Thank you.

Hola, ¿alquien sabe como integrar tinytable con una busqueda a mysql con php?
Esto me seria estupendo. Gracias a todos.

Carlos Ramirez on July 17, 2010 at 5:26 pm

freaking fantastic! Your script is awesome.I was looking for something like this for a while.

Manali P on July 21, 2010 at 12:27 am

Hi,
I was wondering if we had a time component inside the table like HH:MI:SS format then the current code is not sorting properly.

Hariram on July 22, 2010 at 6:09 am

wow fantastic…

karno on July 24, 2010 at 7:05 pm

Quote "@jordi romeu – I will be posting AJAX versions for both ASP.NET (C#) and PHP. This script is only intended for relatively small data sets.
Michael on November 17, 2009 at 8:29 am"

Where can i find this?

And how does one put multiple tables on a page with TinyTable? (i need it on the same page so i can make it in tabs)

Great script !!! THX for it !!!

PS on August 23, 2010 at 1:20 pm

Great script, will come in handy in future projects – Thanks so much. LT

Lisa Thomason on August 25, 2010 at 12:33 pm

Great script, Thanks for share and only 6KB fantastic!

Craig on August 27, 2010 at 2:30 am
Comments are closed at this time.