List.js how to reset sorting to initial state

732 Views Asked by At

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>

0

There are 0 best solutions below