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:

jsfiddle

<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?

Answer 1

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"
    }]
});