How can I reset className dt-right on date col with moment.js renderer?

DataTable.type('datetime', 'className', '');
DataTable.type('date', 'className', '');

I'm not quite sure how to best describe this issue, but I'll give it a try!

I wrote a custom renderer function for formatting German numbers because DataTable.render.number() doesn't yield the result I need.

For example: DataTable.render.number(null, null, 2) displays 100,00 correctly in the table itself, but when exported (PDF, Excel), it outputs 100—truncating the decimal places completely. However, I need the exported output to match what's visible in the table.

My custom renderer works fine for PDF exports. But for some reason, during the Excel export, the comma separator gets removed, resulting in 10000 instead of 100,00.

I logged the exported cell data to the console to inspect the values. Interestingly, instead of returning a string, the cell value arrives as a numeric type. Meanwhile, in the "Betrag" (Amount) column, everything works as expected.

I even tried appending a space to the formatted string to force string evaluation, but that didn't resolve the issue either.

Currently the normal search has a debounce feature and doesn't perform the search until after 400ms has passed, is there a way to make SearchBuilder behave the same?

I want to change the background color of the selected table row with my custom color ,
this is the style css that i've applied without obtain any result:

**table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > * {
box-shadow: inset 0 0 0 9999px #e32d2d !important;
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important;
}
**

this is the code of the table:

table = $('#tb_searchresults').DataTable({
"ajax": {
"url": ApplicationParams.searchDatiDestinatari,
"type": "POST",
"dataSrc": "",
dataType: 'json',
"data": { 'filtroRicerca': filtroRicerca }
},

columnDefs: [
    {
        render: DataTable.render.select(),
        targets: 0
    }
],
select: {
    style: 'os',
    selector: 'td:first-child'
},
"columns": [

    {
        data: Math.random() * 10000,
        defaultContent: "",                    
        orderable: false,
        targets: 0
    },
    {
        "render": function (data, type, full, meta) {
            return full.ragioneSociale;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.regione;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.provincia;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.brandVeicolo;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.modelloVeicolo;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.dataImmatricolazione != null ? new Date(full.dataImmatricolazione).toLocaleDateString() : null;
        }
    },
    {
        "render": function (data, type, full, meta) {
            return full.dataUltimaRevisione != null ? new Date(full.dataUltimaRevisione).toLocaleDateString() : null;
        }
    }
],
layout: {
    topEnd: 'buttons',
    topStart: 'search'
},
"dom": '<"pull-left"l><"pull-right"B>rt<"bottom"ip>',

"buttons": [
    {
        "extend": 'copy',
        "text" : 'copia',
        "title": "Gestione campagne - Dati destinatari",
        "exportOptions": {
            "columns": [1, 2, 3, 4, 5, 6, 7],
            modifier: { search: 'none', selected: false }
        }
    },
    {
        "extend": 'excel', 
        'text' : 'Excel (senza esclusioni)',
        "title": "Elenco destinatari campagna (no esclusioni)",
        "exportOptions": {
            "columns": [1, 2, 3, 4, 5, 6, 7],
             modifier: { search: 'none', selected: false }
        }
    },
    {
        "extend": 'pdf',
        'text': 'Pdf (senza esclusioni)',
        "orientation": "landscape",
        "title": "Gestione campagne - Dati destinatari (no esclusioni)",
        "exportOptions": {
            "columns": [1, 2, 3, 4, 5, 6, 7],
            modifier: { search: 'none', selected: false }
        }
    }
],
"language": {
    "sEmptyTable": "Nessun dato presente nella tabella",
    "sInfo": "Vista da _START_ a _END_ di _TOTAL_ elementi",
    "sInfoEmpty": "Vista da 0 a 0 di 0 elementi",
    "sInfoFiltered": "(filtrati da _MAX_ elementi totali)",
    "sInfoThousands": ",",
    "sLoadingRecords": "Caricamento...",
    "sProcessing": "Elaborazione...",
    "sSearch": "Cerca:",
    "oPaginate": {
        "sFirst": "Inizio",
        "sPrevious": "Precedente",
        "sNext": "Successiva",
        "sLast": "Fine"
    },
    "lengthMenu": "Visualizza _MENU_ elementi",
    select: {
        rows: {
            _: '%d clienti selezionati da escludere ',
            0: 'Seleziona una o più righe per escludere i clienti dalla campagna',
            1: 'Un cliente selezionato da escludere'
        }
    }
},
"order": [[1, "asc"]],

"destroy": true,
"lengthChange": true,
"sSearch": "Cerca:",
"lengthMenu": [[5, 10, 20, 50, -1], [5, 10, 20, 50, "Tutti"]],
"iDisplayLength": 10

});

