How do you initialize a Custom Scrollbar

amazeinstudios@gmail.com

I have scrollX set to true on my tables it works ok its just ugly and poorly positioned as there are vis. comm. elements that sit directly under the datatables. I need to customize the scrollbar and I favor the mac osx lion version of jQuery Scrollbar. I have tried to get it to work but my scrollbars stay the same... What is the proper way to initialize it to get results from a long horizontal table body? Can you post a real quick example of how to implement?

colin

I have tried to get it to work but my scrollbars stay the same...

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

amazeinstudios@gmail.com

I have test cases... here is one for example. I am puzzled on how to add the jQuery libraries to this for them to load the jQuery Scrollbars as there isn't a cdn available.

amazeinstudios@gmail.com

Here is the same test case with the jQuery.scrollbars cdn instantiatied and initialized with no response from the scroller... Furthermore, the edit of the scrollbars is to be uniform with the mac osx browser environment. Its a fundamental to match that style with all browsers. Of course, I already have in Safari -- I am looking for matching implementation from opera, chrome, ie, etc.,.
http://live.datatables.net/nonoziva/1/edit

colin

I think one problem with your example is that with two lines, you won't get a scroll box. I've fiddled about with it here, and it seems to be doing what you want.

I've used an example from here, scrollbar-rail, but there are other examples on that page that you can grab.

Colin

amazeinstudios@gmail.com

It only needs to scroll horizontally.

kthorngren

Try re-enabling paging:
http://live.datatables.net/qagepeto/3/edit

Kevin

amazeinstudios@gmail.com

I attempted this but I am using sDom: --> and when utilizing it as: "sDom": '<"top"lBf><"#box"t><"bottom"ip><"clear">' and I have $(#box).scrollbar it breaks my grid... I can't wrap my table around a grid. If I append my pagination and my table information they lose their css styles entirely.

amazeinstudios@gmail.com

I've seen some people use .find on the scrollbody I'm not sure how to write that or implement it. Could you assist?

amazeinstudios@gmail.com

I have gotten it to work by locating the scrollbar scroll wrapper and changing the css … It works with the sDom configurations now by including ....

 "sDom": '<"top"lBf><"#box.scrollbar-macosx"t><"bottom"ip><"clear">'

"fnInitComplete": function () {
            $('#box').scrollbar();
          }
#box {
width: 100%;
position:relative;
}

.dataTables_wrapper .scroll-wrapper {
width: 100%;
}

I also deleted the scrollX: true, line...