Easy table sorting with JavaScript

Easy table sorting with JavaScript

Easy table sorting with JavaScript. One of the easiest ways you can improve any data that you publish, is to utilise JavaScript to make it sortable.

A simple technique for static or dynamic sites

One of the easiest ways you can improve any data that you publish, is to utilise JavaScript to make it sortable. Whilst this can be done server-side using a dynamic architecture, it’s not necessarily the best choice there, let alone in a static environment where we have no other option.

Progressive enhancement

I’m going to present a technique with uses Unobtrusive JavaScript to enhance existing content, if possible. For any readers who do not have JavaScript available, they won’t miss out on the core content: whatever data it is that we’re presenting. Whilst they won’t be able to sort it — for a static site, this is the best we can offer — they will still be able to

Note that, in a dynamic enironment, you could still layer this technique on top of a server-side sort fallback. The links that will be used to sort each column could send different values in URL parameters, which a backend script uses to generate the appropriately-sorted content. The JavaScript approach presented here could then be modified very slightly to, where JavaScript is available, replace those links and use the client-side version. The only significant challenge is ensuring the backend and frontend versions work in exactly the same way; easier if you use something like Node.js.

The markup

We’re looking to sort data, so this should be presented in the most appropriate form: a table. We’ll try to require as few additions as possible, to ensure maximum separation of content from functionality.

Here’s a basic bare-bones example which you can download from the accompanying GitHub repository:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Easy table sorting with JavaScript</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Game</th>
                <th>Price</th>
                <th>Release date</th>
                <th>Rating</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Super Mario Odyssey</td>
                <td>49.99</td>
                <td>October 27, 2017</td>
                <td>97</td>
            </tr>
            <!-- the actual examples includes more rows here -->
       </tbody>
    </table>
    <script src="sort-table.js"></script>
</body>
</html>

Note that this example specifies thead and tbody elements which are optional in HTML5. Since these elements add structure, they also add potential for a more accurate —or simply more straightforward — implementation. As a rule of thumb, it’s usually a good idea to include elements, even if they’re optional, if they add valuable structure such as this.

Without any added extras (and a bare minimum of styling), the basic table looks like this:

Image for post

progressive-enhancement html programming web-development javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Progressive Web App Development

Hire Full Stack Developer from HireFullStackDeveloperIndia.com to build user-centric & robust Progress Web App Development Solutions in India.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Progressive Enhancement: Basics, Benefits and Web Design Tips

The advancement in technology has given rise to a variety of browsing platforms. It is imperative to ensure proper support to the website for fitting in the browsers. Due to this, progressive enhancement is getting higher popularity among web designers and developers to provide a wide range of browsers accessibility.

How to Create a Real-Time Clock for all Web Applications with HTML, CSS and JavaScript

In this tutorial, I will discuss creating a real-time clock for web applications. This is basically developed using HTML, CSS and JavaScript, Therefore, even though you’re a beginner for web development, this will not be hard for you to understand and add this clock for your web applications in future. Developing a real-time clock for all your web apps using JavaScript. How to Create A Real-Time Clock for Web Applications