Disable sorting on hidden columns in bootstrap-table

Question

I am using bootstrap-table with the table-multiple-sort extension to make sortable table.

In this example when you hide some columns, sorting is disabled for the hidden columns.

However, when I applied the plugin, sorting still occurs on the hidden columns. See this JS Fiddle:

<table ref="mainTable" className="table table-striped table-bordered table-hover" cellSpacing="0" id="mainTable" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true">
         <thead>
            <tr>
               <th data-field="state" data-checkbox="true"></th>
               <th data-field="Customer Name" data-halign="center" data-align="left" data-sortable="true">Customer Name</th>
               <th data-field="Location Type" data-halign="center" data-align="left" data-sortable="true">Location Type</th>
               <th data-field="Location" data-halign="center"
                  data-align="left" data-sortable="true">Location</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td></td>
               <td>Cap Corp</td>
               <td>Main</td>
               <td>Norwalk CT 06851</td>
            </tr>
            <tr>
               <td></td>
               <td>Cap Corp</td>
               <td>Other</td>
               <td>Norwalk CT 06851</td>
            </tr>
            <tr>
               <td></td>
               <td>Tel</td>
               <td>Main</td>
               <td>Slough SL1 4DX</td>
            </tr>
            <tr>
               <td></td>
               <td>Tel</td>
               <td>Other</td>
               <td>London W1B 5HQ</td>
            </tr>
         </tbody>
      </table>

How can I disable sorting on the hidden columns?

Some of the language was ambiguous, so I've made it easier to understand the problem and intended solution. However it's still a little vague. — stef
– stef, Commented Sep 11, 2015 at 18:35

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

+50

It's showing because you haven't set option sortPriority By setting this this will solve error.

Check working fiddle here

Your JS should look like this
example taken from jsfiddle given in question.

$('#mainTable').bootstrapTable({
    showFilter: true,
    showMultiSort: true,
    sortPriority: [{
        "sortName": "Location",
        "sortOrder": "desc"
    }]
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 16, 2015 at 7:21

shyammakwana.me

5,7624 gold badges33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Over a year ago

Thank you, I will award your bounty in 22 hours (I can't right now). How do you know that? I didn't find it in documentation.

shyammakwana.me Over a year ago

First I read documentation and all the links you provided, but found nothing. Then in jsFiddle I saw one error in console that sortPriority is null, then checked all the links you provided and found solution in this link. That's it. Eagerly waiting for bounty.

Collectives™ on Stack Overflow

Disable sorting on hidden columns in bootstrap-table

1 Answer 1

Check working fiddle here

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related