Reputation: 171
For sorting a table, I use a tablesorter like below:
<div class="dynamic-content">
<table>
<!-- code goes here -->
</table>
</div> <!-- this div reloads only -->
<script src="tablesort.js"></script>
$('table').tableSort();
The problem: the page is dynamically reloaded, so after an ajax call, it does not work anymore. How can I make this still work when page is dynamically reloaded?
Upvotes: 0
Views: 26
Reputation: 1422
if you do not want or cannot listen on the ajax request that makes the changes then you can observe on the change to the dynamic div and sort the table again. you can use Mutation observer as mentioned here https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver.
I also prepare a codesandbox to demonstrate https://codesandbox.io/s/w055v284r5
Upvotes: 0
Reputation: 4054
What you did is calling $('table').tableSort();
once.
When the table data is changed by an ajax request you have to call this again.
For instance, if you do something like
$.ajax({
url: ...,
}).done(function( data ) {
// do something with data
$('table').tableSort();
});
Upvotes: 1