Sort by multiple columns

[nikolas]

Is there a way to initialize a bootstrap-table to be sorted by multiple columns?

Suppose you have a table like this:

Target Date	Priority
2/2/2002	Medium
1/1/2013	High
1/1/2012	High
1/1/2014	High

I want the default view to look like this (sorted first by Priority descending, then Target Date ascending).

Target Date	Priority
1/1/2012	High
1/1/2013	High
1/1/2014	High
2/2/2002	Medium

[ezgl33]

I would also love for you to implement this enhancement. Thanks for all your work on this to date!

[abriz]

+1 on the multiple column sort option!! Thanks for the tool, big help so far.

[dimbslmh]

I made this extension for sorting by multiple columns #919:
http://jsfiddle.net/dimbslmh/s2h1gzj9/

[djhvscf]

Great feature!! Can you review when we hide a column after sort some column and then we try to open the modal?? I think it is not working.. the add level button is disabled

[dimbslmh]

Weird, please see if it is working here: https://jsfiddle.net/dimbslmh/s2h1gzj9/embedded/result/

Seems to be working even with only one column visible.

[dimbslmh]

Ah.. wait, it happends when you have the columns dropdown open instead of dismissing the columns dropdown first.

[djhvscf]

Steps:

1. Sort some column (without the extension)
2. Hide a column
3. Open the modal (Here the Add Level button is disabled)

[dimbslmh]

And also with your steps it seems. Ok, I'll try to fix it.

[djhvscf]

Ok, thanks but it is a great great feature!!

[dimbslmh]

Should be working correctly now!

[djhvscf]

Yes, it is working know!! great! Thanks you!

[rajeshbtlit]

Hi, Great to hear this, so this is available in master branch right ? and not in 1.8

[wenzhixin]

Thanks @djhvscf and @dimbslmh.
@rajeshbtlit, you can use it in src dir.

[rajeshbtlit]

can we use this on top of 1.6 or do we need to first upgrade to 1.8

[djhvscf]

I think we should use the lastest release! @wenzhixin @rajeshbtlit

[rajeshbtlit]

On 1.6 I see that when i click on any sort i get so many sort icons as shown.

HTML

<table id="tableWorkflow" data-toggle="table"
                        data-single-select="true" data-url="wf/Admin/simplifiedProcesses"
                        data-cache="false" data-height="600" data-click-to-select="true"
                        data-striped="true" data-pagination="true" data-search="true"
                        data-sort-order="desc" data-sort-name="creationTime"
                        data-show-columns="true" data-show-refresh="true"
                        data-show-multi-sort="true" data-sort-priority='[{"sortName":"creationTime","sortOrder":"desc"},{"sortName":"wfdName","sortOrder":"desc"},{"sortName":"wfdVersion","sortOrder":"asc"}]'
                        data-page-size="50" data-page-list='[50, 75, 100, 200, 300, 500'>


<!-- jQuery -->
<script src="resources/admingui/js/jquery-1.11.2.js"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="resources/admingui/js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="resources/admingui/js/bootstrap.min.js"></script>
<script src="resources/admingui/js/bootstrap-table.js"></script>
<script src="resources/admingui/js/extension/bootstrap-table-multiple-sort.js"></script>
<script src="resources/admingui/js/jsoneditor.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/cs/mapper/jsonlite.js"></script>
<script type="text/javascript" src="js/cs/expEditor/eUtility.js"></script>
<script type="text/javascript" src="js/cs/expEditor/jquery.treeview.js"></script>
<script type="text/javascript" src="js/jsonschemagen/jsonSchemaEditor.js"></script>
<script type="text/javascript" src="js/jsonschemagen/eSchemaParserJson.js"></script>
<script src="js/jsonschemagen/jquery.contextMenu.js" type="text/javascript"></script>
<link href="js/jsonschemagen/jquery.contextMenu.css" rel="stylesheet" type="text/css" />

[djhvscf]

You have to use also the boostrap-table.css 1.8.0

[rajeshbtlit]

Yes I am using the following css

<!-- Bootstrap -->
<link rel="stylesheet" href="resources/admingui/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/admingui/css/bootstrap-table.css">
<link rel="stylesheet" href="resources/admingui/css/main.css">
<link href="css/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="css/expEditor/jquery.treeview.css" />

[wenzhixin]

Please use the latest version: boostrap-table.js 1.8.0 and boostrap-table.css 1.8.0.

[rajeshbtlit]

Thanks, will let u know how it goes. And a big thanks for you guys for giving the framework.

[rajeshbtlit]

Thanks everyone for there great efforts , see a glitch here, when integrated with another table , on click of the sort icon, the old tables sorting options appear.

JS fiddle here@ https://jsfiddle.net/jupitor/h2c683cn/

I have created two tables and added the multiple sort attribute for both and the second table always shows the first tables sorting columns

@dimbslmh could you please have a look

[rajeshbtlit]

Hi,
Thank you guys for your efforts, really appreciate it, could you please let us know if we are planning to fix this, as we are using this in our application and we have multiple tables.

Guys please help!!!

[nikolas]

@rajeshbtlit consider using jquery-datatables: https://www.datatables.net/

That's what I've done, because it supports sorting by multiple columns.

[djhvscf]

We support this feature. See this: https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multiple-sort

[rajeshbtlit]

Thanks Dennis, thing is I have integrated this .
But in my scenario, i have 3 tables, and in first table multiple sort works fine no problem.
When i add it to second table, i see that the same sort modal opens (i mean the sort window of the first table)

JS fiddle here@ https://jsfiddle.net/jupitor/h2c683cn/

I have created two tables and added the multiple sort attribute for both and the second table always shows the first tables sorting columns

[djhvscf]

I will create a issue because this is an important issue

[Taewa]

Thanks awesome guys!!

[woltbit]

pardon, does Bootstrap-table version 1.10.1 support multisort ? or I must use bootstrap-table version 1.8.1?

[djhvscf]

It supports it... you should use the multiple-sort extension

[woltbit]

@djhvscf Thank you for your reply, but I have tried the version 1.10.1 with multisort v 1.0.0 but nothing seems to be working.. but when i replace the bootstrap-table v 1.10.1 with v1.8.1, it's working..

Here is the jsfiddle which use v1.10.1, thanks in advance
https://jsfiddle.net/juanzheng/m7y6op1w/

[wenzhixin]

What's the problem? @woltbit

[djhvscf]

I have tested with both versions and it seems it is working as expected @woltbit

[woltbit]

hmphh.. well that is weird, the problem is when I try to use multisort version 1.0.0 with bootstrap-table.js version 1.10.1 it somehow doesn't work properly. But in the end I try to switch to bootstrap-table.js version 1.09.1 and everything was working fine.

so thank you for your time, it should ok for me right now. Keep up the good work!

[vivek-kandhvar]

We support this feature. See this: https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/multiple-sort

This extension no more works. Just so that you guys are aware.

[UtechtDustin]

#4616