How can I modify this jQuery plugin to enable sorting on table rows that are currently hidden?

While experimenting with different tablesorting jQuery plugins, I stumbled upon one that perfectly meets the following criteria:

  • Correctly sorts dates
  • Properly sorts numbers
  • Sorts words representing numbers (e.g. One, Two, Three) accurately
  • Sorts in a DOM-conscious manner. This means that if you update the content of a table cell and then click on the header to sort that column, it recognizes the new value instead of sorting based on the initial page load data. (this feature was particularly hard to find as popular tablesorters don't handle changes during runtime)

The only challenge I'm facing is that it seems to only sort the visible rows. I would like it to sort the entire table, not just the visible ones, while maintaining all the features mentioned above, especially the DOM-aware aspect, as this will be used on a table where user-generated data may be updated and sorted subsequently.

I intend to open-source this jQuery plugin so I'm happy to share the code here. The jQuery code provided below is mine, and the plugin I am using for sorting can be found here: http://www.kryogenix.org/code/browser/sorttable.

The code snippet below highlights the issue. You can click on any cell to edit inline and make changes to the DOM yourself.

Answer №1

I have successfully implemented a sorting mechanism in the DOM that dynamically reflects changes to the underlying elements. However, I am currently facing difficulty in reverting the sorted order back to its original unsorted state.

Here is a snippet of the code I've developed so far:

(function($) {
  $.fn.tables = function(options) {
   // Functionality implementation goes here
  };
}(jQuery));
:root {
  --tables-even-color: #CDEDF7;
  --tables-odd-color: #90C3D4;
}

/* Styling for tables goes here */






Column 1 Column 2

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Resetting select fields in a Django application using jQuery: A step-by-step guide

Recently, I was tasked with taking over a partially-developed Django application. Python is familiar territory for me, but I am completely new to JavaScript. This application heavily relies on jQuery for various form manipulations. One specific issue I enc ...

Customize the focus color of mat-label within a mat-form-field in Angular

Within my mat-form-field, I have a mat-chip-list set up similar to the example provided in this link. When I click inside the field, the mat-label and what appears to be the border-bottom (not entirely sure) change color when focused. How can I customize t ...

What are some tips for managing the hover effect using CSS3?

Here's a demonstration of my current setup. When you hover over the black box, a transition occurs and reveals my tooltip. However, I only want the tooltip to appear when hovering over the black box itself. Currently, the transition also triggers if y ...

Restrict the number of rows in a CSS grid

Hello there, I am in the process of creating an image gallery using CSS grid. Specifically, my goal is to initially show just one row of images and then allow users to click a "Show more" button to reveal additional images. You can see my progress here: ...

Error encountered when retrieving data with Django and Ajax

I have a model called Item and I'm attempting to use Ajax to create Items. Everything appears to be functioning correctly, but I encounter an error at the end of the process within the success function of Ajax. Despite reading numerous answers on Stac ...

Utilizing callback functions with JSONP in jQuery

Utilizing jQuery scripts to fetch a JSON feed from Flickr and YouTube in order to dynamically generate HTML on my WordPress website is the current approach I am taking. To pull data from Flickr, I am using: <!-- Script for retrieving photos from Flickr ...

How can I assign a class to my Typography component in Material UI?

When using my material-ui component, I wanted to add an ellipsis to my Typography element when it overflows. To achieve this, I defined the following styles: const customStyles = (theme) => ({ root: { textAlign: "left", margin: theme.spacing( ...

Event dedicated to the selection of mobile options

I am facing an issue with binding an event to the options of a select tag on mobile devices. The code inside the click event handler doesn't seem to be working and I'm unsure of the reason behind it. My assumption is that perhaps the click event ...

Modify a single row within a column with Jquery

I have been working on a project that involves using jQuery with JSON data to populate an HTML table. However, I am facing an issue where when I try to do some inserts, I need to update multiple rows in one column, but it is not functioning as expected - i ...

Implementing a modal component into a React JS page upon loading

I've been working on a webpage using React JS. The site's structure follows MainContent.js --> Main.js --> ReactDOM render. I recently tried to implement a modal popup that worked perfectly in its own project, but ran into issues when impor ...

The Unexpected Mishaps of CSS Grid Layout

I attempted to create a grid using CSS, but I seem to have made an error somewhere in my code. Can someone please take a look at my jsFiddle link and provide some guidance? jsFiddle /*Grid*/ .container { width: 100%; max-width: 1200px; } .row:before, ...

Aligning layers of images within a bootstrap column

Attempting to achieve something similar: Check out this Overlaying Image Example The challenge lies in the fact that these are absolutely positioned images, allowing them to overlap. I aim to center these overlapping images within a Bootstrap column as s ...

Dealing with customized protocol responses in JavaScript

My web server is set up to return a response like: HTTP/1.1 302 Found message://ActualMessage While this setup works seamlessly for UI clients like Android and iOS, I'm faced with the challenge of handling this case on a web browser. For instance, ...

jQuery slideToggle effect causes neighboring elements to move

After clicking on the element I've set as the trigger for slideToggle, it moves a few pixels to the right without any apparent cause. It seems like there might be an issue with the CSS, but I'm having trouble pinpointing the exact problem. You c ...

Trouble with Implementing jQuery to Modify Button Text

I've been attempting to dynamically change the value of a button, but have had no success so far. I've looked at numerous answers, but none of them seem to work for me. JS $("#d").attr("value","dayaw"); HTML <button id="d"></button ...

What is the best way to update the stylesheet_url value in WordPress?

Recently, while attempting to make modifications to a WordPress theme, I encountered an issue with how the theme was incorporating a stylesheet file. <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ...

Tips for applying CSS styles exclusively to the homepage

I am currently managing a SMF forum and I am facing an issue while trying to apply a background image exclusively to the homepage. Whenever I add a style to the .body class, it changes the background of not just the homepage but also other sections like ...

Refresh SQL Query using AJAX/jQuery

I’m really confused on how to utilize AJAX to reload a specific section of a webpage that executes an SQL query via PHP on my database. Look at this code snippet: <tbody> <?php $stmt = $DB_con->prepare("SELECT * FROM script ...

No links were detected in the page source

I am attempting to locate URL links within the page source of this website. http://data2.7m.cn/database/index_en.htm However, I have been unable to find any links in the page source or even after trying Ajax calls with Firebug. There are no links for cou ...

How come I am experiencing difficulty modifying the background color of ion-header using a CSS class selector within my Ionic Vue component?

Recently, I began my journey with ionic vue and started incorporating CSS with the components. I added styles in the same file like this: <style scoped> .abc { background-color: blue; } </style> I attempted to apply these style ...