Using vh units with scrollY

joeyfresh87

Hello,

I would like to use vh units with scrollY in order for my datatable to fill up the screen regardless of the user's screen size. However, when I try this, I get a strange result upon the very first load (I am using server-side processing, and the data immediately loads upon page load). Specifically, the data only fills up to about halfway down the table, and then no more rows are loaded. But I know for a fact that hundreds of rows should be loading, and therefore the visible table should be completely filled with data (it works properly when I use px units for scrollY). But then, upon subsequent data loads, the data populates the table fully, as expected.

Here is my datatable code:

    var dtRecords = $('#tblRecords')
        .on('error.dt', function (e, settings, techNote, message) {
            console.log('An error.dt event has occurred.');
            try {
                throw (new Error(message));
            }
            catch (err) {
                HandleError(true, 'From error.dt: ' + err.stack);
            }
            finally {
                return false;
            }
        })
        .DataTable({
            dom: 'BtSir',
            serverSide: true,
            ajax: {
                url: "MktSegIndService1.asmx/LoadRecords",
                type: "POST",
                dataType: "json",
                data: function(d){
                    d.isTextSearch = isTextSearch;
                },
                error: function (xhr, status, error) {
                    HandleError(false, 'From DataTables AJAX error section: ' + error);
                }
            },
            columns: [
                { data: "ORIGINAL", className: "colOrig" },
                { data: "CHILD" },
                { data: "MarketSegment", className: "mktSeg" },
                { data: "SIC", className: "sic" },
                { data: "PARENT" },
                { data: "ULTIMATE" },
                { data: "State" },
                { data: "Country" },
            ],
            keys: {
                blurable: false
            },
            buttons: {
                buttons: [
                    {
                        text: 'Copy',
                        key: {
                            key: 'c',
                            ctrlKey: true
                        },
                        action: function (e, dt, node, config) {
                            console.log('copy action!');
                            try{
                                var copiedCell = dt.cell({ row: focusedRowIdx, column: focusedColIdx });
                                copiedCellData = copiedCell.data();
                            }
                            catch (err){
                                HandleError(true, "From Copy action: " + err.stack);
                            }
                        }
                    },
                    {
                        text: 'Paste',
                        key: {
                            key: 'v',
                            ctrlKey: true
                        },
                        action: function (e, dt, node, config) {
                            console.log('paste action!');
                            try{
                                var field = dt.column(focusedColIdx).dataSrc();
                                if (field === "MarketSegment" || field === "SIC") {
                                    alert("CopiedCellData = " + copiedCellData);
                                    editorObj
                                        .edit(focusedRowIdx, false)
                                        .set(field, copiedCellData)
                                        .submit();
                                } else return false;
                            } catch (err) {
                                HandleError(true, "From Paste action: " + err.stack);
                            }
                        }
                    }
                ]
            },
            scroller: {
                displayBuffer: 15
                ,
                loadingIndicator: true
            },
            //deferRender: true, // Don't need this with server-side processing
            colReorder: {
                realtime: false
            },
            scrollX: true,
            scrollY: "80vh",
            scrollCollapse: true,
            searching: false,
            ordering: false,
            processing: false,
            info: false,
            rowId: "Row",
            select: true
        });

allan

Could you try setting the pageLength option to something like 100?

It should be calculated automatically of course for this sort of case, but it would be interesting to know if that resolves it?

Thanks,
Allan

joeyfresh87

No, unfortunately that did not resolve the issue.

Thanks,
Joe

allan

Could you give me a link to the page showing the issue so I can debug it please?

Thanks,
Allan