i've read a lot of similar questions but i am very frustrating that i can solve it.

Thanks a lot!

Sorry to bother you again! I'm currently migrating from DataTables 2 to DataTables 3, so I'm noticing a few unusual behaviors along the way. I hope that's okay and I'm not being a nuisance! ;-)

Issue Description

I use DataTable.defaults to define baseline configurations so that all tables share the same default setup. If a specific table requires different settings, I override them directly inside new DataTable().

However, setting global column defaults via column (such as orderSequence) no longer seems to work in DataTables 3, whereas it worked as expected in DataTables 2.3.7.

$.extend(true, DataTable.defaults, {
  // layout - works
  layout: {
    topStart: null,
    topEnd: null,
    bottomStart: null,
    bottomEnd: null,
  },

  // column - doesn't work (worked in DT 2.3.7)
  column: {
    orderSequence: ["asc", "desc"],
  },
});

const table = new DataTable("#example");

Testcase / Live Example:
https://live.datatables.net/xufodala/4/edit?html,js,output

P.S.: To toggle DataTables 3.0.3 in the live example, please enable/disable the respective stylesheet and script tags in the HTML panel.

I've used datatables before with server-side processing where date ordering for cells that contain datesis enforced by adding a data-order="mySQLDate.format("yyyymmdd")" so that the built table looks like:

<tr>
        <td data-order="20220131">31st January 2022</td>
</tr>

How is this achieved when sourcing the data from Ajax? Is there something I can put in columns : [] to tell datatables how to sort the data? Does datatables do type inference when it comes to sorting?

Apologies if this is all in the manuals; I couldn't find anything that exactly answered my question.

Would it be worth adding support for those APIs to DataTables? Or is it simpler to just call them directly from the application code?

Hello! Odd problem that I've reproduced in the test case above. Using the responsive extension, I created an empty column to house the child row display button, setting responsive.details.type to 'column' and the target to column 0. I'm using a custom renderer and the function's columns parameter to render each column of information.

Everything is fine until you add the 'dtr-control' class name via className. After that, the last column is no longer renderable in the child row. When logging the columns parameter of the renderer function, I noticed that the parameter contained all but the last column!

If you comment out the className: 'dtr-control' line, you'll see things fix itself.

What's up with this? Am I missing something in the configuration?

Thanks!

Thanks !

Description

While configuring DataTables with the Buttons extension, I encountered issues regarding combined column export selectors and missing sorting indicators when using titleRow.

Testcase / Live Example:
https://live.datatables.net/xepumexo/6/edit?html,js,output

1. Combined Column Selectors in exportOptions (:not(.no-export):visible)

• Issue: Combining class-based exclusions with visibility selectors (e.g., :not(.no-export):visible or passing an array [":not(.no-export)", ":visible"]) fails to export the expected columns.
• Observed Behavior:
  
  • age (marked with .no-export) is still included in the export.
  • position is missing from the exported output.
• Regression Note: Works as expected in DataTables 2.3.7, but is broken in newer versions.

2. Missing Sorting Arrows with titleRow: 1

• Issue: Enabling titleRow: 1 prevents sorting UI elements from rendering properly.
• Observed Behavior: Columns id, position, and age do not display sorting arrows in the table header.

