Sort HTML Tables and List using W3.js Easily| No Javascript

Sort Tables and List

Hey guys, so many of you know that there is some point in the project where have to add filter and sort functionality in the script to add more flexibility to the user in UI. Generally, we filter and sort Tables/List writing complex Javascript codes, but today I am going to show you how you can do that by adding 1 HTML onclick function and without writing a single line of javascript code.

Demo Youtube

So let’s get started,

First We have to include W3.JS Library in our html page, we can do that by adding this line of code here in the head tag.

So Once it is done, you have successfully included the W3.JS library and now we can use it in our html page.

So now we have to use one function of w3.js w3.sortHTML() under onclick event in any HTML tag (button, h1-h6, th ,td etc…).

This Function Needs 1st Parameter to be the id of the parent element of anything you want to Sort and 2nd Parameter to be the id of the child element you want to Sort.

You can see the below example to see how to sort List using W3.JS with a click of a button.

and you can see the example on how you can Sort table using W3.JS below.

As you can see In the above example we are using 3 parameters and the third parameter is the nth-child element to sort both Country and Capitals in this example.

So that’s it, this is how you can sort any element without writing sinle javascript code.

Thanks.

Peace