Error messages shown:
Popup message pointing to https://datatables.net/tn/7

Description of problem:
My ajax data sources stopped working when I attempted to upgrade from v2.3.5 to v3.0.2. I was able to identify two issues:

Issue 1 - Error Message
The error message is inaccurate because of a typo. Referencing the cdn source:
Line 610: statusText = 'parseerror';
vs
Line 7592: if (error == 'parsererror') {

This leads you to a message about response codes, when in reality the server is sending back a 200 response, but it's unable to be parsed by DataTables.

Issue 2 - Accept Header
It looks like XmlHttpRequests were migrated from delegating to jQuery to a making direct call. This has the side effect of losing the HTTP headers that were previously set, except for 'X-Requested-With'.
In particular, we lose the accept header that specifies the json format. This is needed when pointing to our Spring endpoint, which otherwise sends back XML as a default.

In 2.3.5, the header is set to application/json, text/javascript, */*; q=0.01.
In 3.0.2, it's just */*, which you can see in the example link.

I confirmed that adding a custom accept via ajax.headers resolves this issue, but I'm unclear whether other headers would need to be properly updated as well.

Let me know if this all sounds plausible, or if there could be an issue with the implementation.

I just wanted to let you know that a new version of JSZip is available.
It is version 3.10.2.
See: https://stuk.github.io/jszip/

I hope you will integrate it into the download generation tool to replace version 3.10.1.

Thanks in advance and have a great day.

Editor::inst( $db, 'isobic', 'id' )
    ->fields(
        Field::inst( 'isobic.BIC' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'Requis' )))
            ->validator( Validate::maxLen( 11 ) )
            ->validator( Validate::unique( ValidateOptions::inst()
                ->message( 'Existe déjà' )))
    )

I tried the following:

Editor::inst( $db, 'isobic', 'id' )
    ->fields(
        Field::inst( 'isobic.BIC' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'Requis' )))
            ->validator( Validate::maxLen( 11 ) )
            ->validator( Validate::unique( ValidateOptions::inst()
                ->message( 'Existe déjà' ))),
        new Field( 'country' )
            ->getFormatter(function ($val, $data, $opts) {
                return substr($data['isobic.BIC'], 4, 2);
            })
            ->set(false),
    )

and

Editor::inst( $db, 'isobic', 'id' )
    ->fields(
        Field::inst( 'isobic.BIC' )
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'Requis' )))
            ->validator( Validate::maxLen( 11 ) )
            ->validator( Validate::unique( ValidateOptions::inst()
                ->message( 'Existe déjà' ))),
        new Field( 'country' )
            ->setValue( substr($data['isobic.BIC'], 4, 2))
            ->set(false),
    )

But I am getting an error message: "An SQL error occurred: SQLSTATE[42S22]: Column not found: 1054 Unknown column 'country' in 'field list'".
Is there a way to achieve what I am trying to do?

Thanks and regards.

We have a combined use of inline and edit in some cases usning display "boostrap" together with floating labels and in these siituations I have noticed some things:

1) If you enter a field for inline editing directly, floating labels are not displayed. Howvever, if you have edited a row using the external editor, editing a field with inline editing afterward shows the floating label. Both works for me, but a consisten behaviour one or the other way would be nice.

2) A similar thing happens for the "remove" button, if the button is pressed before any external editor has been open the confirm text is not part of the form being displayed.
IF you have opened an external editor, the confirm text is there, however it is not visible... it has opacity set to 0

<div class="DTE_Form_Info" style="display: block; opacity: 0;">Är du säker på att du vill ta bort 1 rad?</div>

3) One more question in the same testcase, Editor defaults still on its own (DataTable.Editor.defaults) and not in a section of DataTables.defaults?

KR,
Bjørn Hasselberg

