search

drvic10k / bootstrap-sortable

adding sorting ability to bootstrap table
MIT License
512 stars 131 forks source link

Uncaught DOMException when sorting after switching between pages in SPA #117

Closed monterinio closed 5 years ago

monterinio commented 6 years ago

I have a website with 3 tabs, each having a table with class sortable. When I switch between tabs and want to sort the table it fails and prints stack trace:

bootstrap-sortable.js:20 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': 'td:nth-child(NaN)' is not a valid selector. at http://localhost:4200/assets/bootstrap-sortable.js:20:759 at t (http://localhost:4200/assets/bootstrap-sortable.js:20:4272) at S (http://localhost:4200/assets/bootstrap-sortable.js:20:588) at e (http://localhost:4200/assets/bootstrap-sortable.js:20:4139) at defaultSortEngine (http://localhost:4200/assets/bootstrap-sortable.js:231:9) at doSort (http://localhost:4200/assets/bootstrap-sortable.js:310:13) at sortByColumn (http://localhost:4200/assets/bootstrap-sortable.js:208:9) at HTMLTableCellElement. (http://localhost:4200/assets/bootstrap-sortable.js:202:9) at HTMLDocument.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:3:10316) at HTMLDocument.q.handle (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:3:8343)

When i refresh the page it works fine. I used angular 5.

drvic10k commented 6 years ago

my guess would be, that when you switch tabs, the table is recreated, but the bootstrapSortable is not called for the new table

check if there is an attribute 'data-sortcolumn' on the header cell after you switch the tabs

monterinio commented 6 years ago

I'm a little confused. Should I add attribute: 'data-sortcolumn="true"' for each element, like: <th data-sortcolumn="true">First Name</th>?

sangregoriopaolo commented 6 years ago

I had the same issue, you can run

$.bootstrapSortable({ applyLast: true })

Every time the table gets reloaded and it should work

ubaid4j commented 5 years ago

Thanks solved my issue