TinyTable JavaScript Table Sorter – 2.5KB

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?

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

Hey

wil you incorperate a search feature in the future?

It looks great… when is the jQuery version ready?

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.

Hi nice little script

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

great sortable for tables.

internationalization for sorting would be nice for future versions.

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

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

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!

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?

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.

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.

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.

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!

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

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”);”

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?

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

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.

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

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 !

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

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!

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.

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

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.

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

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

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?

thank you. WebSphere. It works

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.

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?

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

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

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?

Hi … Nice Script ..

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

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

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

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

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

Hi Michael, code is useful and excellent. Thanks!

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

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)

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

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

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)

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.

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

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!

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

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)

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

This is 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

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.

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

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!

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.

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

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

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

how do I apply my own styles to cells and rows

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

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

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

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.

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

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?

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!

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

Thank you very much!

Wow i love you dude!

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

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

Are this work with PHP+MySQL?

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

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

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.