buttons: [{ text: '<span class="fa-layers fa-fw"><i class="fa fa-ban"></i><i class="fa fa-filter" data-fa-transform="shrink-7"></i></span> Clear Filter', action: function(e, dt, node, config) { // Clear Filter Button $('#dogs tfoot th').find('input,select').val(''); $('input.flt:checkbox').prop('checked', false).parent().removeClass('active'); $('input.flt:text,select.flt,input.flt:hidden').val('').data('null', ''); $('.fltcol').addClass('d-none'); //$('#dogs').DataTable().columns().search('').draw(); this.columns().search('').draw(); window.history.pushState({}, document.title, "<?= $us_url_root ?>index.php?view=dogs"); } }

Just wondering, is it normal for the Bootstrap 4 version to still be 4.6.0, given that the latest version is 4.6.2 (and has been for quite some time)?

Have a great day, and thanks for your reply.

If the syntax

"language": {
        "url": '//cdn.datatables.net/plug-ins/3.0.2/i18n/sv-SE.json'
}

is used this code

searchAppTable.button().add(null, {
    action: function (e, dt, button, config) {
        dt.ajax.reload();
    },
    text: 'Reload table'
});

returns this error:

"TypeError: Cannot read properties of undefined (reading 'map')
at B.instanceSelector (https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-3.0.2/b-4.0.2/cv-1.0.2/date-2.0.0/e-3.0.1/fc-6.0.0/kt-3.0.0/rg-2.0.0/sc-3.0.0/sb-2.0.0/sl-4.0.1/datatables.min.js:40:49241)
at ApiButton.<anonymous> (https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-3.0.2/b-4.0.2/cv-1.0.2/date-2.0.0/e-3.0.1/fc-6.0.0/kt-3.0.0/rg-2.0.0/sc-3.0.0/sb-2.0.0/sl-4.0.1/datatables.min.js:40:54889)
at ApiButton.r [as add] (https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-3.0.2/b-4.0.2/cv-1.0.2/date-2.0.0/e-3.0.1/fc-6.0.0/kt-3.0.0/rg-2.0.0/sc-3.0.0/sb-2.0.0/sl-4.0.1/datatables.min.js:30:75341)
at <anonymous>:390:25
at https://live.datatables.net/js/prod/runner-3.17.11.min.js:1:13478
at https://live.datatables.net/js/prod/runner-3.17.11.min.js:1:10543"

However if the content of the file (excluding the {} that are surrounding the settings, the error goes away.
Both the url and content are in the test case, just uncomment the part you want to test.

The case is set with version 3, but can be switched to version 2 by change which lines in the HTML to uncomment
(v2 contains bs5 so looks crap but shows same error)

KR,
Bjørn Hasselberg

I am having an issue with DataTables version 3.0.2 that I do not experience with version 2.3.8.

Column 3 is being resized excessively and is crushing the other columns (see test case)

What could be causing this problem?

Thanks in advance for your help, and have a nice day.

Hello,

I have just test the last version 3.0.2 of DataTables and I have somes problems with it.

1./ Regression with French dates and ColumnControl

As you can see in the test case, I am not able to filter on a specific date.
see: https://streamable.com/l1f27j

However, in a previous post, you explained how to do it, and it ended up working. I think there has been a regression in date handling.
See https://datatables.net/forums/discussion/81492/unable-to-find-an-exact-date-using-fixedcolumns-component-and-calendar-with-data-in-datetime-format

2./ Column visibility with Bootstrap 4

I think there is a problem with the way you display what columns are visible or not.
Has you can see on the video, there is no way to know what column is really hidden or not.

See: https://streamable.com/0tmudt

3./ Question about the way you select lines in the DataTable for Button (Copy, CSV, ...)

In DataTables version 1.10.x, I believe only the rows visible on the screen were copied. That behavior has changed in version 2: even if only 10 out of 100 rows are displayed, the "Copy" button copies all 100 rows. Is that correct? And if a filter is applied, only the filtered rows are copied.

So, in my example (based on "old code" from version 1.10.x), I assume those lines are no longer needed, right?

"columns": ":not(.no-col-exportable, .no-col-printable)",
"rows": ":visible"

See below:

"buttons" : {
  "dom": {
    "button": {
      "className": "btn btn-sm"
    }
  },
  "buttons": [
    {
      "extend": "copyHtml5",
      "className": "btn-outline-secondary",
      "exportOptions": {
        "columns": ":not(.no-col-exportable, .no-col-printable)",
        "rows": ":visible"
      },
    },

Thanks in advance for your answer and have a nice day.

Hello,

I’m not sure if the issue is on my end or with the npm repo, but there seems to be a problem with the version number of the "datatables.net-bs4" package (see screenshot below).

Could you confirm the issue?

Thanks, and have a great day.

With ColumnControl and stateSave: true, a date entered as 06/10/1984 filters correctly. However, after reloading the page, the saved state restores it as 06-10-1984, and Editor PHP sends that value to MySQL, causing an Incorrect DATETIME value error.

SearchBuilder, when input 06/10/1984 doesnt work serverside.
SearchBuilder will also restore the state as 1984-10-06 00:00:00 and the search doesnt work.

I'm using the nigtly build as discussed here:
https://datatables.net/forums/discussion/81852/problem-with-date-type-on-3-0-update#latest

Environment: Self hosted with importing the downloaded DT files as ESM module to our project (on multiple files)

a) Even though I've registered our editor key with DataTables.key('editor_1_20270724:...'). I'm both getting a warning
'License for Editor only. Upgrade for Plus' and then 'Unhandled Promise Rejection: TypeError: undefined is not a constructor (evaluating 'new DataTable.Editor( {'

b) I've tried to upgrade to Datatables Plus and payment by my card has been accepted, I've not got any conformation mail nor a new license specified to my account. (No payment has then been made on the card though)

So:

1) Why do I get a yellow a yellow notification that I have a license for editor only? I'm only using the editor and nothing more of the DataTables plus software suite?

2) How can I get the new DataTable.Editor to be functional on DT3? Or perhaps, how can I search for more relevant error information why the Editor functionality does not load fully?

3) How can I understand I'm not able to upgrade to Plus from my Editor only license? I've used the same card for both upgrading Editor from 2 to 3 and then for trying to upgrade from Editor 3 to Plus?

Problem n°1:

Click the "Column visibility" button, and the menu will not appear.

I think my problem with the buttons is very similar to the one described in this link:
https://datatables.net/forums/discussion/81839/datatables-3-buttons-dont-work-in-bootstrap-4#latest

Problem n°2:

Click on a button (copy for example) to see the error message :

Uncaught SyntaxError: Failed to execute 'matches' on 'Element': ':visible :not(.no-col-exportable, .no-col-printable)' is not a valid selector.

I have read the upgrade note for "CSS selectors" but I don't know how to do it directly in dataTable initialization.

https://datatables.net/download/upgrade/core/3.0/upgrade#CSS-selectors

Problem n°3:

As you can see, pagination is broken when you try to display all rows at initialization

Problem n°4:

Check all checkbox.

Then move the second column to the left

Then uncheck the first two lines (for example)

Now, move the first column to the right (to its initial position)

You will see that all checkbox are checked whereas the text says "2 rows selected"

Problem n°5:

Why I have to put {type : null} instead of {type : "date"} for making filter on date to work

Replace "null" with "date" for the type of column 3 (the fourth column) and try filtering by the date 27/07/2026, for example.
The filtering no longer works.

Question:

Is there a simple way to vertically align all cells content?

Let me know if you want me to make a video to show the problems.

Thank you in advance for your help, and have a good day.
Lolo.

Just a minor thing (apologies if its me) - on the beta download builder DateTime is labelled as 3.0.0 - which does not exist - but if you change this to 2.0.0 it works fine - (i got the version for 2.0.0 from your beta release RSS feed)

The concat and single (for datetime) download script strings dont work with 3 but do with 2

a second thing i noticed and this might be my environment due to multiple script / ad blockers but the SRIs are not generating - just get the "Standby - Calculating SRI hashes..."

Errors out on a 400 CORS error - does not effect anything for me and may not even be an issue

Cheers
Pete

{
                            text: 'Clipboard (formatted)',
                            className: 'c9btnEditor',
                            attr: {
                                id: 'c9btnCopyFormatted'
                            },
                            action: async function (e, dt, node, config) {
                                let element = $('.dt-scroll')[0];
                                await BUtils.copyToClipboard(element);
                                **alert('Table copied to clipboard');**
                                $('.dt-button-collection').hide();
                                $('.dt-button-background').hide();
                            },
                            titleAttr: 'Copy formatted table to clipboard'
                        },

I want to replace the 'alert' with the DataTables popup.

https://github.com/DataTables/Vue/issues/32

i use Stackbltiz to create a running example

https://stackblitz.com/edit/vitejs-vite-5madia3d?file=src%2Fcomponents%2Fdatatbles.vue

Can you help me solve this problem?

thank you!!

I have tried removing all recent global changes to do with datatables, but the issue remains.

So, I'm struggling to find the cause of this issue.
If someone could please take a look and offer any advice that would be really appreciated.

Thanks, Chris

<DataTable :columns="columns" ... >
  <template #page-lenght="{ props }">
    <v-select :items="props.items" @change="props.change">
    </v-select>
  </template>
</DataTable>

Maybe there are other options? Bootstrap styling for addons doesn't work for me in Vue. I don't know why, it just gives errors inside the library during initialization that some variables are undefined. I also wouldn't want to change classes manually via css, since it would be difficult for all elements and you would need to take into account many parameters such as the theme.

https://datatables.net/reference/option/rowId

Since upgrading to DataTables 2.x I'm now seeing a variety of different results when trying to do lookups. In some cases both the unescaped and escaped ids work. This is for an update to an existing record so the count should return 1.

This is another update but this time the unescaped id works but the escaped id doesn't (count returns 0). I can't tell why this would have problems the one above wouldn't (or vice versa).

In some cases the unescaped id throws an error (it's being interpreted as a css pseudo-selector) while the escaped version doesn't (it should return a count of 0 as in this case it's adding a new row). Not sure why there'd be a css pseudo-selector error here but not for the two cases above (or vice-versa).

I've also caught the code in the debugger and pulled the first row out of a table, grabbed the id and used it to look that same row back up both unescaped and escaped. In this case the unescaped version worked and the escaped version did not.

This is the escaping method I'm using:

static escapeMultiKeyForCssIdLookup (multiKey) {
    return "#" + multiKey.replace(/[-[\]{}():*+?!.,%\\^$|#/\s]/g, '\\$&');
};

I didn't run into this issue with DataTables 1.x and I'm not sure what might be different in DataTables 2.x. This is the only ticket I could find that looked even vaguely related.

https://datatables.net/forums/discussion/comment/230364

I tried to reproduce this behavior in live.datatables.net but so far I've been unable to. I'm using the latest version of DataTables (2.3.2). I've also tried replacing the colons that are being used as delimiters in the ids with the | character but that didn't help. The result of all of this is some (but not all) rows that should be getting added, updated and deleted are failing to do so and the data in the table is now partially out of sync with the rest of the system. Any idea what might have changed or what I might be doing wrong?

Thanks.

Ben

https://datatables.net/examples/api/counter_columns.html

If you increase the number of rows significantly the table starts to struggle. Typing in the search box results in noticeable lag. This example I created has 2k+ records. I just duplicated the sample data over and over. I tried to create 10k records but the live.datatables.net editor said it was too big to save.

https://live.datatables.net/sopifixu/1/edit

We've got tables that have closer to 10k records and they're very slow to respond to searching and ordering as a result. Is there a way to implement the index column so that it performs better?

We had an index column that worked well in DataTables 1.x but it was built differently.

    dt.on('order search', () => {
        dt.column('index:name', { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
            cell.innerHTML = i + 1;
        });
    }).columns.adjust().draw('full-hold');

That code doesn't work with DataTables 2.x. Ordering, searching and paging results in the numbers in the index column being completely out of order or not showing up at all.

Thanks.

Ben

We decides to protect all our APIs with google reCAPTCHA and we do not have problems with other APIs. But I cannot understand how to integrate reCAPTCHA token request before ajax query of DataTables and how to send reCAPTCHA token within ajax query.

Please help me! Your help will be much appreciated!

I'm needing another DataTable that's using Javascript sourced data to load as a child row. That link says that you can put whatever you want in the child row, including another DataTable.

I've done a lot of searching. Does anyone know of a link to an example of this setup? I haven't quite wrapped my head around how I need to do this yet. I also haven't found any examples that just jump out at me as The Way.

Thanks,

I would like to know if it is possible to force the display of all columns of the "searchPanes" component without having to set the "threshold" option: 1

Especially since it is mentioned in the documentation that it is not recommended.

If you want to force specific panes to always be present, or to always be hidden, use the columns.searchPanes.show option. This is a much cleaner way of forcing panes to show/hide.

I have seen this example https://datatables.net/reference/option/columns.searchPanes.show and try to make it works but with targets: [-1] but without success.

My test case is almost functional, I'm sure there's not much missing for it to work.

Also, when a column is invisible when generating the Datatable and then makes the column visible, this "new" column does not appear in the "searchBuilder" and "searchPanes" components.
Is this normal?

I know this post is a bit of a follow-up to the one below, but the question is slightly different, so I decided to open a new question.
https://datatables.net/forums/discussion/80822/how-to-exclude-columns-for-searchbuilder

Thanks in advance for your help and have a nice day.

One of the issues with serverSide processing is that you can only search for database values and not for rendered values returned from a getFormatter.

Would it be possible to provide some kind of "hybrid" serverSide processing that searches for server side getFormatter values (if provided) instead of database values? I think this would still be pretty fast - depending on the server of course.

Just to clarify what I mean:
I have a state code in some database field that nobody will ever search for. Everyone will want to search for the state name. Hence I render the state name in a getFormatter on the server. With serverSide the search doesn't work because serverSide is only looking at the database field content which does not contain the state name.

This is style 67 which is missing in the docs (the docs end with style 66).
https://datatables.net/reference/button/excelHtml5

Could you update this please @allan. Many thanks!

I use this (probably outdated) version of buttons: https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.js

This is style 67:

'<xf numFmtId="14" fontId="0" fillId="0" borderId="0" applyFont="1" applyFill="1" applyBorder="1" xfId="0" applyNumberFormat="1"/>'

And this is the matching function in "_excelSpecials":

{ match: /^[\d]{4}\-[\d]{2}\-[\d]{2}$/, style: 67, fmt: function (d) {return Math.round(25569 + (Date.parse(d) / (86400 * 1000)));}} //Date yyyy-mm-dd

And this is how I use it:
As part of the "customize" method:

var dateCols = ['C', 'F', 'I'];       
for ( i=0; i < dateCols.length; i++ ) {
    $('row c[r^='+dateCols[i]+']', sheet).attr( 's', '67' );
}

As part of "exportOptions.format.body":

if ( $.inArray(column, targetColsDates) >= 0 ) {
    if (data <= "---") {
        return "";
    }
    //if we have a timestamp field
    if ( ( data.substr(0, 10).split("-").length - 1 ) === 2 ) {
        return data;
    }
    return moment(data, 'L').format('YYYY-MM-DD');
}

So, I basically don't care whether the "_excelSpecials" function recognizes timestamps - because they are orderable anyway even if not recognized as dates. All the "real" dates are converted to "YYYY-MM-DD" and can be matched by "_excelSpecials".

Description of problem: I want to update all the cells in the first column of a table. I select that column with column(0), then chain cells(). In a 3 row, 6 column table as in my test case I would expect 3 cells to be returned - those in the first column. However, all table cells are returned.

Is this a bug, or have I misunderstood something?

A subsidiary question, in the light of the fact that internal row indices are not the same as the displayed row positions, is whether I should rely on column(0) always returning the first column in the table. (In my situation, columns are never reordered).

ctrTable.button().add( 3, {   
    extend: "editPSCData", className: "editorOnly", name: "editPSCVatDataButton",
    split: [
        {   extend: "editPSCData", name: "editPSCPreTaxDataButton",
            text: lang === 'de' ? 'VSt.-Check §15 UStG' : 'Input tax check §15 UStG'},
        {   extend: "editPSCData", name: "editPSCPreTaxCorrectionButton", className: "hidden",
            text: lang === 'de' ? 'VSt.-Korrektur §15a UStG' : 'Input tax adjustmt. §15a UStG'}
    ]
} );

When I ran this code:

if ( ! isCtrEditor ) {
    ctrTable.buttons('.editorOnly').nodes().addClass('hidden'); 
}

which means, if the user is not entitled to edit a contract the "editorOnly" buttons should be hidden.

That didn't work for the split button. While the two buttons in the dropdown of the split button were hidden the wrapper div containing the first or "main" button was not hidden because the class "editorOnly" wasn't assigned to the wrapper div by Data Tables.

I added this workaround to make it work:

$('div.dt-btn-split-wrapper > button.editorOnly').parent().addClass("editorOnly");

I think this is a bug.