How can I use jQuery (or CSS) to sort HTML tables by column?

Question

I want to be able to take an HTML table, such as the one here:

<table border="1">
    <tbody>
        <thead>
        <tr>
            <th></th>
            <th><a href="http://translate.com" target="_blank">translate.com &amp; https://translate.google.com</a></th>
            <th><a href="http://www.bing.com/translator/" target="_blank">Bing Translator</a></th>
            <th></th>
        </tr>
        </thead>
        <tr>
            <td>I eat tacos</td>
            <td>Yo como tacos</td>
            <td>Comer tacos</td>
        </tr>
        <tr>
            <td>I will eat a taco</td>
            <td>Voy a comer un taco</td>
            <td>Me voy a comer un taco</td>
        </tr>
        <tr>
            <td>I will eat tacos</td>
            <td>Voy a comer tacos</td>
            <td>Me voy a comer tacos</td>
        </tr>
        <tr>
            <td>I would eat a taco</td>
            <td>Me volvería a comer un taco</td>
            <td>Comer un taco</td>
        </tr>
        <tr>
            <td>I would eat tacos</td>
            <td>Me volvería a comer tacos</td>
            <td>Comer tacos</td>
        </tr>
        <tr>
            <td>I am eating a taco</td>
            <td>Me estoy comiendo un taco</td>
            <td>Estoy comiendo un taco</td>
        </tr>
        <tr>
            <td>I am eating tacos</td>
            <td>Estoy comiendo tacos</td>
            <td>Voy a comer tacos</td>
        </tr>
            . . .
        <tr>
            <td>They were eating tacos</td>
            <td>Estaban comiendo tacos</td>
            <td>Estaban comiendo tacos</td>
        </tr>
    </tbody>
</table>

(or any HTML table) and allow it to be sorted when a column is clicked.

Either a jQuery or a CSS solution is okay.

You won't get a css solution for this, and you're better off just googling to find something like DataTables - there's tons of javascript table libraries out there. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Jul 9, 2014 at 15:12

Jason · Accepted Answer · 2014-07-09 17:20:43Z

2

jQuery Table Sorter (http://tablesorter.com/docs/) will work. There are many different jQuery plugins to handle this. If jQuery isn't already being used, there are pure Javascript options as well.

33 Javascript Solutions to table sorting (http://tympanus.net/codrops/2009/10/03/33-javascript-solutions-for-sorting-tables/).

CSS cannot sort data; Javascript will have to be used.

edited Jul 9, 2014 at 17:20

answered Jul 9, 2014 at 16:49

Jason

4,1594 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

B. Clay Shannon-B. Crow Raven Over a year ago

Is jQuery Table Sorter available on a CDN? I want to use it in jsfiddle.

Jason Over a year ago

Yes. CDNJS has it. (//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.17.4/js/jquery.tablesorter.min.js)

Collectives™ on Stack Overflow

How can I use jQuery (or CSS) to sort HTML tables by column?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related