I would like to have a table with bootstrap table where the first column always gets sorted first so that same values get grouped.
Example
Lets say it is now sorted by "Class" then it would look like this:
| Class | Name | Day |
|-------|-------|-----|
| 3C | Ben | 1 |
| 4A | Aaron | 2 |
| 4A | Tom | 3 |
When the table now gets sorted by day it should look like this:
| Class | Name | Day |
|-------|-------|-----|
| 4A | Aaron | 2 |
| 4A | Tom | 3 |
| 3C | Ben | 1 |
The problem is it would normally look like this:
| Class | Name | Day |
|-------|-------|-----|
| 4A | Aaron | 2 |
| 3C | Ben | 1 |
| 4A | Tom | 3 |
I know about the multiple sort extension but I have only found out that when one click a column and shift click another column it will get sorted the order one clicks. My problem is I want the first column always be sorted first but I have not found out how yet.
I have created a huge workaround for my problem which works. Even though it does not work for good performance and it surly is not the best way but whatever. Here what I have created with an example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>
<table id="table"
data-editable="true"
>
<thead>
<tr>
<th data-field="what">Name</th>
<th data-field="number" data-sortable="true">ID</th>
<th data-field="sort" data-sortable="true">Something</th>
</tr>
</thead>
</table>
<script>
var $table = $('#table')
$(function() {
var sort = [
{
"sortName": "what",
"sortOrder": "asc"
}
]
var data = [
{
'what': 'Group 1',
'number': '2',
'sort': 'something',
},
{
'what': 'Group 2',
'number': '5',
'sort': 'no',
},
{
'what': 'Group 1',
'number': '8',
'sort': 'ok',
},
{
'what': 'Group 3',
'number': '1',
'sort': 'ye',
}
]
var order = "desc";
var lastColumn = "";
$table.bootstrapTable({
onSort: function(name) {
if(lastColumn == name) {
if(order == "desc") {
order = "asc";
} else {
order = "desc";
}
} else {
lastColumn = name;
order = "desc";
}
sort = [
{
"sortName": "what",
"sortOrder": "asc"
},
{
"sortName": name,
"sortOrder": order
}
]
$table.bootstrapTable('multiSort', sort);
},
sortPriority: sort,
data: data,
})
})
</script>How does it work?
So whenever one row gets clicked (so it gets sorted) then an event is triggered. Now when the event triggers I perform a command which sets a multiSort-value for the table. This multiSort always lets the first row be sorted first and then the row one clicks. When the same row get clicked again it sorts into the other direction. Whenever another row gets clicked it sorts with the default value not with the current and one can click again to again switch between asc and desc.