horizontal scroll not working using datatables

Question

I have a really big columns, around 40 columns and want to scroll horizontally, but its not working.

$(document).ready(function () {
    $('#example').dataTable({
            "oTableTools": {
                           "sScrollY": 200,
                           "sScrollX": "200%",
                           "sScrollXInner": "110%"
             }
    });
});

Sorry, posting mistake. Its not missing closing }); problem though. — beebek, Aug 19 '13 at 04:37
this q/a might help you http://stackoverflow.com/questions/18049935/cant-get-scroll-bar-to-appear-on-overflow/18050108#18050108 — Bhojendra Rauniyar, Aug 19 '13 at 05:10
I want horizontal scroll bar like in this example, http://datatables.net/examples/basic_init/scroll_x.html scroll bar is coming for like a whole page not for table only. — beebek, Aug 19 '13 at 06:22
If that's what you want remove the otabletools section and move it to a child of the initializer like in the demo...ill make a jsfiddle tomorrow, please share your data if you want an exact solution... — abc123, Aug 19 '13 at 08:35
Thanks @abc123, I somehow managed to run the code, partially using the demo file. Here's the complete file http://pastebin.com/LuGDJR0h — beebek, Aug 19 '13 at 12:38
You should post your own answer so this is resolved. Thanks! — abc123, Aug 19 '13 at 17:22
This worked for me. http://stackoverflow.com/questions/13178039/datatables-header-alignment-issue — user3301875, Feb 12 '14 at 13:39

score 6 · Answer 1 · answered Jan 09 '14 at 10:44

6

Removing the scroll-x-inner might help.

"sScrollXInner": "110%"

It worked for me. Source datatables.net/forums

answered Jan 09 '14 at 10:44

mgs

404
4
15

score 0 · Answer 2 · answered Jul 27 '15 at 02:02

the best solution is wrapping the target table with tag by jquery and creating an break line
tag to separate please see below sample code

            $('#target_table').wrap("<div id='tableData' style='\n\
                                        overflow: auto;\n\
                                        overflow-y: hidden;\n\
                                        -ms-overflow-y: hidden\n\
                                        position:relative;\n\
                                        margin-right:5px;\n\
                                        padding-bottom: 15px;\n\
                                        display:block;\n\
                                   '>/");; 

           $("#tableData").before("<br/><br/>");

the problem is if your using sScrollX or scrollX is that not all datatables plugin version support this function and it depends also in jquery platform that we are using and not all browsers are supported like with the damn IE8,7 and 6.

horizontal scroll not working using datatables

2 Answers2