Minimal Reproducible Example

const data = [
  { id: "1", fullname: "Tiger Nixon", firstname: "Tiger", lastname: "Nixon", age: 32, position: "System Architect" },
  { id: "2", fullname: "Garrett Winters", firstname: "Garrett", lastname: "Winters", age: 78, position: "Accountant" },
  { id: "3", fullname: "Ashton Cox", firstname: "Ashton", lastname: "Cox", age: 44, position: "Accountant" },
];

const table = new DataTable("#example", {
  data: data,
  layout: {
    topStart: null,
    topEnd: "buttons",
    bottomStart: null,
    bottomEnd: null,
  },
  buttons: {
    buttons: [
      {
        extend: "colvis",
        columns: ":not(.no-colvis)", // Works
      },
      {
        extend: "pdfHtml5",
        exportOptions: {
          // columns: ":not(.no-export)", // Works
          // columns: ":visible", // Works
          // columns: [":not(.no-export)", ":visible"], // doesn't work

          // Fails: combined selectors do not resolve correctly
          columns: ":not(.no-export):visible",
        },
      },
    ],
  },
  titleRow: 1, // Causes missing sorting arrows on certain columns
  columns: [
    { data: "id", className: "no-colvis" },
    { data: "firstname" },
    { data: "lastname" },
    { data: "position" }, // Missing from export output
    {
      data: "age",
      className: "no-colvis no-export", // Still included in export despite "no-export"
    },
  ],
});

What happens: Dragging a column header to reorder it throws mid-drag:

