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

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

drewturkdrewturk Posts: 27Questions: 8Answers: 0
edited February 2017 in Priority support

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

Answers

  • allanallan Posts: 52,276Questions: 1Answers: 7,963 Site admin

    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

  • drewturkdrewturk Posts: 27Questions: 8Answers: 0
    edited February 2017

    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.

  • drewturkdrewturk Posts: 27Questions: 8Answers: 0

    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.

  • allanallan Posts: 52,276Questions: 1Answers: 7,963 Site admin
    Answer ✓

    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

  • drewturkdrewturk Posts: 27Questions: 8Answers: 0

    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

This discussion has been closed.