scrollY not working for DOM sourced tables (style of undefined error)

drewturk

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')

allan

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

drewturk

OK so I only get that

Cannot read property 'style' of undefined

error when providing any table options at all. It must be

var table = $('#planners-table').DataTable({});

But I still need ordering and to remove some dom options so not sure how that can be done without providing table options.

drewturk

I have a solution. The use of the option scrollY causes the issue. All other options I need are fine, such as:

        order: [[1, 'asc'],[0, 'asc']],
        dom: '<"top"f>rt',
        paging: false,
        info: false

Scrolling is accomplished by using data attribute data-scroll-y="300" on table container element.

allan

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

drewturk

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