Click here to Skip to main content
Click here to Skip to main content

How to Use jsfiddle and a jQuery Plugin to Create Sortable HTML Tables

, 10 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Use jsfiddle and the jQuery Data Tables plugin to create sortable HMTL tables

Let's Sort Things Out

So you want to have a sortable HTML table. It's not that difficult. This tip will show you how to do it in a jsfiddle. Of course, you can use the HTML code shown here as a starting point to change the column names, column count, row contents, etc.

You can also add some CSS to fancify/beautify it.

Feel free to fork my existing jsfiddle here to do that.

Before proceeding with the steps, I'll tease you with how it looks (in case you didn't already click the link above to my existing jsfiddle). Its rather spartan appearance may also be the impetus you need to fancify it with some razzle-dazzle CSS. Anyway, here it is:

So here's all you need to do:

  1. Create a new jsfiddle here
  2. In the "Frameworks and Extensions" section of jsfiddle, in the Northwest corner, select "jquery 1.11.0"
  3. Expand the "External Resources" section in the Northwest corner of jsfiddle and add:
    //cdn.datatables.net/1.10.0/js/jquery.dataTables.js

    Note: You must retain the "comments" (double whacks) for it to work.

    ...then hit the "+" button to actually add that. Do it again for this:

    //cdn.datatables.net/1.10.0/css/jquery.dataTables.css
  4. Add the HTML for the table, such as:
    <h1>Some Popular Items</h1>
    <table id="somePopItems" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Image and Link</th>
                    <th>Estimated Price</th>
                </tr>
            </thead>
     
            <tbody>
                <tr>
                    <td>Google Chromecast HDMI Streaming Media Player</td>
                    <td><a href="http://www.amazon.com/Google-Chromecast-Streaming-Media-
    Player/dp/B00DR0PDNE/garrphotgall-20" target="_blank"><img height="160" width="160" 
    src="http://ecx.images-amazon.com/images/I/31Hgfy4y9DL._SL160_.jpg" /></a></td>
                    <td>$34.31</td>
                </tr>
                <tr>
                    <td>Kindle Paperwhite</td>
                    <td><a href="http://www.amazon.com/Kindle-Paperwhite-Ereader/dp/B00AWH595M/garrphotgall-20" 
                    target="_blank"><img height="160" width="160" src="http://ecx.images-
    amazon.com/images/I/41TlD2BqdxL._SL160_.jpg" /></a></td>
                    <td>$119</td>
                </tr>
                <tr>
                    <td>Amazon Fire TV</td>
                    <td><a href="http://www.amazon.com/Fire-TV-streaming-media-player/dp/B00CX5P8FC/garrphotgall-20" 
                    target="_blank"><img height="160" width="160" 
                    src="http://ecx.images-amazon.com/images/I/31AMfovGmRL._SL160_.jpg" /></a></td>
                    <td>$99</td>
                </tr>
                <tr>
                    <td>Fujifilm Instax Mini Instant Film, 10 Sheets x 5 packs</td>
                    <td><a href="http://www.amazon.com/Fujifilm-Instax-Instant-Sheets-packs/dp/B004U7JYXS/garrphotgall-20" 
                    target="_blank"><img height="160" width="160" 
                    src="http://ecx.images-amazon.com/images/I/51hyKnSi2%2BL._SL160_.jpg" /></a></td>
                    <td>$35.85</td>
                </tr>
                <tr>
                    <td>GoPro HERO3+: Black Edition</td>
                    <td><a href="http://www.amazon.com/GoPro-CHDHX-302-HERO3-Black-Edition/dp/B00F3F0GLU/garrphotgall-20" 
                    target="_blank"><img height="160" width="160" 
                    src="http://ecx.images-amazon.com/images/I/41XpOa2CxkL._SL160_.jpg" /></a></td>
                    <td>$399.99</td>
                </tr>
                <tr>
                    <td>Dropcam Pro Wi-Fi Wireless Video Monitoring Camera</td>
                    <td><a href="http://www.amazon.com/Dropcam-Wi-Fi-Wireless-Monitoring-Camera/dp/B00F9FCW7K/garrphotgall-20" 
                    target="_blank"><img height="160" width="160" 
                    src="http://ecx.images-amazon.com/images/I/41xoN5qdC%2BL._SL160_.jpg" /></a></td>
                    <td>$199.99</td>
                </tr>
                <tr>
                    <td>Destiny Limited Edition - PlayStation 4 Limited Edition</td>
                    <td><a href="http://www.amazon.com/Destiny-Limited-Edition-PlayStation-
    4/dp/B00LH6CBA8/garrphotgall-20" target="_blank"><img height="160" width="160" 
    src="http://ecx.images-amazon.com/images/I/51RngfboTZL._SL160_.jpg" /></a></td>
                    <td>$99.99</td>
                </tr>
            </tbody>
        </table>
  5. Add the jQuery (the "2" in the code below is the count of columns less 1; if you add or remove the number of columns in the HTML, you will have to adjust that value accordingly - as I have done in the updated jsfiddle:
    $(document).ready(function() {
        $('#somePopItems').dataTable( {
            columnDefs: [ {
                targets: [ 0 ],
                orderData: [ 0, 1 ]
            }, {
                targets: [ 1 ],
                orderData: [ 1, 0 ]
            }, {
                targets: [ 2 ],
                orderData: [ 2, 0 ]
            } ]
        } );
    } );

    Note: I adapted the jQuery (it's virtually identical) and used the HTML as a basis for what I have above from the referenced jQuery data table sorter plugin's page, which you can find here.

  6. Run it - voila! It should work; now tweak it to your heart's content.

Anybody for some Salty Fisheggs?

If you take a look at the jsfiddle here, you will see that, not only are there some "popular" items there as shown above, but also some rather unusual items, at prices that preclude paupers (up to several million smackeroos - the caviar is relatively cheap by comparison).

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

B. Clay Shannon
Publisher "Found in the Translation"
United States United States
I am the entire team at "Found in the Translation," which produces multilingual books (paperback and Kindle versions) such as "Don Quixote: In Spanish and English, Paragraph-by-Paragraph" among many others (English paired with not only Spanish, but also French and even Finnish). You can see all those books here: http://jsfiddle.net/clayshannon/pRgQL/75/
 
Personal web sites that I have created can be seen at http://usamaporama.azurewebsites.net and http://bigsurgarrapata.azurewebsites.net/
 
Peripatetic and picaresque, I have lived in eight states; specifically, besides my native California (where I was born and where I now again reside) in chronological order: New York, Montana, Alaska, Oklahoma, Wisconsin, Idaho, and Missouri.
 
I am also a writer of both fiction (for which I use a nom de plume, "Blackbird Crow Raven", as a nod to my Native American heritage - I am "½ Cowboy, ½ Indian") and nonfiction: http://www.lulu.com/spotlight/blackbirdcraven
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
Questiongood to know PinprofessionalBrian A Stephens10-Jul-14 2:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.141022.2 | Last Updated 10 Jul 2014
Article Copyright 2014 by B. Clay Shannon
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid