i guess i can hack it with a callback for now, but would be nice

If a table has a column FOO on page load, and it gets sorted with stupidTable without an initial "data-sort-dir" attribute present, then the behavior is weird: if FOO is unsorted, then it will list in ascending order; otherwise FOO will list in descending order. This is due to the

      if (sorted && $this.data("sort-dir") !== null)

check. The latter operand was supposed to prevent the incorrect descending behavior (if FOO is initially sorted, and the user sorts it for the first time, it should just stay put. The next click should make it sort in descending). However, the latter operand is actually a fluff line of code, because it will never be false. Namely, an unitialized sort-dir datum will return undefined, not null, and in javascript (I tested this using browserstack.com for IE 6/7/8 and Chrome/Safari/Firefox)

undefined != null is false
undefined !== null is true

In light of this, you should change the above conditional either to

      if (sorted && $this.data("sort-dir") != null)
      if (sorted && $this.data("sort-dir"))

so that it's actually doing something.

This is a great jQuery plugin! Any chance you make a tweak to not sort the contents within the tfoot tag?

Thanks!

after clicking a th to sort, my knockout binding goes wacky and doesn't clear the previous table rows before adding the new ones. Order of events:

document.ready: apply stupidtable
table update dataset 1 - works, rows added
table update dataset 2 - works, old rows cleared, new rows added
click on tableheader to sort - works
table update dataset 1 - does NOT work... rows of dataset 1 are appended to rows of dataset 2!

I can fix this by adding $("tbody tr").remove(); to myknockout script but this seems hacky to me.

Let me know if I can be more helpful, this is my first issue post on github. Thank you for stupidtable, works great otherwise!

What would be the best way to sort the table by a given column right after the page is loaded. Before even the click happens ?

Hello,

