Kevin

I'm using following versions:
datatables 1.10.25
editor 2.0.4
jQuery UI - v1.12.1

Any suggestion? Thanks!

Uncaught TypeError: $(...).addClass(...).dataTable is not a function

Kevin

I have installed packages datatables.net-bs and datatables.net-rowgroup-bs (yes, it's an old project using bootstrap3).

I am importing like so:

import DataTable from 'datatables.net-bs';
import type { Config, Api } from 'datatables.net-bs';

This works fine for annotating the return value of new DataTable(...) and a function that returns some configuration options. For example (all this resides in a Stimulus controller class):

// class member:
declare dt: Api<any>
...
// method asynchronously initializes the table:
readyValueChanged(dataIsReady: boolean) {
  if (dataIsReady) this.dt = new DataTable(this.element, this.baseOptions)
}
...
get baseOptions(): Config {
  return { ... }
}

Now I want to work with the RowGroup extension. Along with the above imports, I add:
import 'datatables.net-rowgroup-bs';

However, TypeScript flags this.dt.rowGroup() and says "rowGroup does not exist on type Api<any>". It similarly complains when I add a rowGroup property to the options object.

I see that node_modules/datatables.net-rowgroup-bs/types/types.d.ts is an empty file, however node_modules/datatables.net-rowgroup/types/types.d.ts has the necessary declaration merge (or extension). Whether I import datatables.net-rowgroup or datatables.net-rowgroup-bs, the declaration merge just doesn't seem to happen. Do I need to declare a module, or ... something?

I should also mention... I'm not bothering with @types definitions, as my assumption is that the official type definitions are sufficient and I'm trying to keep things as simple as possible.

Like I said, I'm a TypeScript newb, so hopefully I'm just doing something dumb. I'd be grateful for any tips.

Thanks!

dataType: 'json', fields: [{ label: "Name", name: "Name" }, { label: "NTU", name: "NTU", type: "display" }, { label: "DPic", name: "DPic" }, {

how rebuild the seachpanel and datatables after duplicate record for update table and seachpanel.

today, i reload the page and i make a new filter with searchPanes

my code :

 {
                extend: "selected",
                text: 'Duplicate',
                action: function ( e, dt, node, config ) {
                    // Start in edit mode, and then change to create
                    editor
                        .edit( table.rows( {selected: true} ).indexes(), {
                            title: 'Duplicate record',
                            buttons: 'Créer depuis existant'
            
                        })
                        .mode( 'create' ).set("id","");
            
                        
                }
            }

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Problem:
I have a datatable with a lot of columns (24) and I cannot display all of them at the same time.
I thought to add some buttons that would automatically hide/show some of these columns, depending on some criteria.
Some of these columns are editable too, and I use dts' options such as keys.editor , keys.editOnFocus and keys.columns to trigger editing when I click on a specific cell of an editable column.

Question:
Since the editable columns specified in keys.columns do change of position (both using an array of indexes or css selectors) when I hide/show em, is there a way to update this option when I change the displayed columns? otherwise editor logs the error 'Uncaught Unable to automatically determine field from source.' if I click on a cell's column that was supposed to be editable (and after the view changes there is one that is not editable)

Thanks for the help!

I'm using DataTables and ColumnFilterWidgets via the popular WordPress plugin TablePress. I need numeric sorting for the values in a specific filter dropdown which needs be set via the regular DataTables functions.

The WordPress plugin supports adding customizations such as "columnDefs": [ { "orderable": false, "targets": [ 4, 7, 8, 9, 10 ] } ]. Unfortunately, I'm struggling to find a solution to list the dropdown values numerically. Any advice would be highly appreciated.

Best,
Thomas

I need to put the icon of the command in the same line of the grouping item (all the icons have the same value!)

Following is my code

    <div class="table-responsive">
        <table id="anagraficaMedici" class="table table-striped table-bordered" style="width: 100%">
        </table>
   </div>

and the javascript:

        $("#anagraficaMedici").DataTable({
            'destroy': true,
            'dataType': 'json',
            'dataSrc': 'data',
            'responsive': true,
            "ajax": urlapp + "/api/anagraficafull/" + $('#<%=mid.ClientID%>').val(),
            order: [0, 'asc'],
            rowGroup: {
                dataSrc: ['nominativo']
            },
            'columns': [
                { data: 'nominativo' },
                { data: 'nomestruttura' },
                { data: 'idanagrafica' }
            ],
            "columnDefs": [
                {
                    targets: [0],
                    visible: false
                },
                {
                    "targets": [2],
                    "orderable": false,
                    "render": function (data, type, full, meta) {
                        return '<a href="' + editp + data + ' "><ion-icon name="create-outline" size="large"></ion-icon></a>';
                    }
                }],
            dom: "Bfrtip",
            buttons: [
                {
                    extend: "copy",
                    className: "btn-sm"
                },
                {
                    extend: "csv",
                    className: "btn-sm"
                },
                {
                    extend: "excel",
                    className: "btn-sm"
                },
                {
                    extend: "pdfHtml5",
                    className: "btn-sm"
                },
                {
                    extend: "print",
                    className: "btn-sm"
                },
            ],
        });

I guest I should change something in the rowGroup section, but whatever I try I crash the grouping.

Thanks for any suggestion/help

René

First of all, thanks for this amazing library. I'm not exactly new to DataTables but so far have only done crude customization to it, as in not using extension or plug-in mechanism. I'm wondering, aside from RowGroup [1], is there another extension or plugin that is suitable to adding sum and average footer rows (for values in visible rows)?

[1] https://datatables.net/extensions/rowgroup

$(document).ready(function () {
    var table = $("#example").DataTable({
        "responsive": true,
        "ajax": {
            "url": "/Products/Getall",
            "type": "GET",
            "datatype": "json",
            dataSrc: ""
        },
        'columnDefs': [
            {
                "targets": 0,
                "orderable": false,
                'checkboxes': {
                    'selectRow': true
                }

            },
        ],
        'select': {
            'style': 'multi'
        },
        "columns": [
            {
                "defaultContent": ''
            },
            {
                "data": "productId", "visible": false
            },
            {
                "data": "names"
            },
            {
                "data": null,
                "render": function (data, type, row) {
                    if (row["description"] == null) {
                        return "No Description"
                    }
                    return row["description"];
                }
            },
            {
                "data": "quantity"
            },
            {
                "data": null,
                "render": function (data, type, row) {
                    if (row["price"] == null) {
                        return "Rp. " + 0
                    }
                    return "Rp." + row["price"];
                }
            },
        ]
    });

    // Handle form submission event
    $('#frm-example').on('submit', function (e) {
        var form = this;

        var rows_selected = table.rows({ selected: true }).data();
        console.log(rows_selected)
       e.preventDefault();

    });
});

i change the rows_selected code to fit my code but when i check one row and press submit

i got all the row

this is the data that I use in data table

Array(3)
0:
cartDetails: null
category: "Food"
description: "asd"
imagesNum: 0
names: "bean bag"
price: 100
productId: 3
quantity: 100
[[Prototype]]: Object
1: {productId: 4, quantity: 12, imagesNum: 0, category: 'Another', description: 'asd', …}
2: {productId: 5, quantity: 12, imagesNum: 0, category: 'Another', description: 'asd', …}
length: 3
[[Prototype]]: Array(0)

how can I get the data checked?

I want all pdf exports to used the custom header without having to duplicate the code in all datatable initialization. Here is the test case live.datatables.net/qabenajo/3/edit

i tried to default the pdf customization but when i add other properties like title, it removes the default

Here are the data tables I am using and their extensions.
I selected something from this page (https://datatables.net/download/) and
I forgot to write it down and now I don't know which extension is being used.

Can you please tell me which extension this uses? Or how can I check?

Now I see that StateRestore has been updated from 1.0.1 to 1.1.0 but buttons remains at 2.1.1.

So I think StateRestore features will still have some issues if I use the old buttons, correct?

Will Buttons be updated some time soon?

Side Question
Is there a way to register to be notified when DataTables and extensions are updated ?

https://datatables.net/reference/option/language.buttons.savedStates

https://datatables.net/reference/option/language.buttons.stateRestore

There is an example showing the use of a label, but for consistency purposes with the other buttons my preference would be to show a counter on the button. I'm using savedStatesCreate in my case.

https://datatables.net/extensions/staterestore/examples/customisation/activeLabel.html

PS: This is a fantastic extension that opens up a lot of possibilities for end users, absolutely love it.
Also there is no category on the forum under extensions for "State Restore" yet.

Test Case http://live.datatables.net/nebunuco/2/edit?js,output
1) Create a Saved State
2) Open the Saved States menu then open the secondary menu and select "test"
3) The function correctly writes to the console as expected but I don't now how to lower the secondary menu in my function.
(See Question #1 in the example.)

I would ideally like to add this feature by having an extra button along with "Update, Rename, Remove" that will toggle between "Make Public" and "Make Private", separate buttons named the same could also work. I intend to mark public states by altering their name, for example adding * in front of the name to indicate it is a public state. I also intend to have the ajax save to only allow the original author to save. So if there could be a function to get the label for the given namedState it could easily return the two labels based on the name alone.

We considered just implementing that if the name starts with * then it's public but that would make it sort of a "hidden" feature so adding button(s) would be ideal.

I could just add a button on the page which says "Make current State Public" but since there can be multiple current states that is a little less elegant.

I could also have a button "Create Public State" and relabel the "Create State" to "Create Private State". So the ability to add buttons to the savedStatesCreate menu could be yet another option.

Test Case: http://live.datatables.net/piqeheyu/1/edit?js,output

See comment in test case, trying to get access to the Saved State ID when creating the Secondary Split button.
I have a use case where I would like to change the label based on a certain state of the specific "Saved State".
I have the code to check for the condition but I don't have access to the correct StateId to make it work.

When I add a button to the State Restore Dropdown only 1 state saves after that nothing happens when I select "Create State".

In this example, select "Create State" and notice that "State 1" is created.
Then select it again and nothing happens.

http://live.datatables.net/nebunuco/1/edit?js,output

If you remove the splitSecondary configuration the problem goes away.

At first my ajax call was failing with a authentication error but I noticed that the state still gets added to the list of states.
Of course on reload it's gone because nothing was saved.

But how to I report to the user that the save state failed and prevent the dropdown from adding the state?

It seems there should be a callback to stateRestore to inform it if the save state was successful or not.

When I load a page that has a DataTable with 10 saved states I get a call to load as expected and then I get 10 calls to save upon calling the callback to load the data into stateRestore.

I don't see how this could be a "feature" so I suspect it is a bug. I am able to fix by setting a boolean to true prior to my call to callback(cbData) in load and then checking for that boolean on save and ignoring the request. But I thought I would ask this questions for 2 reasons. 1) Perhaps there is a good reason for this and I should NOT ignore the calls, 2) If it is a bug it can be addressed.

In case anyone else wants to avoid this load here is how I implemented my solution

let _stateRestoreBlockSaveOnLoad = false;
...
if (data.action === 'load') {
            let url = _rcoiBaseUrl + "dataTablesView/getViews/" + _dataTableViewStoreDataTableId;
            $.get(url,function (data,status) {
                let cbData = {};
                for (let i = 0; i < data.length; i++) {
                    // Convert back from the string created when saving
                    cbData[data[i].identifier] = JSON.parse(data[i].state);
                }
                // Load states into StateRestore
                console.log("starting callback");
                // Set Block on Save to true so saves can be skipped when loading data
                _stateRestoreBlockSaveOnLoad = true;
                callback(cbData);
                // Unset the Save Block since loading is complete
                _stateRestoreBlockSaveOnLoad = false;
                console.log("Finished callback")
            });
        } else if (data.action === 'save') {
            // Check if we are loading initial states and ignore calls to save
            if (_stateRestoreBlockSaveOnLoad) {
                // Fix issue with stateRestore calling save for every State when loading
                console.log("Blocked Save on Load from State Restore")
                return;
            }
            let ids = Object.keys(data.stateRestore);
            for (let i = 0; i < ids.length; i++) {
                // Add all of the states listed in the object
                let url = _rcoiBaseUrl + "dataTablesView/saveView";
                let viewId=ids[i];
                let viewData=JSON.stringify(data.stateRestore[ids[i]]);
                let _viewSaveRequestData = {
                    'viewId': viewId,
                    'viewData': viewData,
                    'dataTableId': _dataTableViewStoreDataTableId
                };
                // This allows the post to pass the security token verification
                // without this data you will get a 401 error
                _viewSaveRequestData[_csrf_param_name] = _csrf_token; // Adds the token
                console.log("Saving");
                $.post(url,_viewSaveRequestData,ajaxSaveCompleted);
            }
...

my code puts the data into the map in order but this is an example of the result I get using testing names.

I would like ZZ Name to be last as it was when returned from my ajax call.

When I add a new state named "AB Name" I would like it to insert after "AA Name" but instead I get it inserted second to last which seems odd, last I could understand.

Then when I reload the page I get the following order.

For some reason "View 1" is stuck at the bottom no matter what I do.

2) StateRestore needs a forum category under extentions

            {
                text: 'Reset View',
                action: function ( e, dt, node, config ) {
                    var table = $('#reviews-table').DataTable();
                    table.state.clear();
                    window.location.reload();
                }
            }

After implementing these extensions table.state.clear() no longer works.

Neither Search Builder nor State Restore provide a clear() method.

I need to have a "Reset View" in my application to return the DataTable to its initial state.
This needs to include returning the column visibility, sort column(s), Search Builder cleared and unset any selected view from resetView.

Currently I have State Restore configured with saving sort disabled because I don't like the fact that once a state is selected if you change your sorting it removes the "Active State" so the user no longer realizes they have other things changed. I am on the fence about this but I mention it because somehow saving the initial state into State Restore will not solve my issue as it will NOT restore the default sorting.

My project originally started just using stateSave and it worked fine.
I added stateRestore and stateSave still works
I then added searchBuilder and I can not get the dashboard to return to the previous state.
At random times I thought I saw it working but I can not figure out when.

Should stateSave still work when stateRestore and searchBuilder are being used?

1000 Thanks.
Sorry for my english (google translation)

I am using papa parse to bring text file contents into a sql table/dataTable. I love using this as there is no need to upload the actual text file to the server. However, my issue is that the text file structure is able to change as new columns are added. I have a "crosswalk" table linking column headers to another table (and eventually I unpivot the table in a sql stored procedure). However, whenever a new column is added to the text file I need to re-publish my dataTable with the new column to receive the data.

Question: Is there a way to use PapaParse to dynamically create the columns of a dataTable using the headers of the text file as column names and then populate the dataTables rows with the text file data? (then I can worry later about how to get that data to an unpivot process using my crosswalk table)

or, is there something better than papaparse to use for this need?

Im getting my data from api, and i want when i click a button on my table a popup will open and i will send several data to my db.

How can i achieve that? Is there any solution or example about post method with popup on datatable?

And This is the Dom i use:

dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",

table.buttons().container()
.appendTo( '#example_wrapper .col-sm-6:eq(0)' );
table.searchBuilder.container().prependTo(table.table().container());

And That's how it looks:

Description of problem: