How to add sort to bootstrap-table card view / custom view?

Question

I am trying to create a sort to be used directly from the card mode (custom mode in my case).

I created the button myself but I can't find a method to call sort on a field when not in table view. Like the option to filter, I am looking for something like:

$("#bootstrapTable").bootstrapTable("sortBy", {
    sortAlgorithm: sorter }

For example here: If you switch to table view (click the eye), you can sort by name by pressing on the table header. But then on card/custom view, you can't.

How can I make the button there to sort by name?

Answer 1

I found a way to solve this.

You can use $('#table').bootstrapTable("refreshOptions", {}) to change the sort options and it will take effect.

In the above example you can use:

<button onclick="sorter()">
  Sort by name
</button>

<script>

  function sorter() {
    console.log("here")
    $("#table").bootstrapTable("refreshOptions", {
    sortName: "name",
    sortOrder: "desc",
  });
  }
</script>

of course, you can modify it to sort on whichever column you want and change the order.

Hope it helps whoever stumbles here on the future