Advanced JavaScript Table Sorter – TinyTable V3

Javascript 172 responses so far

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.

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

Latest posts by Michael (see all)

  • http://whybered.com pmroom

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

  • simon

    freakin fantastic! they will write songs about you

  • http://apexinnovations.com Wendtly

    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.

  • http://apexinnovations.com Wendtly

    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.

  • Michael

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

  • Pingback: TinyTable v3, la herramienta perfecta para tus tablas : Blogografia

  • http://www.leigeber.com Michael

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

  • Pingback: CSS Brigit | Advanced JavaScript Table Sorter

  • Pingback: TinyTable v3, la herramienta perfecta para tus tablas | aNieto2K

  • http://www.cancelbubble.com cancel bubble

    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.

  • http://www.leigeber.com Michael

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

  • jordi romeu

    Question!!

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

    Any solution?

  • http://www.leigeber.com Michael

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

  • http://www.iconik.com.ar Gaston

    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!

  • Shurik76

    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)

  • http://www.leigeber.com Michael

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

  • Pingback: links for 2009-11-17 | On9 Systems

  • Pingback: Sortable Table 可排序表格JS收集 | ╭╰Original Colors╯╮ - 认真工作

  • carlos

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

  • http://www.leigeber.com Michael

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

  • carlos

    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?

  • Pingback: links for 2009-11-17 « riverrun meaghn beta

  • Pingback: TinyTable v3 - Tabellen mit JavaScript sortieren, durchsuchen, etc. | tagdocs.de

  • Pingback: links for 2009-11-18 | Yostivanich

  • Pingback: An Advanced Lightweight JavaScript Table Sorter: TinyTable V3

  • awake

    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

  • Pingback: TinyTable V3: Advanced JavaScript Table Sorter || webresources4u.com

  • Webfoo

    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

  • Indy

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

  • Jeff Jodoin

    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

  • http://merrickchristensen.com Merrick Christenesn

    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.

  • Barry Belford

    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.

  • http://www.leigeber.com Michael

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

  • Tomasz

    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.

  • Wouter

    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

  • http://www.srisoftwarez.com Jegan

    Hey Wouter,

    The way you fix it really worked for me. Thanks

  • http://www.ecogiochi.it giochi gratis

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

  • miki

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

  • Saheed

    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

  • Will Robertson

    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.

  • http://cmt.lugcix.org Cmt

    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

  • Daniel Ferry

    Very cool. Row hover is not working in IE7.

  • 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

  • ronald

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

  • http://www.weblogixesolutions.com webdevelopment India

    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.

  • Destro

    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

  • Jorge

    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!

  • http://www.noborder.nl Elles de Boorder

    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

  • http://www.euroof.hu Viktor

    Hi!

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

    Thanks!

    V.

  • Pingback: TinyTable v3 con jQuery Context Menu y Dialog UI «dsite.es

  • http://www.tarragon.co.uk Pete

    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

  • Jamie Sutherland

    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

    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!

  • Sunny

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

  • zsolt

    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

  • http://www.ig.utexas.edu Kevin

    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.

  • http://www.ig.utexas.edu Kevin

    I think I just answered my own question….

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

  • http://www.ig.utexas.edu Kevin

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

  • http://www.ig.utexas.edu Kevin Johnson

    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.

  • vijay

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

  • leland

    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.

  • Fredrik Johansson

    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?

  • Djalma Bento

    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

  • Victor

    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.

  • Rafael Rodrigues

    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

  • Irvin Roy

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

  • http://www.spicewebs.in webcasting chennai, webcasting bangalore, webcasting india

    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

  • kato

    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?

  • Pingback: Buscar y ordenar texto con acentos en TinyTable v3 «dsite.es

  • Georgiy Giggle

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

  • Zito

    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

  • Pete

    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

  • Federico

    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

  • Vasilii

    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

  • http://none Vasilii

    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

  • Sunny Golani

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

  • Ajay B Mali

    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

  • Pingback: Mabufiles » Blog Archive » TinyTable v3, la herramienta perfecta para tus tablas

  • http://stecnologicas.com Carlos Ramirez

    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.

  • http://www.biztechconsultancy.com/ Manali P

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

  • Hariram

    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.

  • PS

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

  • Pingback: Tweets that mention Advanced JavaScript Table Sorter – TinyTable V3 - Web Development Blog -- Topsy.com

  • Pingback: Ordenar datos de una tabla con TinyTable | SummArg

  • Pingback: TinySlideshow « After Zain Sleeps

  • Mark Petterson

    Great Script.
    I was wondering. Can you extract the data from an excel spreadsheet?

    regards,
    Mark

  • Pingback: Webmasterkit.info » Free Sortable and Searchable Tables

  • Linna_johari_w

    I want to give my data a Cluetip when i mouseover on a row of data. For the first time , my cluetip is working. But after I short the table.. It doesn't work anymore. I don't know how to fix that . Can you help me? thx before..

  • Peter Van Caeseele

    Here is the fix for the 'pagedropdown' for IE6 and IE7. Replace the following line:

    d.setAttribute('onchange',this.n+'.goto(this.value)');

    with

    var gf = this.goto;
    d.onclick = function() { gf(this.value); }

  • Peter Van Caeseele

    Here is the fix for the hover bug:

    sorter.prototype.sethover=function(){
    if(this.p.hoverid){
    for(var i=0;i<this.t.l;i++){
    var r=this.t.r[i];

    var hf = this.hover;
    r.onmouseover = function() {
    hf(1,this);
    };
    r.onmouseout = function() {
    hf(0,this);
    };
    }
    }
    };

    sorter.prototype.hover=function(d,r){ r.id = d ? this.p.hoverid : '' };

  • Peter Van Caeseele

    Here is the fix for the fix for the hover bug :P

    sorter.prototype.sethover=function(){
    if(this.p.hoverid){
    for(var i=0;i<this.t.l;i++){
    var r=this.t.r[i];

    var hf = this;
    r.onmouseover = function() {
    hf.hover(1,this,hf);
    };
    r.onmouseout = function() {
    hf.hover(0,this,hf);
    };
    }
    }
    };

    sorter.prototype.hover=function(d,r,t){ r.id = d ? t.p.hoverid : '' };

  • Peter Van Caeseele

    And of course the fix for the fix of the 'pagedropdown' bug (dont you love closures?)

    Replace the following line:

    d.setAttribute('onchange',this.n+'.goto(this.value)');

    with

    var gf = this;
    d.onclick = function(e) { gf.goto(this.value); }

  • newuser

    i have an ID comumn which is not gettin sorted. it says 1,10,11,12 and so instead of 1,2,3,…,10,11,12 and so on…kindly let me know how this problem can be fixed.

  • Epp1123

    If I want to sort dates in a dd/mm/yyyy how am I going to do that? Thanks!

  • Nyxll

    I was having some major problems parsing the dates. Sorting was unreliable.

    I had to make a change because the parseFloat function was parsing my date as a partial number.

    I changed
    if(!isNaN(i)&&!isNaN(n)){g=i,h=n}

    to

    if(!isNaN(i)&&!isNaN(n)&&f.replace(/($%|,)/g,'')==i&&c.replace(/(|$|%|,)/g,'')){g=i,h=n}

    This catches things like multiple dashes and periods. I also put in the % so my code would ignore percents on a sort and I didn't have to worry about formatting.

  • Nyxll

    I was in error. My Fix only worked because I was using YYYY-mm-dd. I had an extra space at the end that was causing the Date to be cast as a string. When I filtered that out, dates work beautifully. For our UK friends. Add the following to the fop of the script.

    Date.UKparse = function(dd)
    {var aa = dd.split(/[\/]/);aa = [aa[1],aa[0],aa[2]];return new Date.parse(aa.join('/'));}

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

    to

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

  • Nyxll

    Numbers sort beautifully. Make sure that you don't have extra spaces in there or other characters that change it from a number to a string.

  • Steve

    Will there be an update for FireFox 4? The problem is that FireFox 4 doesn't support the CSS overflow property in TBODY, THEAD and TFOOT tags, it breaks the scrollbar.

    I really hope there's an update for this.

  • http://www.dustingtaylor.com/ Dustin Taylor

    Is there a way to dynamically populate the search box and call the search function on page load?

  • pinho

    Merveilleux site avec de bom script…
    Continuez
    Merci beaucoup et bonne continuation

  • Anonymous

    Sure, just call the object.search() function after you initialize the component. You will pass it the $_POST['param']. Shoot me an email if that doesn't make sense.

  • Nike Gunjaca

    Please, is there a way to know what row is select?

    regards

  • Muhammad Atiq

    HI i used this library for table sorting and searching. but i want that when i click on any heading of the table. so the record is sorted when i reload the page so this record is not in sorted order that i sorted. tell me that it have cookies support. i want that the record that i sorted remain same which time i login again. and then i manually change it again.

    thanks

    Atiq

  • Live

    Hi is there a way where I can print the tiny table? Or if I filter the data with Search, how can I print them? Thanks.

  • Yves

    Hi Leigeber,

    Can you give me more information about how to use the object.search() function.

    I initialize the object like this:
    var sorter = new TINY.table.sorter('sorter','table',{

    });

    after I call the function like this:
    sorter.search('searchword');

    but it doesn't work.

  • dTi

    Hi! I need to use more than one tinytable on one HTML page. But work only first table. How can I fix it? Thanks.

  • Andrew J. Demeter

    Can you tell me how I could sort by Day of the Week?

  • Guest

    No problemo …

    Every Table and Table Element (like Pagers, Search Field, etc) needs an own ID … then you have to build an instance of the sorter for each table …
    providing this instance with ne given ids (remember to set the id for the search field, pagers etc…)

  • Lapeno

    Hi, Is there a way to  call the search function on page load with a predefined search word? Thanks.

  • Thatsgame1

    I'd like to know how to do this as well. I want it to have a predefined word in the search box.

  • wikiwikiWA

    having Array.prototype.exists in all Arrays screwed up my entire site! i changed it to another type of function 'Arrayexists=function(v, array1)' which is better.

    Why is this not in the sorter object? This is really messy imho

  • http://www.facebook.com/people/Vandir-Sousa-Ribeiro/100000379285185 Vandir Sousa Ribeiro

    How to add condition for SUM values?

    Thanks.

  • Chives

    I noticed that, in Chrome (using version 13), the rating and percentage columns in your demo aren't sorting correctly — either ascending or descending order.  I don't see any rhyme or reason to the order that is imposed on the table by Chrome.

    Thanks again for the great script!

  • Fazeel

    Any one please help..!! 

    Am calling the TinyTable V3 in JQuery Ajax Call in iframe, the problem is when I call the  ajax function the TinyTable V3 is displaying the table but without sorting pagination and filter option.

    The error I got from firebug in mozilla is " p is null " I dont know what is this error..

    The Code Snippet is below..

    function test1() {         $.ajax({ url: 'view_all_patent.php', success: function(data) { $('iframe[name="master_frame"]').contents().find("body").html(data); $.unblockUI(); }, cache: false , });     }      $(document).ready(function() {                 $('#test').click(function() {             $.blockUI({ message: '<b><font face="Verdana,Arial" color="red" size="2px" ><img src="images/busy.gif" width="17px" height="17px"/>   Loading..Please Wait..</font></b>' });              test1();         });     }); 

    am using jquery1.6.2 . version.

    Some one please help..

  • NovriezNoph

    how to fix bugs html tag in search ?
    try search "href" (without ")

  • http://pulse.yahoo.com/_NANXXWF42HGP34GRDJL4RMQX4Y tazan

    I used with jquery to select any element, but can not find selector when try to sorted.
    there is an error happened when use with uploadify. Why?

  • Michael Gutentog

    I have a problem: 1000-rows table work very slow in IE8. Here is a test:

    http://ir2.ru/sorters/tiny/table1000.htm

  • User1

    We are trying to use Tinytable in a freemarker template, but it doesn't work. If we rename it to .html it works perfectly. Any suggestions?

  • ged700

    When I use -1 for the sordir parameter, the table header shows even though then asc icon and not the desc icon. Is this a bug ?

  • Youarenumber1

    pagedropdown not working in IE7

  • Fazeel

    Admin please help..

    In Advance search option how can I remove a non sorting column name in drop down list box ..??

    Please reply asap..

  • Fazeel It

    Any new version release for Chrome sorting bug??

  • Patricia Donnadieu

    Hello, Very nice plugin ! But I have a error message :
    c is undifined
    on the line begining with : if(c.className!='nosort'){…

  • Eric S

    I love this script and have used it in a couple places. Thanks!

    This and older versions of TT have trouble sorting part numbers unless quoted however quoted part numbers are ugly.

    These sort a mess:

    113-721-305 B
    113-721-305 A
    111-721-305 C
    113-721-305 A
    113-721-305 B
    113-721-305 B
    113-721-305 B
    113-721-305 A
    111-721-305 C
    113-721-305 A
    113-721-305 B
    113-721-305 B
    111-721-305 C
    113-721-305 B
    111-721-305 C
    113-721-305 B

    These sort fine:

    "113-721-305 B"
    "113-721-305 A"
    "111-721-305 C"
    "113-721-305 A"
    "113-721-305 B"
    "113-721-305 B"
    "113-721-305 B"
    "113-721-305 A"
    "111-721-305 C"
    "113-721-305 A"
    "113-721-305 B"
    "113-721-305 B"
    "111-721-305 C"
    "113-721-305 B"
    "111-721-305 C"
    "113-721-305 B"

    Just FYI. I'll use quoted strings because this is in a back end report so no customers will see it.

  • http://craziation.com/table-sorting Eric S

    I have published an example of the part number sorting problems mentioned below at http://craziation.com/table-sorting

  • Andrew

    Hey Eric,

    Doesn't matter, there doesn't seem to be any help on this site for questions…

  • http://craziation.com/table-sorting Eric S

    I didn't expect anyone to rewrite the code just for this. It's just a FYI for others seeking a work-around. Maybe the developer will take this situation into account for V4.

  • Angelinux

    'null' is null or not an object
    line 186, character 22

    i load via ajax, and work fine with asset.javascript, but when i load again, show an error in IE8

  • Michael

    Line 14: You have to add; value="Sample"
    <input type="text" value="Search Example Text" id="query" onkeyup="sorter.search('query')" />

  • Michael

    I posted a reply to your question on Lapeno's same question. Hope that helps.

  • Michael

    Thanks for this very handy tiny script. Very useful.

    There is only question; When I have text in the last column all is fine. No math is needed, but when I add numbers it calculates the average. Cool, but I'd like to have the total. Which part of code in which file has to be changed? 

    (instead of 5,10,15 = 10, I want 5,10,15 = 30)

    Please use the 'reply' button with the answer. Thanks !!

  • Steward_1128

    the auto filter bar, how i customize the element inside? can somebody show me?

  • Michael

    So, what's the replacing code for this line?

    avg:[6,7,8,9], // Index of Columns to Average (optional) //

  • Michael

    In Safari and Firefox the ID's work fine, in IE not tested, but in Chrome there is an issue.

    I want them to go from 300 to 001. But in Chrome it starts with 049 to 032, then 012 to 001, then from 099 to 050, then from 300 to 100 and finally from 031 to 013. Any idea why it does this in Chrome, while it works fine in Safari and FireFox?

  • thorny

    This site demo is still not working for chrome.  I found this out the hard way, and it was pretty embarrassing during a client meeting.    I need to fix this or find another table sorter asap. 

  • http://hsmoore.com hsmoore.com

    This looks like a really nice script, but I'm loading data using ajax and I keep getting "d is null"… arg

  • Oao

    Do anyone can resolve this bug in Firefox ?

  • Ryan Fligg

    I have the same issue in Chrome.  It is not all tables but certain columns do not sort correctly.  Example posted here:  
    http://www.windward.net/broken_table.php
    Load the page then click on column 3.  You will see the items are not sorted.  Works fine in IE9/Safari/Mozilla.
    Table is sorted correctly with default column of the last column Total.

  • http://www.machit.de/ Otto

    Nice script, I really love it!

  • Guest

    Hi,

    i miss the count number of results like e.g. count:[0].

    A good script very nice.

  • w00dst0ck

    Hello Fazeel IT!

    Did you find a solution for this?

    Regards,
    w00dst0ck

  • Paul Cruse III

    is there anyway to add "filters," like check-boxes (like Male or Female), or drop-down menues with a "range in value" (like 1,000 – 2,000)

  • http://www.facebook.com/profile.php?id=1007441663 Alfonso Campos

    Yeah some1 nows how to do that? I can populate as stated up but have no clue how to call on page load!!

    Also is there a solution for the Chrome bug sorting numbers?
    Thx!

  • http://www.facebook.com/profile.php?id=1007441663 Alfonso Campos

    Ok I still don't know about d call on load but as far as the Chrome bug goes this is the solution:

    modify your cp function as this (script.js)
    function cp(f,c){
    var g,h;
    f=g=f.v.toLowerCase(); 
    c=h=c.v.toLowerCase();

    var i=parseInt(f, 10), n=parseInt(c,10);
    if (!isNaN(i)&& !isNaN(n)){
    g=i,h=n
    }
    else{

    i=parseFloat(f.replace(/($|,)/g,'')), n=parseFloat(c.replace(/($|,)/g,''));…. …. …. …. i=Date.parse(f);  n=Date.parse(c); if(!isNaN(i) && !isNaN(n)){ g=i; h=n } } return g>h?1:(g<h?-1:0) };And it will work on Chrome :) Good luck!

  • stangl

    quick solution for google chrome sorting problem:

    in function cp()

    delete or comment this lines:
    //  i=Date.parse(f); n=Date.parse(c);//  if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
    after this sorting in google chrome is ok.
    but if you want to sort date strings you have to debug more or add your own date-converting-function.

  • Michael

    Thank you very much, this works for most of my table.

    Only when I use the date like 2001/04/04 and 2012/04//04, the order is messed up in every browser.

  • Dee

    Nice sorter, have been using the earlier versions too. I had a similar issue like Victor above, but I do want to paginate. So what I did was, instead of if(!t.a[i].s){r.style.display='none'}else{r.style.display=''}, I replaced the alt function line with if(!t.a[i].s){r.style.display='none'}else{r.style.display=t.l} which means when the user backspaces the text in filter, in the end it'll go back to displaying the number of records as set by the dropdown selected (10 or 20 or 50..)

  • Federico

    This worked for me

  • http://salvatorecapolupo.it/ Salvatore Capolupo

    Very useful and fast, thank you!

  • blue

    Hi, that's very nice!
    one comment though, I believe that "reset" should also reset the filter selection, not just the table.

  • New2JSP

    Hi All,
    I am using this table in a jsp file. The table functions as expected, but the table header is a bit distorted. It appears as two rows.
    I checked it in FF/Chrome/IE7.

    Any ideas ?

    Thanks.

  • http://twitter.com/googhalava googhalava

    Thank you!

  • http://twitter.com/googhalava googhalava

    The script is awesome!

  • http://www.facebook.com/preetzz.singh Preetzz Singh

    I have loaded the data into Table Sorter via MySQL Dynamically, but its only sorting when i click on the row or column…

    Is there any way to sort Ascending and Descending data by default ????

  • None

    HI,
    How to refresh table content?

  • farth

    Select to sort the values ​​or value of parts of the form is?

  • http://www.facebook.com/henrygabriel.gonzalezmontejo Henry Gabriel González Montejo

    in your query use order by (mysql_campID) ASC or DESC….and in the initialize table sorter, delete de line
    sortcolumn:1

  • http://www.facebook.com/henrygabriel.gonzalezmontejo Henry Gabriel González Montejo

    sum:[8], the number of column that you want to sum, if not needed average, only delete that line..

  • web folder

    If my table has check boxes, for example I use different sortings to select certain rows, any new sort cleans all previously checked values. Is there any way to persist state of elements at sorting?

  • Shyam Renjan

    Hi nice script,
    can u tell how to remove a particular column from search options.

  • Humberto

    I can put as many tables in one code php

  • Shyam Renjan

    Can anyone please tell how to download the source code of this. bcos the above link is not working.

  • Money

    Hey, I noticed an issue with Tiny Table. Once the demo page is loaded, click on the page drop down and select a page in the middle(pages 2-4) as long as it's not the first or the last page. The next arrow link does not work, until you click the previous arrow. I noticed on my own page and confirmed it on the demo page here.

  • javad

    can combine this script by php and mysql ? all record not loading in page !

  • mukeshdak

    Lot of thanks to you for providing such a nice script for free

  • jyothi

    Thank you so much for this solution..

  • Dave Jurgensen

    For everyone using this script wanting to parse a DD/MM/YYYY value for date as opposed to MM/DD/YYYY:

    Nxyll came up with a solution (2 years ago.. way done in the posts now!).

    I was getting an error(found using Firebug – very useful!):

    TypeError: Date.parse is not a constructor

    To fix this, I removed 'new' from ….. ;return new Date.parse(………

    Below is his original post, with the ameded working code:

    <quote>
    I was in error. My Fix only worked because I was using YYYY-mm-dd. I had an extra space at the end that was causing the Date to be cast as a string. When I filtered that out, dates work beautifully. For our UK friends. Add the following to the fop of the script.

    Date.UKparse = function(dd)
    {var aa = dd.split(/[\/]/);aa = [aa[1],aa[0],aa[2]];return Date.parse(aa.join('/'));}

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

    to

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

    </quote

  • Oliver

    hi .. had the same problem … remove the <h3> in the tableheader and put some css code in there, to look like the other headers

  • standby

    hey there!

    I'd got problems with sorting numbers, yyyy-mm-dd [hh:ii] dates and mixed data types e.g. 6320 Szeged, Arany J. u. 3.

    here's my solution:

    function myparsedate(str){
    var match = str.match(/^(d+)-(d+)-(d+)( (d+):(d+))?$/);
    if (match){
    if (match[5] && match[6]){
    var redate = new Date(match[1], match[2] – 1, match[3], match[5], match[6], 0);
    } else {
    var redate = new Date(match[1], match[2] – 1, match[3], 0, 0, 0);
    }
    var parsedate = Date.parse(redate);
    return parsedate;
    }
    return str;
    }
    function filterfloat(value){
    if(/^-?([0-9]+(.[0-9]+)?|Infinity)$/.test(value))
    return Number(value);

    return NaN;
    }
    function cp(f,c){
    var g,h; f=g=f.v.toLowerCase(); c=h=c.v.toLowerCase();
    var i=filterfloat(f), n=filterfloat(c);
    if(!isNaN(i)&&!isNaN(n)){
    return i – n;
    }
    i = myparsedate(f); n = myparsedate(c);
    if(!isNaN(i)&&!isNaN(n)){
    g=i; h=n
    }
    return g>h?1:(g<h?-1:0)
    };

    it works fine in chrome, ff and ie as well.

  • http://www.Visualguideto.com dunga

    hi, once again, I see that there are three versions of the script and none takes into consideration an empty sells:

    please post corrected version where the script calculates sum with empty sells considered as zero.
    Much appreciated, Michael

  • http://www.endoftheinternet.com/ Flemming Lemche

    Hi,
    Thanks for this great script.
    I have one problem though.
    I want to use the script more than once per page but because of the element ID's this is not possible.
    Will this script come in a V4 which enables it to be used more than once on a page (and used with tabbed navigation) or is there a way to come around the once pr. web page problem ???
    Best regards
    Flemming

  • mukeshdak

    Great Script !!!!!!

    Thanks a lot

x
Loading...