`Datatables sorting feature for British date and time`

I'm currently attempting to organize a column in a table using the DataTables plugin that contains UK date and time formats such as: 21/09/2013 11:15

Implementing Ronan Guilloux's code:

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "uk_date-pre": function ( a ) {
        if ($.trim(a) != '') {
            var frDatea = $.trim(a).split(' ');
            var frTimea = frDatea[1].split(':');
            var frDatea2 = frDatea[0].split('/');
            var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1] + frTimea[2]) * 1;
        } else {
            var x = 10000000000000; // = the year 1000 ...
        }

        return x;
    },

    "uk_date-asc": function ( a, b ) {
        return a - b;
    },

    "uk_date-desc": function ( a, b ) {
        return b - a;
    }
} );

In addition, I have included this code to automatically detect the format so that manual setting of the column is not required:

jQuery.fn.dataTableExt.aTypes.unshift(
    function ( sData )
    {
        if (sData !== null && sData.match(/(0[1-9]|[12]\d|3[0-2])\/(0[1-9]|1[0-2])\/\d{4} (0[1-9]|1\d|2[0-3]):(0[1-9]|[1-5]\d)$/))
        {
            //console.log(sData);
            return 'uk_date';
        }
        return null;
    }
);

My issue arises from the fact that even though the regex successfully matches the string, it does not trigger the 'uk_date-pre', 'uk_date-asc', or 'uk_date-desc'. Can anyone provide insight as to why this might not be functioning?

Answer №1

Instead of persisting with the regular expression after experimenting with it, I opted to enhance the setup by including this snippet:

aoColumnDefs: [{ "sType": "datetime-uk", "aTargets": [whichCol] }]

Subsequently, I assigned a value to the variable whichCol depending on whether it needed UK sorting on the specific page.

Answer №2

In case anyone comes across this situation.

If you make the following adjustment, Ronan Guilloux's code will function correctly:

var x = (frDatea2[2] + frDatea2[1] + frDatea2[0] + frTimea[0] + frTimea[1]) * 1;

This change is necessary because the input is in the format "21/09/2013 11:15" which results in

var frTimea = frDatea[1].split(':');

only filling up frTimea[0] and frTimea[1]...

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

Issue with Bootstrap jQuery dynamic table edit/delete/view button functionality not functioning as expected

Could really use some assistance with this issue. I have a DataTable that includes a button in the last column which offers options like Edit/Delete/View. When clicked, it should delete the entire row. However, I'm struggling to access the current ele ...

What is the best way to ensure elements are rendered in Vue only when they are fully prepared?

Is there a way to delay the rendering of images in my list until all content is ready? I want everything, including text and classes, to finish loading before displaying anything. Even with v-cloak, it's not working! I'm having difficulty with t ...

The issue of app.css and app.js resources not loading in Laravel 8 with nginx, resulting in a 404 not found error, needs to be

Although this question may appear to be a duplicate, I assure you it is different. I have thoroughly searched through Stack Overflow, Laracast, Reddit, and GitHub for a solution. My setup includes a Laravel application on an Ubuntu VM with Nginx. The pro ...

Moving DOM Elements around

Objective: Looking to relocate an element within the DOM structure. Condition: Although I am familiar with using jQuery for this task, I am currently working in an environment without access to it. Therefore, I need a pure JavaScript solution. Example: ...

Tips for creating a static background when displaying a modal popup in AngularJS

Incorporating a modal popup to modify a row within a grid view has been my recent task. Leveraging the row.getProperty() function, I successfully extracted the row values within the modal. However, an inconvenience emerged when attempting to edit a value ...

Verify the level of opacity in the image

I'm working on a website that allows users to upload PNG images and save them. However, before they can save the image, I need to check if it contains transparency. Is there a way to determine if an image is not 24-bit using JavaScript? <img id= ...

Creating a multi-page app using React: A comprehensive guide

I am in the process of developing an application using NodeJS, and I have decided to incorporate React for creating interactive components within the app. However, my goal is to avoid turning it into a single-page application. How can I effectively distri ...

"Step-by-step guide on implementing a click event within a CellRenderer in Angular's Ag-Grid

paste your code hereI'm currently working on implementing edit and delete buttons within the same column for each row using Angular ag-Grid. To visually represent these buttons, I am utilizing icons. While I have successfully displayed the edit and de ...

The issue with AngularJS Routing is that it fails to refresh the menu items when the URL and views are being

My current project involves implementing token-based authentication using the MEAN stack. The goal of my application is to display different menu items based on whether a user is logged in or not. When there is no token present, the menu should show option ...

Alphabetic divider for organizing lists in Ionic

I am currently working with a list in ionic that is fetched from a controller and stored in localStorage. My goal is to add alphabetic dividers to the list, but I am facing some confusion on how to achieve this. Here is a snippet of the code: app.js $ion ...

Creating a clickable map for a PNG image: Step-by-step tutorial

My goal is to create a interactive map similar to this one. Click here for the image ...

Livereload.js is failing to load due to an invalid address

Snippet from Gruntfile.js: connect: { options: { port: 4000, hostname: 'localhost', livereload: 4002 }, livereload: { options: { open: true, middleware: function (connect) { return [ connect.st ...

[filepond] in order to enroll using the serverId value received from the server

Using 'filepond' within a Vue application is causing an issue. In the "process" function, the ID value obtained after transferring the file to the server (response.id) needs to be registered as 'serverId' of the file. Upon checking the ...

Conceal elements within a div using the 'elementFromPoint' function

In my HTML, I have a div that contains an icon and some text. I want to make it so that when I hover over the div with my mouse, only the div itself is visible to the 'elementFromPoint' function. How can I achieve this? Here is an example of th ...

Populating hidden fields in Javascript with mouseover event trigger - Pre-click action

Seeking a solution for another issue, I stumbled upon the capability to execute JavaScript on mouseover. Here is what I want to execute: $(document).ready(function(){ function myPayment() { var value = document.mortgagecalc.value_input.value; var rate ...

What is preventing the MenuItem component from functioning as a Link in React Material-UI?

Hey there! I've been trying to implement a popover menu that changes the URL and component after clicking on an item, but unfortunately it's not working as expected. I created a setup in this sandbox: https://codesandbox.io/s/romantic-surf-40p19? ...

The $routeProvider is unable to load the view specified in ngRoute

I am currently in the process of implementing ngRoute into my application, but I am facing challenges with getting it to function properly. To showcase my efforts, I have developed a basic app. index.html: <!DOCTYPE html> <html ng-app="tester"& ...

Learn how to retrieve data from a JSON server in Angular 8 and then sort that data in a table by utilizing checkboxes

Currently, I'm in the middle of an Angular project where I could use some assistance on how to filter data through checkboxes within a table. The setup involves a home component that displays data from a JSON server in a tabular format using a service ...

Developing client-side components with NextJS

I want to develop a single-page landing page where users can upload videos and there's a file size limit check before the upload. In my src/app/page.tsx file, I have the following code: import React from 'react'; import FileUpload from &apo ...

The div element is persisting despite AJAX attempts to remove it

I am currently developing an application that allows users to post and comment. I have a situation where I need to delete a specific comment by clicking on the associated 'x' button. To achieve this, I am making an Ajax call to the remove-comme ...