Checkbox column problem when grid is not actually displayed

jstuardo

Hello... I need your advice how to do this.

I have a checkbox column that is defined this way:

{
    render: DataTable.render.select(),
    orderable: false
}

That woks perfectly, but in that page I have a button to export to Excel. When it is clicked, I call some DataTable functions, for example, tabla.init().columns to get the columnsandtabla.search()` to get the current applied search.

However, when I click that button, this error occurs:

datatables.min.js:33 Uncaught
TypeError: Cannot read properties of undefined (reading 'settings')
at Object.l (datatables.min.js:33:16116)
at B (datatables.min.js:16:19783)
at De (datatables.min.js:16:21558)
at xe (datatables.min.js:16:21977)
at S (datatables.min.js:16:25579)
at datatables.min.js:16:25431
at Object.t [as success] (datatables.min.js:16:30753)
at c (jquery.min.js:2:25266)
at Object.fireWith [as resolveWith] (jquery.min.js:2:26015)
at l (jquery.min.js:2:77721)

I have changed the column definition to this:

{
    render: function (data, type, row, meta) {
        if (type === 'display') {
            return DataTable.render.select();
        }
        else {
            return '';
        }
    },
    orderable: false
},

But it did not work either. In this case, the error is shown when the grid is initialized.

What can I do?

Or maybe there is a bug in this line var c = s.settings.aoData[s.row]._select_selected of the datatable library?

Thanks

kthorngren

A test case will be very useful to help debug. I built one with the select chckbox column and Excel export. It works just fine.
https://live.datatables.net/qurijeru/1/edit

When it is clicked, I call some DataTable functions, for example, tabla.init().columns to get the columnsandtabla.search()` to get the current applied search.

Its unclear how you are using these functions and if they might be causing the issues. Please update my test case or provide a link to one that replicates the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

jstuardo

Hello, @kthorngren

I modified your example to this: https://live.datatables.net/qurijeru/2/edit

Note that I am not using built in Excel export function.

I have other button doing the actual export.

allan

columns: tabla.init().columns,

This is causing the issue. I'm fairly sure it is something to do ith how jQuery's Ajax is handling the function that is part of that array. Rather than just using the .toString() of that function, it is attempting to execute it, which of course results in an error since parameters aren't passed in.

If you need specific information from the columns array in the initialisation object, you need to explicity extract it, rather than sending the entire object.

Allan

jstuardo

Do you mean I need to pass the columns array explicitly? how can I extract it without hard coding it?

allan

It depends on what you want from it - you presumably don't want the rendering function at the server-side. Perhaps it is just the data property or something else you need? Use Array.prototype.map to iterate over the the array and return an object for each column with only the parts you want.

Allan

jstuardo

I don't need them to be rendered, however, I need them to perform the ordering and filter.

The URL that is called is the same if I need the grid to be rendered or to be exported.

If the grid has some filter or ordering applied, that filter or ordering are performed also when exporting so the resulting Excel file contains the same data and ordering as the displayed grid.

That is why I need the columns array to be posted to the server side code. It would be ideal if I could call, for example, tabla.columns() to get the columns array definition, or, a way to get the columns definition except the column that contains the checkbox`.

Thanks
Jaime

kthorngren

Convert the object result to a JSON string like this:

JSON.stringify(tabla.init().columns)

Updated test case:
https://live.datatables.net/qurijeru/5/edit

If you look at the sent payload you will see its a JSON string:

columns: [{"orderable":false,"bSortable":false},{"data":"name","mData":"name"},{"data":"position","mData":"position"},{"data":"office","mData":"office"},{"data":"extn","mData":"extn"},{"data":"start_date","mData":"start_date"},{"data":"salary","mData":"salary"}]

Likely you will need to parse the JSON string in your server script.

Kevin

allan

Hi Jamie,

You should use columns().search() to get the current search state and order() to get the order state. The object passed in as columns isn't really intended to be used for anything other than what is passed in.

You might even want to consider using state() to get a full state object from the DataTable and send that.

Allan

jstuardo

Thanks for the clue, Kevin.

Even when that solutions works, it did not fix my issue since the server side code expects that parameter to be an array, not a string.

Based on your solution, I realized that the call to tabla.init().columns was not really the problem, so I changed that to this:

            let columns = Array();
            $.each(tabla.init().columns, function (index, value) {
                if (!value.mRender || !value.mRender._name || value.mRender._name !== 'selectCheckbox') {
                    columns.push(value);
                }
                else {
                    columns.push({ 'data': '' , 'mData': '' });
                }
            });

And then passed the new columns array.

This code is called in many places, so I should check if a grid contains a select column, the object is replaced by a dummy object.

That solution is very tricky, but that is the way I found it works. If you have a comment or a more elegant solution, please advice.

Jaime

allan

columns().dataSrc() will get you the data source for the selected columns, so you could use:

tabla.columns().dataSrc().toArray()

to get an array of data with the data source for each column. You might want to set data: null for the first column with the checkboxes if you take that approach.

Allan