Uncaught (in promise) TypeError: can't access property "cell", n[l][r] is undefined
and the drag-ghost element shows the wrong column name (consistently shows the first/frozen column's label regardless of which column is actually being dragged). The reorder itself still completes correctly despite the error — cosmetic/console-noise, not a functional break.

What isolates it: Removing ColumnControl's extension entirely (keeping ColReorder alone) makes the error disappear completely. So it's specifically the combination, and specifically the second header row.

Suspected mechanism, traced from source: _addListener()'s listener-attachment loop (dataTables.colReorder.js) correctly scopes itself to this.c.headerRows (if (!headerRows || headerRows.includes(rowIdx))), so an unconfigured/restricted row correctly never gets a drag-start listener. But validateStructureMove() (called via moveAllowed() during an active, validly-started drag) reads table.table().header.structure() completely unfiltered by headerRows — so even a drag that legitimately starts on row 0 still runs structural validation against the entire multi-row header, including ColumnControl's injected row, which appears to produce a gap/misalignment in the structure matrix that a downstream .cell access doesn't guard against.

Suggested fix: Have validateStructureMove()'s structure read respect this.c.headerRows the same way _addListener()'s attachment loop already does — filter the header/footer structure to the configured rows before validating, rather than reading it unfiltered.

Description of problem:

when using the options below in DT2/DT3:

options={{
  scrollX: true,
}}

the columns are misaligned.

P.S. You need to make the viewport a bit narrower to see the bug, below approx. 1000px.

To replicate:
- apply a column level filter on any of the columns and it should filter correctly
ex: Search 'Golf' on the commodity column

- Then refresh the page, and see that the filter is still present in the UI, but the table is not filtered.

The global search does correctly reapply the filter on reload.

2.3.8: https://live.datatables.net/cuhiwequ/1/edit
* Clicking the various buttons works as expected

Prior to 3.x the recommended way to search on null values was to use a regex with "^$" as the search criteria, however in 3.x this same code now clears the entire table rather than only showing null values

Note: I was able to get around this using a custom function for the search, but I'd have expected a regex search to work as well without needing the custom function since it was working in 2.x

I'm getting input from a user via a dropdown, they can select employees or managers, which will run 2 separate SQL queries depending on which option was chosen and return the results as JSON data. The 2 datasets have many of the same columns, with only a handful unique to each, so in my javascript I've specified 2 variables to hold the "common" and "unique" columns and have then spread them in the columns property.

However, the columns appear in the datatable as per the order of the columns array, so my unique columns are appearing at the end currently, which is not what I want.

Is there a way within the column object itself to define its position in the table? E.g.

{
        data: "id",
        title: "Employee ID",
        visible: true,
        position: 0
}

Kind regards,
Guy

const commonColumns = [         
    { 
        data: "firstName",
        title: "First Name",
        visible: true
    },
    { 
        data: "lastName",
        title: "Last Name",
        visible: true
    },
    { 
        data: "age",
        title: "Age",
        visible: true
    }
    etc...
];


const uniqueColumns = {
    'EMP' : [
        {
            data: "id",
            title: "Employee ID",
            visible: true
        },
        {
            data: "manager",
            title: "Manager",
            visible: true
        }
    ],
    'MAN' : [
        {
            data: "teamName",
            title: "Team Name",
            visible: true
        },
        {
            data: "budget",
            title: "Budget",
            visible: true
        }
        etc...
    ]
}


...
columns: [
    ...commonColumns,
    ...uniqueColumns[cohortSelected]
],
...

I have a DataTable whose contents are being loaded via AJAX. I know that to default order a DataTable on load I can use the order: [[10,"asc"]] property, however, this requires that I don't later decide to move my columns about. Is there a way to order by specifying a column name or something that isn't tied to the column's position? I've tried the following but have had no luck. It doesn't have to be the data property, just anything that prevents me from having to specify the column's position, so that if I decide to change things around later, I don't have to change the order property too.

order: {
        data: "studentId",
        dir: "desc"
}

An example of one of my columns.

columns: [
    { 
        data: "studentId",
        title: "Student ID",
        visible: true
    }
]

Apologies if this has been covered elsewhere but I couldn't see anything on the order reference pages.

The determiniation of the decimal part fails for negative numbers:

See this debug output with values displayed:

          return null == a && (a = ht),
            null == i && (i = gt),
            {
                display: function(e) {e = -1140516
                    var t, r, n;t = "-", r = 1140516.46, n = ",81032.46"
                    return "number" != typeof e && "string" != typeof e || "" === e || null === e ? e : (t = (n = "number" == typeof e ? e : parseFloat(e)) < 0 ? "-" : "",e = -1140516
                    1e11 <= (r = Math.abs(n)) || r < 1e-4 && 0 !== r ? (r = n.toExponential(o).split(/e\+?/))[0] + " x 10<sup>" + r[1] + "</sup>" : isNaN(n) ? k.escapeHtml(e) : (n = n.toFixed(o),r = 1140516.46
                    r = Math.abs(n),
                    e = parseInt(n, 10),e = -1140516
                    n = o ? i + (r - e).toFixed(o).substring(2) : "",r = 1140516.46
                    (t = 0 === e && 0 === parseFloat(n) ? "" : t) + (l || "") + e.toString().replace(/\B(?=(\d{3})+(?!\d))/g, a) + n + (s || "")))
                }
            }
        },

r is always positive, but the integer val e is negative for negative numbers, so r-e gives a large sum instedd of the decimal part.

i wish .net part would be a c# wrapper of DataTables.net's js api, it would be more and more effective imho

2.3.8 Test Case
* Properly shows the negative values as expected

As you can see from the examples, 3.x version introduced an issue with negative numbers when using the render.number helper. It's currently causing an extra minus sign to be tacked on to the display value.**

I recently installed the latest update to DataTables and I have enabled the new Column Control extension. There are two issues I am running into:

1. With the SearchList content type enabled for a column, if I have two values in a column that are the same except one value has a space character (at the beginning, end, or somewhere in between) and the other doesn't, they are being treated as separate values.
2. With the SearchList content type enabled for a column, if a value in a column has one of these special characters, it will not be returned when the column is filtered by that value:
   
   • non-breaking space ( )
   • less than (< or <)
   • greater than (> or >)

