I'm currently working with the list.js library and its sorting method. The functionality works perfectly when you want to sort asc or desc, but is there a way to reset everything to initial state from before sorting?
Let's say we have a table with two columns: names and dates of born. When we trigger sorting by clicking the button list.js sorts the column asc and on a second click sorts the columnsdesc. So I can toggle between asc and desc.
I was searching in the docs https://listjs.com/ if there is a method to reset the sorting but didn't find anything.
Here is the quick example of HTML table:
<div id="users">
<table>
<tbody class="list">
<button class="sort" data-sort="name">
Sort by name
</button>
<button class="reset" data-sort="born">Reset?</button>
<button class="sort" data-sort="born">
Sort by date
</button>
<button class="reset" data-sort="born">Reset?</button>
<tr>
<td class="name">Jonny Stromberg </td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Jonas Arnklint</td>
<td class="born">1985</td>
</tr>
<tr>
<td class="name">Martina Elm</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Gustaf Lindqvist</td>
<td class="born">1983</td>
</tr>
</tbody>
</table>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
And the JS:
var options = {
valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);
So by clicking on sort buttons I can toggle between asc and desc, but I'm confused how can I reset the sorting using List.js, and back to "initial state" of table.
Working exmple:
var options = {
valueNames: [ 'name', 'born' ]
};
var userList = new List('users', options);
<div id="users">
<table>
<tbody class="list">
<button class="sort" data-sort="name">
Sort by name
</button>
<button class="reset" data-sort="born">X</button>
<button class="sort" data-sort="born">
Sort by date
</button>
<button class="reset" data-sort="born">X</button>
<tr>
<td class="name">Jonny Stromberg </td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Jonas Arnklint</td>
<td class="born">1985</td>
</tr>
<tr>
<td class="name">Martina Elm</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Gustaf Lindqvist</td>
<td class="born">1983</td>
</tr>
</tbody>
</table>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>