Order Data Table Using Vanilla JavaScript on the Client-Side without Utilizing External Libraries

Question

Order Data Table Using Vanilla JavaScript on the Client-Side without Utilizing External Libraries

I have spent a considerable amount of time searching the website for a solution to my problem, but unfortunately, I have not been able to find one. The options available are either too complicated, require the use of JQuery or an external library, or simply do not work for me.

I am in need of a JavaScript code that meets the following criteria:

Can be executed on the client side from a bookmark
Easy to comprehend
No reliance on libraries
Capable of sorting an HTML table and highlighting related titles

This project pertains to a Helpdesk software where multiple tickets can be generated due to replies, forwards, or conversations, resulting in a scenario such as:

First ticket title: Cannot login
Second ticket title: Re: Cannot login
Third ticket title: Fw: R: Cannot login

Sorting through these tickets, especially when there are many, can be error-prone and frustrating, particularly during busy periods. Therefore, I am seeking a method to quickly organize and emphasize them with a single click without altering any existing formatting.

The HTML table does not include a header but features the first two rows for headers and filtering functionality. As a result, any code provided should be able to skip over these initial rows.

If you have a suitable code snippet to address this issue, please share it with me.

javascript arrays sorting html-table

Answer 1

Answer №1

As a newcomer to Java-scripting, I managed to piece together this solution step by step.

The method involves iterating through a table row by row and extracting the "textContent" from the specified cell in each row. This information is then organized into an array with the cleaned cell as the first level and the entire row as the second level.

The cleaning process involves identifying similar ticket titles by removing occurrences of "Re:" and "Fw:" from the textContent.

var key = rows[i].cells[col].textContent.replace(/[^a-zA-Z0-9: ]/g, '').trim();
key = key.replace(/Fw:/gi, '').replace(/Re:/gi, '').trim();

An array is created while adjusting for the startRow so that it begins at 0.

arr[i - startRow] = [key, rows[i]];

This results in an array structure like this: arr[index] = [key,row]

arr[0] = ['Cannot login','<td>....</td>']
arr[1] = ['next subject','<td>....</td>']

Subsequently, we utilize a basic array sorting function.

arr.sort();

Following this, we remove all but the first two rows of the current table.

    while (tbody.rows.length > startRow) {
        tbody.deleteRow(startRow);
    };

We then reconstruct the table while checking for duplicates and highlighting duplicate entries in yellow.

The complete code snippet is presented below:

javascript :
sortandclean();
function sortandclean() {
    var col = 6; /* title row */
    var startRow = 2; /* to skip the first two rows */
    var arr = []; /* main array which will contains the rows */
    var tbody = document.getElementById('RequestsView_TABLE').tBodies[0];
    var rows = tbody.rows;
    for (i = startRow; i < rows.length; i++) {
        var key = rows[i].cells[col].textContent.replace(/[^a-zA-Z0-9: ]/g, '').trim();
        key = key .replace(/Fw:/gi, '').replace(/Re:/gi, '').trim();
        arr[i - startRow] = [key, rows[i]];
    };
    console.log('rows: ' + rows.length);
    arr.sort(); /* sorting the easy way. works with both texts and numbers */
    while (tbody.rows.length > startRow) {
        tbody.deleteRow(startRow);
    };
    for (i = 0; i < arr.length; i++) {
        rowToInsert = arr[i][1]; /* arr[i][0] has the key and arr[i][1] has the row */
        if (arr[i][0] == lastrow) {
            rowToInsert.cells[col].style.backgroundColor = "yellow";
            tbody.rows[tbody.rows.length - 1].cells[col].style.backgroundColor = "yellow";
        }; /* if the current row have the same clean title highlight both current and previous rows title cell */
        tbody.appendChild(rowToInsert);
        var lastrow = arr[i][0];
        totalRows = i;
    };
    console.log('rows reinserted: ' + (totalRows + 1));
} void(0);

To ensure the code functions properly as a bookmarklet, use block comments for commenting within the code (e.g., /* some comment */)

Answer 2

As a newcomer to Java-scripting, I managed to piece together this solution step by step.

