scrollY not working for DOM sourced tables (style of undefined error)
scrollY not working for DOM sourced tables (style of undefined error)
drewturk
Posts: 27Questions: 8Answers: 0
Hello Allan,
I have a dom sourced table:
var table = $('#planners-table').DataTable({
dom: 'rf',
scrollY: 300,
scrollCollapse: true,
paging: false,
order: [[1, 'asc'],[0, 'asc']]
});
<table id="planners-table" class="row-border" cellspacing="0" width="100%">
<thead>
<tr class="hide">
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<? foreach ($this->plannersAvailable as $index=> $obj): ?>
<tr>
<td><?= $obj['firstName'] . " " . $obj['lastName'] ?></td>
<td>
<div class="switch tiny round clear-margin" data-id=<?= $obj['id'] ?> data-planner="<?= $obj['firstName'].' '.$obj['lastName'] ?>"><input id="enable-<?= $obj['id'] ?>" type="checkbox" <? if ($this->planner[$obj['id']]): ?> 'checked:checked' <? endif ?>>
<label for="enable-<?= $obj['id'] ?>"></label>
</div>
</td>
</tr>
<? endforeach; ?>
</tbody>
</table>
The scrollY option is not providing me with the vertical scroll bar. I do get this error when the modal opens and draws my table:
Uncaught TypeError: Cannot read property 'style' of undefined
at ka (jquery.dataTables.min.js:55)
at Y (jquery.dataTables.min.js:13)
at jquery.dataTables.min.js:64
at jquery.dataTables.min.js:96
at dispatch (jquery.js:4435)
at r.handle (jquery.js:4121)
at Object.trigger (jquery.js:4350)
at jquery.js:4901
at Function.each (jquery.js:374)
at n.fn.init.each (jquery.js:139)
the error seems to originate from:
$(document).on('click', '#edit-arranger', function() {
$('#planners-modal').foundation('reveal', 'open');
});
when I open the modal not sure if that has anything to with it or not.
http://andrew.cbtat.com/user/settings (click edit 'arrangers/planners')
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I don't immediately see anything wrong with the above. Could you PM me login details for the site so I can take a look at the page please?
The error normally comes up if the number of columns between the header, body, footer and Javascript don't all match.
Allan
OK so I only get that
error when providing any table options at all. It must be
But I still need ordering and to remove some
domoptions so not sure how that can be done without providing table options.I have a solution. The use of the option
scrollYcauses the issue. All other options I need are fine, such as:Scrolling is accomplished by using data attribute
data-scroll-y="300"on table container element.It seems to work okay here.
I'd really need a link to a page showing the issue to understand why it isn't working.
Allan
Hi Allan,
Thank you. Unfortunately I need to move on. I am able to get scrolling without that particular error by using the data attribute. Thanks