I'm generally thrilled with the plug-in, great work. Easy to use and implement.
I ran into an issue however whenever setting up a table with a check-all/none checkbox in the thead.
The issue can be seen here:
http://jsfiddle.net/qsBCZ/
As you can see, the checkbox in the thead doesn't even toggle.
I have been able to fix this by altering the plugin to include a more targeted delegation...
....
c.delegate("th.stupidSort","click",
...
The .stupidSort being the addition targeting.
From there, I added the stupidSort class to the columns I wanted sorted...fixed.
I'll try to manage a pull request sometime soon, but rather busy. If someone wants to slide this in with the next revision before I get to doing so, feel free...

As of now there is not a way that i know of that will keep colors in alternating cols.

Example:

tr bgcolor="#E0E0E0"
td 10 /td
/tr
tr bgcolor="#D0D0D0"
td 1 /td
/tr
tr bgcolor="#E0E0E0"
td 11 /td
/tr

When sorted the colors will be mixed up.
Order goes from

E0E0E0

D0D0D0

E0E0E0

To

D0D0D0

E0E0E0

E0E0E0

This would be a great enhancement!

Hello, I see you can sort dates if they use a string for the month, but how about if they use a numeric only format? These don't seem to sort correctly.

thanks for your plugin, so far other than this it works great!

I've a div #slider in which there's plenty of tables.

I use to stupidtable them :

$('#slider table').each(function() { $(this).stupidtable(); });

They're shown by $.hide and $.show . First table (displayed on loading) accept to be sorted. The others sort but duplicate contents.

I've tried also

$('#slider table').stupidtable();

which duplicate contents on first too.

Sry for poor english.

I think by default, it should sort strings case insensitive.

If I am sorting

A,b,C,d, E

at the moment this will sort it like so...

A,C,E, b, d

I think people would like to have by default the string case sensitivity off, except when it's absolutely necessary.

what do you think.?

Is there a way to start sorting my table using jQuery?

Let me explain it: I use $.getJSON and I add for each element in my JSON a new row. But this JSON is unsorted. Can I now sort this table at the end of my .getJSON callback automatically? At the moment I have to click the header to sort the table.

It seems to sort things as uppercase first, lowercase second when the sort type is 'string'. Any way to change this to ignore the case when sorting?

The issue is illustrated in the fiddle given below.

http://jsfiddle.net/geordee/ESEQD/

Is there a way to execute a function after the rows have been sorted?

Hi,

I've troubles with some link inside td when I've bound callback to them. They work fine but as soon as I've sorted the table, the callback are gone. I've made up a quick example here: https://static.kaworu.ch/Stupid-Table-Plugin/

The current workaround I have is to do is to reinstall the callback aftertablesort which is kinda hacky. I guess the solution imply to sort the table in-place. After a quick look it would be very hard (and ugly) to do by only refactoring apply_sort_map so i could not come up with a patch for this.

Regards,
Alex.

I have a date column in my table which sorts ok initially but if you sort by one of the other columns (set to sort by "string") and then go back to the date colum the date column no longer sorts correctly. I can't even determine what logic it's using. The data in the tabel displays as MMM, DD, YYYY so Oct. 28 2013 for example. I have the date column set to update by integer and initially it works fine. Will I need to create a data type "date" to assure it sorts dates as dates? Thanks Joe! (and thanks for the killer simple plug-in)

I forgot this is why I stopped doing jQuery development...

Hey, maintainer(s) of joequery/Stupid-Table-Plugin!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library joequery/Stupid-Table-Plugin is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "joequery/Stupid-Table-Plugin",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

var order_by = e.data("sort-value") || e.text();

Having a value of 0 returns false and then passes e.text instead of sort-value.

I have data attributes in tbody, and once sorting a given table, those data attributes are gone.

Is it possible to preserve all the data that is not related to this plugin and only clear the known attributes of this plugin?

I appreciate that sort_map() simply reverses a column if you toggle it. Less overhead. However, this becomes an issue if any values change. Here's a fiddle with an example of my problem.

http://jsfiddle.net/arlodesign/C34fp/5/

After the table has been sorted once, if any values are updated, the table can't be sorted properly again, instead using what appears to be the map of data when instantiated. It simply reverses the column twice.

This issue may be related to #62 where it would be great to have a method to clear or refresh sorting.

Hi,

i have a table, in this are integers separated with thousends-points like (1.001.210, 1.321, and so on).

I have created an own data-type:

$('.stpSort').stupidtable({
            "thousendsNumber": function(a,b) {
                var new_a = a.replace(/\./g,'');
                var new_b = b.replace(/\./g,'');
                if (new_a < new_b) {
                    console.log('A < B: '+new_a+' < '+new_b);
                    return 1;
                } else if (new_a > new_b) {
                    console.log('A > B: '+new_a+' > '+new_b);
                    return -1;
                } else {
                    console.log('A = B: '+new_a+' = '+new_b);
                    return 0;
                }
            }
        });

but this will not work correctly. How i can sort it correctly?
Any suggustions?

I had some test sample data that was sorting erratically. Had many strings that were "fail" (purposefully), and other strings as well. The thing is, only "fail" sample data was in lowercase, and they were always blocked together away from other strings, but not in true alphabetical order. I can override this with a simple strtoupper() for my data-sort-value. Just thought I'd post this in case it was an issue elsewhere. Here is some sample output without stringtoupper() in place:

Date Name Price
01/15/2013 2013 Membership $100.00
01/15/2013 2013 Membership $100.00
01/15/2013 2013 Membership $1.00
01/17/2013 2014 Membership $999.00
01/10/2013 A Test $250
01/22/2013 Event Registration Test $10.00
01/10/2013 Fail $1
01/10/2013 Fail $1
01/10/2013 Fail $1
01/10/2013 Fail $1
01/31/2013 THis IS A TEST $125
01/10/2013 The first one $1551
01/10/2013 The first one $1251
01/18/2020 The future payment of the future $10000000
01/10/2013 fail $666
01/10/2013 fail $123
01/10/2013 fail $1
01/10/2013 fail $1
01/10/2013 fail $1

There should be an easy way to remove the sorting of a table.

Hi there, thanks for writing this awesome, lightweight plugin. Is search/filtering a feature you're considering to add?

I really appreciate this plugin, but having an issue:

I am using this to sort a table with player data. The Float columns are sorting erratically. Int and String are working fine. Here are my headers:

<table class="player_table">
                    <thead>
                        <tr class="player_table_heads">
                            <th data-sort="string" class="lefty"><span>Name</span></th>
                            <th data-sort="float"><span>Graduation Year</span></th>
                            <th data-sort="string"><span>Position</span></th>
                            <th data-sort="float"><span>*Height</span></th>
                            <th data-sort="int"><span>*Weight</span></th>
                            <th data-sort="float"><span>Arm Span</span></th>
                            <th data-sort="float"><span>Block Touch Jump</span></th>
                            <th data-sort="float"><span>Approach Touch Jump</span></th>
                        </tr>
                    </thead>

here is my jquery call:

var $table = $("table"),
                      $th = $table.find("th");
                      $table.stupidtable().bind('aftertablesort', function (event, data) {
                          $('th').removeClass('up_sorted').removeClass('down_sorted');
                          $th.eq(data.column).addClass((data.direction === "asc" ? "up_sorted" : "down_sorted"));
                      });

and here is an example of output:

<tr class="all_players genderFemale middle_hitter">
                            <td class="lefty"><a href="http://glrvolleyballcombines.com/player-profile?id=140">Brown,&nbsp;Akasia</a></td>

                            <td>2015</td>

                            <td>Middle Hitter</td>

                            <td data-order-by="68.75">5&#39;&nbsp;8&frac34;"</td>

                            <td>133</td>

                            <td data-order-by="73">6&#39;&nbsp;1"</td>

                            <td data-order-by="108">9&#39;</td>

                            <td data-order-by="114.5">9&#39;&nbsp;6&frac12;"</td>
                        </tr>
                                                <tr class="all_players genderFemale right_side_hitter">
                            <td class="lefty"><a href="http://glrvolleyballcombines.com/player-profile?id=229">Alt,&nbsp;Addison</a></td>

                            <td>2016</td>

                            <td>Right Side Hitter</td>

                            <td data-order-by="68.25">5&#39;&nbsp;8&frac14;"</td>

                            <td>141</td>

                            <td data-order-by="66">5&#39;&nbsp;6"</td>

                            <td data-order-by="103">8&#39;&nbsp;7"</td>

                            <td data-order-by="114">9&#39;&nbsp;6"</td>
                        </tr>
                                                <tr class="all_players genderFemale outside_hitter">
                            <td class="lefty"><a href="http://glrvolleyballcombines.com/player-profile?id=246">Farrahi,&nbsp;Alexis</a></td>

                            <td>2014</td>

                            <td>Outside Hitter</td>

                            <td data-order-by="68.5">5&#39;&nbsp;8&frac12;"</td>

                            <td>157</td>

                            <td data-order-by="65.5">5&#39;&nbsp;5&frac12;"</td>

                            <td data-order-by="103">8&#39;&nbsp;7"</td>

                            <td data-order-by="110.5">9&#39;&nbsp;2&frac12;"</td>
                        </tr>
                                                <tr class="all_players genderFemale defensive_specialist_libero">
                            <td class="lefty"><a href="http://glrvolleyballcombines.com/player-profile?id=121">Miller,&nbsp;Ann</a></td>

                            <td>2015</td>

                            <td>Defensive Specialist/Libero</td>

                            <td data-order-by="66.5">5&#39;&nbsp;6&frac12;"</td>

                            <td>143</td>

                            <td data-order-by="64.25">5&#39;&nbsp;4&frac14;"</td>

                            <td data-order-by="101">8&#39;&nbsp;5"</td>

                            <td data-order-by="105.5">8&#39;&nbsp;9&frac12;"</td>
                        </tr>
                                                <tr class="all_players genderFemale outside_hitter">
                            <td class="lefty"><a href="http://glrvolleyballcombines.com/player-profile?id=144">Ward,&nbsp;Britany</a></td>

                            <td>2014</td>

                            <td>Outside Hitter</td>

                            <td data-order-by="66.5">5&#39;&nbsp;6&frac12;"</td>

                            <td>163</td>

                            <td data-order-by="70.5">5&#39;&nbsp;10&frac12;"</td>

                            <td data-order-by="104.5">8&#39;&nbsp;8&frac12;"</td>

                            <td data-order-by="107.5">8&#39;&nbsp;11&frac12;"</td>
                        </tr>

Note: this should be sorting descending by the last column (float, Approach Touch Jump).

The site is password protected (player database, high school kids) but I can let one of the primary contributors in to take a look if you need to. Thanks

How to first sort in DESCending order?

The current github page was a nice way to quickly get a decent demo up and running. However, there are a couple of problems with it:

• It's a bit too cluttered /narrow for showcasing tables
• The page isn't structured to use our example files directly.

The documentation itself could be improved as well.

If you hadn't seen it already, I updated the examples and readme and submitted a pull request on issue #26. However, there is one small issue that I cannot see a way around without rewriting a bigger chunk of code.

For the aftertablesort callback, we pass the column being sorted on and the direction of sorting. However it's not predictable in which direction it will sort. If you start with a column that already happens to be in order, sorting by that column will reverse the sorting. Similarly, if two columns have the same ordering (e.g. A/B/C and 1/2/3) then if you have sorted the first one ascending, clicking the second one will sort descending.

I guess it comes down to default sort order. Personally I would expect that the initial sorting of a column be consistent. In other words for values 1/2/3/4/5, I would expect to sort ascending on first click regardless of what order the column is in beforehand. This should also better allow us to keep track of the sorting direction. The code from #23 might help too.

Just wanted to give you a heads-up and hear your thoughts on the issue. If you're happy I can continue working on this after #26 is merged.

What's the best way to make a column sort DESC upon first click/sort, instead of the default ASC?

I played around with setting data-sort-dir="desc" but that not it.

Hi Guys,

I got a table of ~2000 records, when I try to sort, there is a small delay (1 or 2seconds) on chrome,

However on Firefox, this gives a native pop up saying the script is too slow, and wants to continue, stop it...

I am using a table of 10 columns and 1879 table rows....(if you are going to test this, maybe try a few thousand records to make it work that much harder.

Is there anything I can do to optimise this?

if you have any questions do let me know I will try and answer...

The idea is to let us load the plugin, add our sorting types once and have them from then on, without passing an object every time we invoke stupidtable().

That would take assigning the object with the default sorting functions to a variable and exposing it.

With something like:

<table>
  <thead>
    <tr>
      <th colspan="3">Title</th>
    </tr>
    <tr>
      <th data-sort="int">A</th>
      <th data-sort="int">B</th>
      <th data-sort="int">C</th>
    </tr>
  </thead>
  ...
</table>

Trying to sort column B always seems to sort by column A.

This issue seems to be that we're getting all th's. So if there is 1 th on the row above sortable th's, the columns will try to sort based on the column data before it. If there are 2, it'd try 2 before, etc.

Edit: Sorry about both the PR and the Issue. Not sure how to combine them.

I think this should be default behaviour but I may be wrong

At the moment, the string sorter will sort things in the following order

• B
• F
• a
• d

But it should go like this

• a
• B
• d
• F

The lightweight nature of stupidtable is perfect. I would like it if it could also implement a sort when the page loads, not just on click. That way the user has some visual feedback and the script implements the sort.

sorting with stupidtable seems to break knockout table bindings: http://jsfiddle.net/joetime/ZCJgL/2/

Normal behaviour:

• Click Data 1 - table binds to data 1
• Click Data 2 - table binds to data 2
• All is good!

Error behaviour:

• Click Data 1 - table binds to data 1
• Click the th "Sort me!" to sort the values
• Click Data 2 - table binds to data 2... but doesn't clear data 1!
  Oh no!

note: I submitted this issue a while ago but I finally got around to creating a fiddle to replicate the problem!

I honestly haven't tested a jQuery plugin before, but with the recent "gotchas" coming up as of late, I believe it's time to make the plugin more mature by including some tests.

Currently to sort a column without actually clicking, you just simulate a click.

$("#mytable").find("th").eq(0).click();

Perhaps we should create an alias to the above command, something like

$("#mytable").stupidsort(0)

If I have multiple tables on a single page (while only wanting to sort a single table), all of the data from the various tables gets merged into a single table. In addition, the same happens if the table I'm sorting has nested tables.

I just decided to clean my code up a little and instead of using the css() function in the beforetablesort function, I used addClass. So I had some CSS like this:

.disabled { opacity: 0.5; }

And my callbacks like this:

var table = $('#table').stupidtable();
table.on('beforetablesort', function (event, data) {
    $(this).addClass('disabled');
});
table.on('aftertablesort', function (event, data) {
    $(this).removeClass('disabled');
});

The table gets sorted alright but doesn't show the updated style during sorting. My example in the docs - $(this).css({opacity:0.5}) - still works as expected. Extending the time in the setTimeout call does work, but in my tests (Chrome and Firefox) it needed to be over 500 milliseconds, which is getting on the long side (for what is essentially a pointless arbitrary delay).

Any ideas? The callback is definitely run and classes added before the setTimeout call. It seems like using the css() function repaints faster than adding a class. But I don't really know much about this!

Feature request: a way to sort empty values to the bottom

For example, when sorting by integers:

1 a
f
6 b
5 c
d
3 e

sorted becomes:
1 a
3 e
5 c
6 b
f
d

and sorted again becomes:

6 b
5 c
3 e
1 a
f
d

Would be a useful optional parameter for dealing with optional table columns.

I want the plugin to stay as small as possible, so I don't want to have a bunch of default sorts within the plugin. However, maybe I shouldn't be to extreme with this and should have a few default sort functions so newcomers won't be so put off.

I have made several changes to my fork of stupid-tables and attempted 2 methods of implementing #54. I'll run through the changes here, and whenever you get the chance to take a look (no rush, I know you're busy) I'd appreciate your thoughts.

I first created a branch issue54 then later split that off to sortdesc. (The links show the list of commits for each, the diffs should be fairly simple.)

Extracted sortDir strings to an enum structure
Instead of passing strings around, I set up an "enum" to hold them. Unfortunately, creating an object that's accessible to both the plugin and outside code means the best way I could find was $.fn.stupidtable.dir. A little ugly but that can of course be stored in a var for later use.

Removed unnecessary "is sorted" check
The is_sorted_array function didn't seem to save any processing. To check if the array was sorted, it sorts a copy of the array, reverses a copy of that array, then compares both to the original. But then it either reverses the original array again or sorts it again. Now that we have the sort-dir data attribute it's much simpler to just sort the array once, in the required direction.

New method of forcing redraw
Apparently simply reading any style property from an element forces a redraw, so I do that after running beforetablesort. Fixes #53.

Added 'beforesortmapcreate' callback for modifying the sort-map (issue54 branch)
I looked into the sortmap callback that you suggested. To be honest I probably misunderstood what you were suggesting, or else this is gonna overcomplicate things. The plugin change was just one line with the callback, but actually modifying the sort map array (see complex_example.html) turned out to be quite complex. You need to modify the variable in-place due to the way Javascript handles pass-by-reference, plus it requires an extra pass of the array. If you can explain in a bit more detail how you expected this feature to work I can take another crack at it.

Allow separate sorting function when sorting descending (sortdesc branch)
One of the ideas I suggested, and I quite like it personally :) It checks for the existence of a data-sort-desc attribute and uses that as the sorting function instead of the one from data-sort. It's quite flexible as it allows for basically any custom handling, including keeping blank (or specific) rows at the bottom.

A few minor things that could be useful.

1. Adding classes to the table headers when sorted. Obviously this is doable using the aftertablesort callback, but to me it feels like it should be in core. Potential names: sorting for columns that are able to be sorted, then sorting-asc or sorting-desc when sorting in the respective direction.
2. Move custom data types to a sub-parameter: i.e. instead of passing in { "date": function(){}, ... } to the plugin, do { "types": { "date": function(){}, ... } } instead. Currently we can't pass any other parameters into the plugin because they are parsed as data types.
3. A beforetablesort callback. One thing this could be used for is to display a message during sorting - if you have a very long table it can take a couple seconds for the sorting and redraw. The developer can then use the aftertablesort callback to remove the message.
4. Initial sorting: pass a column index into the plugin to sort by that column on load. You can set up the table HTML to be in the correct order initially (and most people do), but then anything you do in the aftertablesort callback is not loaded - e.g. custom sorting headers/classes.

Let me know what you think. I'm conscious that we don't want to bloat the plugin if the functionality is not necessary or won't be used by many people. But these were the features that came to my mind first.

We have a table that has hidden child tr's under parent tr's. When a user clicks the parent tr, the child tr shows. When sorting this gets unorganized. Is there a way to group tr's during a sort so when the parent tr moves, the children stay under?

Great plugin, very easy to use and implement.