Search code examples
datatablesjquery-jscrollpane

getting jscrollpane to work on a div containing a datatables table

the logic and setup:

'wrapper' div is a set height and width.

jscrollpane is set to be applied to 'wrapper' div.

'wrapper' div contains text above an instance of a datatables table (which is itself in another div).

desired outcome: jscrollpane is applied to 'wrapper' div.

current outcome: jscrollpane is not appearing and 'wrapper' div is not a scrollable area.

i don't have a link to a test site and setting this up in jsfiddle is going to be a doozy (but i'll start on it now and post link asap).

update: hmm, i seem to have it working on a jsfiddle (http://jsfiddle.net/rwone/AGf9M/) but not test site :(

perhaps it is because on the test site i am using data from a database and the height of the datatables table is not there until after the data has loaded? therefore the scrollpane is not triggered? i don't know :( 

$(document).ready(function() {
$('#example').dataTable();
$('#wrapper').jScrollPane();
} );

can jscrollpane work on a div that contains a nested div and table? or is it possibly just a conflict between jscrollpane and datatables scripts (firebug shows no errors)?

Any ideas?

Solution

  • the solution seemed to be setting the height of the table with:

    "sScrollY": "300",
"bScrollCollapse": false

    this somehow gave jscrollpane enough information to be triggered to create a scrolling area to accommodate the height.