Hiding column

[krisrajz]

Is there a way to dynamically hide/unhide a column using jquery?

[djhvscf]

See this example: http://issues.wenzhixin.net.cn/bootstrap-table/#options/basic-columns.html

[djhvscf]

@krisrajz Please double check the documentation: http://bootstrap-table.wenzhixin.net.cn/documentation/

[krisrajz]

My table does not have any column menu list

[djhvscf]

@krisrajz please provide a fiddle

[wenzhixin]

http://issues.wenzhixin.net.cn/bootstrap-table/#methods/showColumn-hideCoulumn.html

[lanten]

@wenzhixin
Is there a way to manipulate multiple columns?

[wenzhixin]

I think it does not support manipulate multiple columns. @lanten

[krisrajz]

It does not work for me, hence I am trying to set columns and data fields dynamically. I have set columns this way:
#1 columns: ["Category Description", "Report", "Report Description"]
#2 columns: ["Category","Category Description", "Report", "Report Description"]

but not sure how to set data field?
Any help would be appeciated.

[wenzhixin]

Please provide a jsFiddle to show your problem, thanks!

[krisrajz]

http://jsfiddle.net/djhvscf/e3nk137y/7585/ (created by djhvscf some time ago for me, thanks djhvscf)

Or, is there a way to define the columns during runtime?

[wenzhixin]

Do you mean refreshOptions ?

[krisrajz]

I just want to select hide a particular column programmatically upon user choose different options. Only one boostrap table is used as almost all the columns are same except one column. Depending on the user's choice I want to hide the column. Since hideColumn does not work for me, I would like to know other workarounds such as defining columns based on user choice using juqery.

I don't want to define columns this way:

Category Report

I want to define them somewhere here:

$('#tblSearch').bootstrapTable("destroy").bootstrapTable(
{
//url: DIServiceBaseURL + DIServiceURL,
data: data,
dataType: 'json',
cache: false,
pageSize: 7,
viewrecords: true,
showHeader: true,
pagination: true
});

[krisrajz]

Here's the modified table I am using:

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Search Reports</h4>
            </div>
            <div class="modal-body">
                <!-- search grid begin-->
                <div class="row" id="searchRow">
                    <table id="tblSearch" class="table table-condensed table-hover table-striped">
                    <thead>
                        <tr>
                            <th data-field="Category" class="col-md-2" data-sortable="true">Category</th>
                            <th data-field="CategoryDescription" class="col-md-3">Description</th>
                            <th data-field="Report"  class="col-md-2" data-sortable="true" data-formatter="ReportLinkFormatter">Report</th>
                            <th data-field="ReportDescription" class="col-md-3">Description</th>
                            <th data-field="Tags" class="col-md-2">Tags</th>
                        </tr>
                    </thead>
                </table>
              </div>
            </div>
            <!-- search grid end-->
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

[krisrajz]

I am looking out for something like this:
http://stackoverflow.com/questions/27915296/how-to-refresh-bootstrap-table-data

I do not know how to use refreshOptions