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

54 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

Leave a Reply

General comments only please. Visit forum.leigeber.com for technical discussion.