Kind of hard to reproduce all the time, but I can generally reproduce it it tables using column reorder that are then refreshed - you get "undefined" instead of the correct icon in the search input

I just started a plus trial and I can see my trial key on this page: https://datatables.net/plus/installation

but that page also says

Your license keys are always available on your account page

but I cannot see they key on my account page

I have a column in my DataTable in which either a date will be shown (where one exists in the database) or it will be blank. Presently, when sorting by this column ascending, all the blanks are shown first, before the actual dates. Is there a way to say "in this column full of dates, treat any blank values as a really far off date, e.g. 01/01/3000" ?

Many thanks for your help in advance.

Debugger code (debug.datatables.net):
old page onecom
new page Upload does not get past Gathering data

Error messages shown:
jQuery.Deferred exception: s.match is not a function stringToCss@https://liveresults2.kitst.co.uk/js/datatables/datatables.js:83109:14
Description of problem:
I upgraded from 2.1.8 to 3.0.1 and get the above error

The original site with 2.1.8 is here: https://liveresults.kitst.co.uk/#coll1km26.csv

Thanks
Ted
tfcroft4

function divi__child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    
    // add datatables css
    wp_enqueue_style( 'datatables-css', '//cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.13.1/b-2.3.3/b-html5-2.3.3/b-print-2.3.3/r-2.4.0/sl-1.5.0/datatables.css');
    
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_enqueue_styles' );

function divi__child_theme_register_scripts() {
    
    
    // add datatables js
    wp_enqueue_script( 'datatables-pdf-js', '//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.js');
    wp_enqueue_script( 'datatables-fonts-js', '//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js');
    wp_enqueue_script( 'datatables-datatables-js', '//cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.13.1/b-2.3.3/b-html5-2.3.3/b-print-2.3.3/r-2.4.0/sl-1.5.0/datatables.js');
    wp_enqueue_script( 'datatables-moment-js', '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js'); 
    
  
}
add_action( 'wp_enqueue_scripts', 'divi__child_theme_register_scripts' );

In the second site I get the following errors:-
Uncaught TypeError: Cannot read properties of undefined (reading 'textContent')
jquery-migrate.min.js?ver=3.4.1:2 JQMIGRATE: Migrate is installed, version 3.4.1
jquery.min.js?ver=3.7.1:2 jQuery.Deferred exception: jQuery(...).DataTable is not a function TypeError: jQuery(...).DataTable is not a function
at HTMLDocument.eval (eval at <anonymous> (https://hasi.com.au/newhasi/pricing/:2:127), <anonymous>:4:26)
at e (https://hasi.com.au/newhasi/wp-includes/js/jquery/jquery.min.js?ver=3.7.1:2:27028)
at t (https://hasi.com.au/newhasi/wp-includes/js/jquery/jquery.min.js?ver=3.7.1:2:27330) undefined
ce.Deferred.exceptionHook @ jquery.min.js?ver=3.7.1:2
jquery.min.js?ver=3.7.1:2 Uncaught TypeError: jQuery(...).DataTable is not a function
at HTMLDocument.eval (eval at <anonymous> (pricing/:2:127), <anonymous>:4:26)
at e (jquery.min.js?ver=3.7.1:2:27028)
at t (jquery.min.js?ver=3.7.1:2:27330)

Any ideas would be very welcome.

Thanks,
Tim

this.filter = (value) => {
    this.tableRef.column(`${this.columnName}:name`).search(value).draw();

    let searchPattern = value
        .split(',')
        .map(item => $.fn.dataTable.util.escapeRegex(item.trim()))
        .join('|');

    this.tableRef.column(`${this.columnName}:name`).search(searchPattern, true, false).draw();
}

but the result is coming with values containing for example 10050, 100321.

Thanks for help!
Ross

the datatable renders as expected. If you then manually narrow the window to a minimum width, both the table and the cards disappear! Is this the expected behavior?

Thanks for any help provided!