2

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.

Jenya
  • 31
  • 1
  • 4
  • 2
    I'm not sure why it wouldn't be doable. Have you tried implementing jQuery slimScroll with your table? Create a jsfiddle? – mellis481 Oct 17 '14 at 15:42
  • 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. http://jsfiddle.net/veddma/5KJka/774/ – Jenya Oct 17 '14 at 18:35
  • @Jenya - it probably won't work because you have to manipulate the dom to over-ride the scroll bar. To have a sticky th you have to clone and do a bit of scripting too. This likely why the plugin only works on a div. Plus, ALL of the scroll bar plugins that I've found mess up on mobile to some extent or another, slimScroll has IE Mobile bugs. Do you just have one table? How extensive is it? What about when that table is on a touch device? I would consider, if the table is a one off deal, to use divs to fake it. Detect touch and only use the scroll manipulation on no-touch devices. – Christina Oct 17 '14 at 18:46
  • It's tough to help without being able to test it in jsFiddle, but if you try the Bootstrap Table, try setting `.fixed-table-body { overflow: hidden; }` and then apply your slimScroll to `.fixed-table-body table tbody`. – mellis481 Oct 17 '14 at 18:56
  • @Christina, the officially supported devices are desktop (FF, Chrome, Safari, IE10+) and iPad. I assume they do want things to still work on other tablets. Phones are not really supported due to lots of horizontal scrolling that would be needed. I realize I can fake it with divs, I would just really rather use table for tabular data. There will be more than one table on that screen as well. It's just that this seems like rather a common task to do that I would think an elegant solution existed out there. – Jenya Oct 17 '14 at 19:01
  • @im1dermike, just tried it. It looks exactly like tableSection div looks in the jsfiddle: http://jsfiddle.net/veddma/5KJka/774 - all the data appears under the first column heading, the scroll rail is there but the "bar" that moves up and down is not. – Jenya Oct 17 '14 at 19:05
  • It's a very unusual request I doubt there's a ready made solution since it's requires manipulation of native behavior for both the table and the scroll bar. – Christina Oct 17 '14 at 19:05
  • 1
    I really hate your client; this is an asinine requirement. – cvrebert Oct 17 '14 at 20:38
  • @cvrebert - I agree but I was totally wrong it works well. That script has mobile bugs in their GitHub rep. – Christina Oct 17 '14 at 22:33

1 Answers1

4

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.

Mark
  • 106,305
  • 20
  • 172
  • 230