jquerycsstwitter-bootstrapslimscrollscrollable-table

Custom scrollbar for Bootstrap Table

I have a striped table done using Bootstrap Table with the following code (from first example on http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html). I need to find a way for the scrollbar to look like one generated by slimScroll (http://rocha.la/jQuery-slimScroll). This is a non-negotiable client requirement.

<table data-toggle="table" data-url="data1.json" data-cache="false" data-height="299">
<thead>
    <tr>
        <th data-field="id">Item ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
    </tr>
</thead>
</table>

Questions:

1) Is this doable, and if so - how?

2) If this is not doable with bootstrap table, is there a library that would create a scrollbar of this type for a tbody? (slimScroll only works on a div, not a tbody)

3) If neither (1) nor (2) are possible, what are my options for a fixed-header scrollable-body table implementation with a scrollbar of this type?

Edit:

I am unable to create a fully-functional jsfiddle, since bootstrap-table doesn't appear to load via external resources. I was, however, able to create a jsfiddle showing what a tbody with slimScroll applied to it does. A stand-alone div scrolls fine. The tbody of the table following it does not.

Solution

  • This works out of the box.

    Inspecting the generated bootstrap table elements, it's not scrolling the <tbody> but a wrapper div of '.fixed-table-body'.

    Just use:

    $(document).ready(function () {
  $('.fixed-table-body').slimScroll({});
});

    Here's a working example.