DataTables: how to put variable in table initialization code

Question

I found that DataTables plug-in is very handsome and practical until you know at code start all necessary parameters. But, in my case I wish to change parameter scrollX according to detected document' height (60% of available height). I understand that here we talk about some kind of object but push and other tricks doesn't help. Here is problematic code:

$(document).ready(function() {
table = $('#example').DataTable( {
language: {
info: "Show _START_ til _END_ of _TOTAL_ recs"   },
scrollY: "300px",
scrollX:        true,
scrollCollapse: true,
paging:         false,
rowReorder: false,
ordering: false,
fixedColumns:   {
    leftColumns: 2,
    rightColumns:0}     
   });
});

and instead "300px" I planned to put some kind of Javascript variable that contain document height, but classic object manipulation doesn't show result. So, I tried to check:

console.log(Table.scrollX);

but got error. Then tried to make table as public var but then got undefined value. Also:

table.push({'scrollX': '300px'});

and some weird combination, but nop. Any suggestion, please? Thanks.

dokgu · Accepted Answer · 2016-06-30 17:03:43Z

1

Something like

$(document).ready(function() {
  var myScrollY = '300px';
  var table = $("#example").DataTable({
    scrollY: myScrollY
  });
);

answered Jun 30, 2016 at 17:03

dokgu

6,2005 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ludus H Over a year ago

Patrick G.: ouch, I couldn't recall this way! Clean and simply. Thank you man.

dokgu Over a year ago

@LudusH Glad to help.

Andrei Zhytkevich · Accepted Answer · 2016-07-01 14:39:13Z

1

Here the solution I'm using in my project:

You need to handle resize event. In the handler calculate the available area for scrollable part of the table:

$( window ).resize(function() {
   var scrollWidth = "300px"; 
   // scrollWidth should be calculated based on your needs
   table.find( '.dataTables_scrollBody' ).width( scrollWidth );
})

I've done the same for height

Update:

Setting scrollY: "300px" works only for initialization.

When you change height of the document, the event domready is triggered and you have to recalculate new height of your scrollable area of datatables:

$( window ).resize(function() {
   var newScrollHeight = Number($(window).height() - $('#IdOfAnElement').height() - other heights) + "px"; // 

   table.find( '.dataTables_scrollBody' ).height( newScrollHeight );
})

.dataTables_scrollBody is the element of datatables containing scrollable area.

edited Jul 1, 2016 at 14:39

answered Jun 30, 2016 at 16:48

Andrei Zhytkevich

8,1292 gold badges33 silver badges46 bronze badges

3 Comments

Ludus H Over a year ago

Andrei Zhytkevich thank you man, but I couldn't implement your solution. Some helping clue, please?

Andrei Zhytkevich Over a year ago

What's the problem?

Ludus H Over a year ago

I didn't understand your example. I tried your code in my case and wasn't able to make it works. Are you willing to explain it along with my code above? Thank you.

Collectives™ on Stack Overflow

DataTables: how to put variable in table initialization code

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related