After I remove rows from DataTable and add data again, I get error "TypeError: Cannot set property."

auxo

Link to test case: as code pasted
Debugger code (DataTables Debugger): ubepah
Error messages shown:
datatables.min.js:16 Uncaught TypeError: Cannot set properties of undefined (setting 'iSeq')
at H.isPlainObject.f (datatables.min.js:16:11272)
at g (datatables.min.js:26:5851)
at s._mouseUp (datatables.min.js:26:6434)
at HTMLDocument.<anonymous> (datatables.min.js:26:4054)
at HTMLDocument.dispatch (jquery-3.7.0.min.js:2:39997)
at v.handle (jquery-3.7.0.min.js:2:37968)
Description of problem:
After I remove rows from DataTable and add data again, I get error "datatables.min.js:16 Uncaught TypeError: Cannot set properties of undefined (setting 'iSeq') ".

After some hard work, I found this:

    set: function(a) {
        var f;
        return H.isPlainObject(a) ? V.util.set(a._) : null === a ? function() {}
        : "function" == typeof a ? function(t, e, n) {
            a(t, "set", e, n)
        }
        : "string" != typeof a || -1 === a.indexOf(".") && -1 === a.indexOf("[") && -1 === a.indexOf("(") ? function(t, e) {
            t[a] = e
        }

.....

However, t is undefined....Orz

Please help me. Many thanks.

all the best,

Auxo

allan

Hi Auxo,

I've created this little test case which I think shows the make parts of what your debug trace uses (i.e. DataTables + RowReorder) and reading data from the DOM.

It doesn't show the error you are seeing though. Can you update it, or link to your own page, so I can see the error and debug it?

Allan

auxo

Hi Allen,
May I post this test code as gist?

If you drag the second row to the top of the table, I think the error will reoccur.

allan

This is it running.

I can see the error happening there.

                this.dataList$.subscribe(data => {
                    this.table.clear().draw();
                    updateTable(this.table, extractFields(data, listShowCols.concat(["DIAGENGNAME", "DIAGCHINNAME"])));
                });

Is causing the error when combined with:

            reorderRow() {
                this.table.on('row-reorder', (e, diff, edit) => {
                    // 原始的 this.dataList$
                    let tmpData = this.dataList$.getValue();
                    let reverseTmpData = tmpData.map((x) => _.cloneDeep(x));

                    reverseTmpData = reverseTmpData.reverse();

                    diff.forEach((rowDiff) => {
                        reverseTmpData[rowDiff.oldPosition].iSeq = rowDiff.newData;
                    });

                    reverseTmpData.sort((a, b) => b.iSeq - a.iSeq);

                    this.dataList$.next(reverseTmpData);
                });
            }

When you reorder data array the subscription handler is being run before DataTables / RowReorder can fully process the change. The result is that nodes get cleared out and where RowReorder attempts to reference a node it fails, since the nodes it knows about no longer exist.

I think you'll have more luck using row-reordered which happens at the end of the processing that RowReordering does.

Allan

auxo

Oh, thank you! You really saved my day. ^^