The method involves iterating through a table row by row and extracting the "textContent" from the specified cell in each row. This information is then organized into an array with the cleaned cell as the first level and the entire row as the second level.

The cleaning process involves identifying similar ticket titles by removing occurrences of "Re:" and "Fw:" from the textContent.

var key = rows[i].cells[col].textContent.replace(/[^a-zA-Z0-9: ]/g, '').trim();
key = key.replace(/Fw:/gi, '').replace(/Re:/gi, '').trim();

An array is created while adjusting for the startRow so that it begins at 0.

arr[i - startRow] = [key, rows[i]];

This results in an array structure like this: arr[index] = [key,row]

arr[0] = ['Cannot login','<td>....</td>']
arr[1] = ['next subject','<td>....</td>']

Subsequently, we utilize a basic array sorting function.

arr.sort();

Following this, we remove all but the first two rows of the current table.

    while (tbody.rows.length > startRow) {
        tbody.deleteRow(startRow);
    };

We then reconstruct the table while checking for duplicates and highlighting duplicate entries in yellow.

The complete code snippet is presented below:

javascript :
sortandclean();
function sortandclean() {
    var col = 6; /* title row */
    var startRow = 2; /* to skip the first two rows */
    var arr = []; /* main array which will contains the rows */
    var tbody = document.getElementById('RequestsView_TABLE').tBodies[0];
    var rows = tbody.rows;
    for (i = startRow; i < rows.length; i++) {
        var key = rows[i].cells[col].textContent.replace(/[^a-zA-Z0-9: ]/g, '').trim();
        key = key .replace(/Fw:/gi, '').replace(/Re:/gi, '').trim();
        arr[i - startRow] = [key, rows[i]];
    };
    console.log('rows: ' + rows.length);
    arr.sort(); /* sorting the easy way. works with both texts and numbers */
    while (tbody.rows.length > startRow) {
        tbody.deleteRow(startRow);
    };
    for (i = 0; i < arr.length; i++) {
        rowToInsert = arr[i][1]; /* arr[i][0] has the key and arr[i][1] has the row */
        if (arr[i][0] == lastrow) {
            rowToInsert.cells[col].style.backgroundColor = "yellow";
            tbody.rows[tbody.rows.length - 1].cells[col].style.backgroundColor = "yellow";
        }; /* if the current row have the same clean title highlight both current and previous rows title cell */
        tbody.appendChild(rowToInsert);
        var lastrow = arr[i][0];
        totalRows = i;
    };
    console.log('rows reinserted: ' + (totalRows + 1));
} void(0);

To ensure the code functions properly as a bookmarklet, use block comments for commenting within the code (e.g., /* some comment */)

Order Data Table Using Vanilla JavaScript on the Client-Side without Utilizing External Libraries

Answer №1

Similar questions

Tips for Preserving the Index of a Multidimensional Array

"Exploring the array functionality of Angular's Reactive Forms

How can I insert my URL into the webPDFLoader feature of LangChain platform?

PHP - removing a specific value from a JSON object

Can a single endpoint be used to provide files to web browsers and data to REST requests simultaneously?

Display the component post retrieval in React Native

Sorting an array of objects in Typescript using a dynamic property name for generics

How can I display different data values on each individual circle counter, rather than all circles showing the same data?

Tips for displaying a page within a parent div upon clicking a button in a child div

Ways to revert all modifications to styles implemented using JavaScript

JQuery Form Wizard - Adding a Finish Button Linked to a Page

The Ajax validation form mistakenly redirects the echoes to a different page instead of the intended page for displaying the output

grunt-webpack claims to have completed without any errors, yet it has failed to bundle any files

Can a web application determine if Microsoft Excel has been installed?

Trying to establish a connection and smoothly scroll to a specific <div> in a separate component on the same page utilizing React <Nav.Link href>

Is there a way to dynamically inject a stylesheet in NextJS?

Press the button to load the following row

What is the best way to supply JSON data to the "The Wall" MooTools plugin while feeding?

Implementing Desktop Alerts for Your Web Platforms without requiring the user to be actively engaged in the application or even logged out of the site

Error: The 'replace' property of null cannot be read in select2