{
                            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.

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

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.

Hi, this is my first attempt at having a datetime column, so I'm probably missing something obvious, but I've searched the forums and implemented the suggestions I found, but it is not quite right.

The column searches correctly on the date but the times are not right, it should be the most recent at the top, this is the code I have added, so far:

Before the DT init section I added:

    $.fn.dataTable.moment('DD/MM/YYYY'); \\ This already existed and is needed for simple date fields
    $.fn.dataTable.moment('DD/MM/YYYY HH:MM:SS A'); \\ This I added for the new datetime fields

In the column definition section I added:

     { targets: [0], type: "moment-DD/MM/YYYY HH:MM:SS A"},

If someone could please take a look and advise that would be greatly appreciated.

Thanks, Chris

console.log( 'Class name defined in thead th', table.cells( 0, '.name').count() );
console.log( table.cells( 0, '.name').data() );
console.log( 'Class position defined in tbody td', table.cells( 0, '.position').count() );
console.log( table.cells( 0, '.position').data() );

        <thead>
          <tr>
            <th class="name">Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
....
          <tr>
            <td>Tiger Nixon</td>
            <td class="position">System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>

I expected the cell with class position to be found not the cell where the th has the class name.

The [jQuery selector` docs state this:

jQuery instance can be given as a cell selector, with any nodes which are selected by jQuery and match those available in the table's tbody selected.

Kevin

1. Incomplete multi-character sanitization
wwwroot/lib/datatables/dist/js/jquery.dataTables.js:1515 <-- line number

return d.replace( _re_html, '' );

This string may still contain , which may cause an HTML element injection vulnerability.

Please see “REPLACE COMMENTS” section from scanning.

2. Incomplete multi-character sanitization
wwwroot/lib/datatables/dist/js/jquery.dataTables.js:5817 <-- line number

    s = s.replace( __re_html_remove, '' );

Please see “REPLACE COMMENTS” section from scanning.

3. Incomplete string escaping or encoding
wwwroot/lib/datatables/dist/js/jquery.dataTables.js:4470 <-- line number

    return word.replace('"', '');

Please see “REPLACE COMMENTS” section from scanning.

4. Polynomial regular expression used on uncontrolled data
wwwroot/lib/datatables.net/js/dataTables.js:4479 <-- line number

var parts = search.match( /!?["\u201C][^"\u201D]+["\u201D]|[^ ]+/g ) || [''];

Please see “MATCH COMMENTS” section from scanning.

REPLACE COMMENTS
Sanitizing untrusted input is a common technique for preventing injection attacks such as SQL injection or cross-site scripting. Usually, this is done by escaping meta-characters such as quotes in a domain-specific way so that they are treated as normal characters.

However, directly using the string replace method to perform escaping is notoriously error-prone. Common mistakes include only replacing the first occurrence of a meta-character, or backslash-escaping various meta-characters but not the backslash itself.

In the former case, later meta-characters are left undisturbed and can be used to subvert the sanitization. In the latter case, preceding a meta-character with a backslash leads to the backslash being escaped, but the meta-character appearing un-escaped, which again makes the sanitization ineffective.

Even if the escaped string is not used in a security-critical context, incomplete escaping may still have undesirable effects, such as badly rendered or confusing output.

Recommendation
Use a (well-tested) sanitization library if at all possible. These libraries are much more likely to handle corner cases correctly than a custom implementation.

An even safer alternative is to design the application so that sanitization is not needed, for instance by using prepared statements for SQL queries.

Otherwise, make sure to use a regular expression with the g flag to ensure that all occurrences are replaced, and remember to escape backslashes if applicable.

Note, however, that this is generally not sufficient for replacing multi-character strings: the String.prototype.replace method only performs one pass over the input string, and will not replace further instances of the string that result from earlier replacements.

For example, consider the code snippet s.replace(/\/..\//g, ""), which attempts to strip out all occurences of /../ from s. This will not work as expected: for the string /./.././, for example, it will remove the single occurrence of /../ in the middle, but the remainder of the string then becomes /../, which is another instance of the substring we were trying to remove.

MATCH COMMENTS
Some regular expressions take a long time to match certain input strings to the point where the time it takes to match a string of length n is proportional to nk or even 2n. Such regular expressions can negatively affect performance, or even allow a malicious user to perform a Denial of Service ("DoS") attack by crafting an expensive input string for the regular expression to match.

The regular expression engines provided by many popular JavaScript platforms use backtracking non-deterministic finite automata to implement regular expression matching. While this approach is space-efficient and allows supporting advanced features like capture groups, it is not time-efficient in general. The worst-case time complexity of such an automaton can be polynomial or even exponential, meaning that for strings of a certain shape, increasing the input length by ten characters may make the automaton about 1000 times slower.

Typically, a regular expression is affected by this problem if it contains a repetition of the form r* or r+ where the sub-expression r is ambiguous in the sense that it can match some string in multiple ways. More information about the precise circumstances can be found in the references.

Recommendation
Modify the regular expression to remove the ambiguity, or ensure that the strings matched with the regular expression are short enough that the time-complexity does not matter.

good morning, I use laravel 10 with datatables, my app.js is this, everything was working now but when I execute the npm run build command I receive this error message and the tables present in laravel disappear, what should I do to solve it?

app.js

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
import 'laravel-datatables-vite';

import jQuery from 'jquery';
window.$ = jQuery;

import moment from "moment";
window.moment = moment();

import Editor from '@datatables.net/editor-dt';
import 'datatables.net-editor-bs5/js/editor.bootstrap5';
import 'datatables.net-bs5/js/dataTables.bootstrap5';
import 'datatables.net-select-bs5/js/select.bootstrap5';
import 'datatables.net-searchpanes/js/dataTables.searchPanes';
import 'datatables.net-searchpanes-bs5/js/searchPanes.bootstrap5';
import 'datatables.net-responsive-bs5/js/responsive.bootstrap5';
import 'datatables.net-buttons-bs5/js/buttons.bootstrap5';
import 'jquery/dist/jquery';
import 'datatables.net/js/jquery.dataTables';
import 'datatables.net-select/js/dataTables.select';
import 'datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js';
import 'bootstrap/dist/js/bootstrap.bundle';
Editor(window, $);

npm install --save jquery
npm install --save jszip
npm install --save pdfmake
npm install --save datatables.net-bs5
npm install --save @datatables.net/editor-bs5
npm install --save datatables.net-autofill-bs5
npm install --save datatables.net-buttons-bs5
npm install --save datatables.net-colreorder-bs5
npm install --save datatables.net-datetime
npm install --save datatables.net-fixedcolumns-bs5
npm install --save datatables.net-fixedheader-bs5
npm install --save datatables.net-keytable-bs5
npm install --save datatables.net-responsive-bs5
npm install --save datatables.net-rowgroup-bs5
npm install --save datatables.net-rowreorder-bs5
npm install --save datatables.net-scroller-bs5
npm install --save datatables.net-searchbuilder-bs5
npm install --save datatables.net-searchpanes-bs5
npm install --save datatables.net-select-bs5
npm install --save datatables.net-staterestore-bs5

error during build:
TypeError: Cannot read properties of undefined (reading 'buttons')
    at file:///home/......../node_modules/datatables.net-buttons/js/buttons.colVis.mjs:14:24
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:409:24)
    at async loadConfigFromBundledFile (file:///home/......../node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66691:15)
    at async loadConfigFromFile (file:///home/......../node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66532:24)
    at async resolveConfig (file:///home/......../node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66140:24)
    at async build (file:///home/......../node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:65237:18)
    at async CAC.<anonymous> (file:///home/......../node_modules/vite/dist/node/cli.js:828:5)

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import jQuery from "jquery";
import jszip from 'jszip';
import pdfmake from 'pdfmake';
import DataTable from 'datatables.net-bs5';
import Editor from '@datatables.net/editor-bs5';
import 'datatables.net-autofill-bs5';
import 'datatables.net-buttons-bs5';
import 'datatables.net-buttons/js/buttons.colVis.mjs';
import 'datatables.net-buttons/js/buttons.html5.mjs';
import 'datatables.net-buttons/js/buttons.print.mjs';
import 'datatables.net-colreorder-bs5';
import DateTime from 'datatables.net-datetime';
import 'datatables.net-fixedcolumns-bs5';
import 'datatables.net-fixedheader-bs5';
import 'datatables.net-keytable-bs5';
import 'datatables.net-responsive-bs5';
import 'datatables.net-rowgroup-bs5';
import 'datatables.net-rowreorder-bs5';
import 'datatables.net-scroller-bs5';
import 'datatables.net-searchbuilder-bs5';
import 'datatables.net-searchpanes-bs5';
import 'datatables.net-select-bs5';
import 'datatables.net-staterestore-bs5';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '$': 'jQuery'
        },
    },
});

The error is: Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11. I have reviewed my script, and the field appears to be fully defined.

Any ideas? Let me know if I need to send any code snippets.

Thanks,

Thanks ahead of time for your time

When deleting the row, the ajax request is sent to the server with a successful response and the row is removed from the server. But now when the datatable is updating, it seemingly has problems with the removed row. It happens all the time and it doesnt matter which row i'm deleting.

Exception: Uncaught TypeError: ctx[0].aoData[this[0]] is null (dataTables.mjs:8140:2)

Code snippet from dataTables.mjs 8135 to 8143:

_api_register( _child_obj+'.isShown()', function () {
    var ctx = this.context;

    if ( ctx.length && this.length ) {
        // _detailsShown as false or undefined will fall through to return false
        return ctx[0].aoData[ this[0] ]._detailsShow || false; // <-- exception happens here
    }
    return false;
} );

At this point of the exception, ctx[0].aoData[ this[0] ] is null because it is the removed row. When inspecting ctx[0].aoData, i see all the rows as objects with data in them except the index of the removed row, which is null.

The comment above the exception line also mentions that "it should fall through to return false if _detailsShow is undefined". Maybe it was intended that the row object can be undefined/null at this point but it's not handled correctly?

Deprecated: Creation of dynamic property DataTables\Database::$query_driver is deprecated in /www/seidenphp/htdocs/DataTables_Editor/php/Database/Database.php on line 61.

Deprecated: Creation of dynamic property DataTables\Database\DriverDb2Query::$_dbHost is deprecated in /www/seidenphp/htdocs/DataTables_Editor/php/Database/Query.php on line 55.

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /www/seidenphp/htdocs/researchdevelopment/formulamanagement/ssp_SampleFormulaLookup_Sandbox.php on line 69.

Deprecated: trim(): Passing null to parameter #1 ($string) of type string is deprecated in /www/seidenphp/htdocs/DataTables_Editor/php/Editor/Format.php on line 229.

Let me know if I need to provide additional information.

However, the sorting of columns does not perform the same between versions and I am not sure if there is a new setting I am missing. in version 1.10 I could sort column 1, then columns 2. And the result would be column 1 keep its applied sorting, and column 2 would add to the sorting so to speak.

Now with v2, it seems to remove the previous sort and apply the new sort to the column.

I am not sure how I get the old form of sorting re applied to the new version.

More clearer example:

Initial column load
Column 1        Column 2
7                    1
9                    0
1                    0
5.5                  1

v1.10 sorting
Sort Column 1

Column 1       Column 2
1                  0
5.5                1
7                  1
9                  0

Sort Column 2

Column 1      Column2
1                   0
9                   0
5.5                 1
7                   1


V2 sorting
Sort Column 1

Column 1       Column 2
1                 0
5.5               1
7                 1
9                 0

Sort Column 2

Column 1        Column 2
9                    0
1                    0
7                    1
5.5                  1