Scroller information readout shows 0 of X

mmssix

I was able implement scroller alongside server-side data, but am running into an interesting bug with the "information" counter. Specifically around using the scroll wheel on a mouse to move down the table, the counter start resets from 1 to 0.

If you load this datatables.net example page, you'll see the count as Showing 1 to 6 of 5,000,000 entries. But if you put your mouse over the table and scroll down and back up with the wheel, it shows Showing 0 to 5 of 5,000,000 entries. Im seeing the same behavior with my local implementation as well.

But, to make it extra fun, grabbing the scroll bar with the mouse button has the counter working correctly.

There are no errors in the console at all and the rest of the table functionality seems to work fine. Issue seen on both FF and Chrome on a Mac. Using Scroller-2.4.1 with DataTables-2.0.2.

mmssix

    //Creates main datatable
    table = $("#utable").DataTable({
        ajax: {
            "url": dash_table_data,
            "type": 'GET',
            "data": function(d){
                d.tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
            },
        },
        stateSave: true,
        stateSaveParams: function (settings, data) {
            data.search.search = "";
            delete data.order;
            data.start = 0;
            delete data.columns;
        },
        serverSide: true,
        processing: true,
        buttons: [
            {
                // Powers the clear-all button.  Resets column and table search.
                text: 'Clear Filters and Refresh Data',
                className: 'btn btn-secondary btn-light btn-sm dbutton',
                action: function ( e, dt, node, config ) {
                    $("input.form-control:text").val("");
                    table.columns().search('');
                    table.search('');
                    table.order([4, 'desc']).draw();
                }
            },
            {
                // Powers the Export all button.
                text: 'Export to CSV',
                className: 'btn btn-secondary btn-light btn-sm dbutton',
                action: function ( e, dt, node, config ) {
                    $.ajax({
                        url: dash_table_data,
                        type: 'GET',
                        data: {
                            data: JSON.stringify(table.ajax.params()),
                            type: 'report',
                            tz: Intl.DateTimeFormat().resolvedOptions().timeZone
                        },
                        success: function(response, status, xhr) {
                                // check for a filename
                                var filename = "";
                                var disposition = xhr.getResponseHeader('Content-Disposition');
                                if (disposition && disposition.indexOf('attachment') !== -1) {
                                    var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                                    var matches = filenameRegex.exec(disposition);
                                    if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                                }

                                var type = xhr.getResponseHeader('Content-Type');
                                var blob = new Blob([response], { type: type });

                                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                                    // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob
                                    // for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                                    window.navigator.msSaveBlob(blob, filename);
                                } else {
                                    var URL = window.URL || window.webkitURL;
                                    var downloadUrl = URL.createObjectURL(blob);

                                    if (filename) {
                                        // use HTML5 a[download] attribute to specify filename
                                        var a = document.createElement("a");
                                        // safari doesn't support this yet
                                        if (typeof a.download === 'undefined') {
                                            window.location.href = downloadUrl;
                                        } else {
                                            a.href = downloadUrl;
                                            a.download = filename;
                                            document.body.appendChild(a);
                                            a.click();
                                        }
                                    } else {
                                        window.location.href = downloadUrl;
                                    }
                                    setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
                                }
                            },
                        error: function (response) {
                            alert("There was an error communicating. Please reload the page and try again.")
                        }
                    });
                }
            }
        ],
        pagingType: 'simple_numbers',
        orderCellsTop: true,
        dom: "<'row mt-3 justify-content-between'<'col-md-auto me-auto'i><'text-center col-sm-4'B><'col-md-auto ms-auto'f>>" +
            "<'row mt-2 justify-content-md-center'<'col-sm-12'tr>>" +
            "<'row mt-2 justify-content-between'<'col-md-auto me-auto'><'col-md-auto ms-auto'l>>",
        order: [[4, 'desc']],
        scrollY: window_height,
        scrollCollapse: true,
        scroller: {
            rowHeight: 40
        },
        columns: [
            {data: "ip"},
            {data: "port"},
            {data: "status"},
            {data: "switch"},
            {data: 'created_at',
                render: function (data, type, row) {
                    return moment.utc(data).local().format('MM/DD/YY, h:mma');
                }
            }
        ],
        initComplete: function () {
            $('#date-range1').val('')
            // Modifies general search so that it only fires on enter
            $('.dt-search input').unbind().bind('keyup', function(e) {
                if(e.keyCode == 13) {
                    table.search($(this).val()).draw();
                }
            });

            // Setup - add a text input to each lower header cell
            $('#utable thead tr:eq(1) th').each( function () {
                const title = $(this).text();
                if (title === 'Created On') {
                    $(this).html('<input type="text" class="form-control head_search" id="date-range1" placeholder="Enter date range"/>');
                } else {
                    $(this).html('<input type="text" class="form-control head_search" id="' + title + '" placeholder="Filter ' + title + '" />');
                }
            });

            // Apply and send the single column search. Takes column search variables and submits to datatables
            $.each($('.foot-th', table.table().header()), function () {
                // https://stackoverflow.com/questions/32525504/sorting-and-searching-issue-with-complex-header
                const column = table.column($(this).index());

                $( 'input', this).on( 'keyup change', function (event) {
                    if ( column.search() !== this.value && event.keyCode === 13 ) {column.search( this.value ).draw();}
                });

                $( 'select', this).on( 'keyup change', function () {
                    if ( column.search() !== this.value ) {
                        column.search( this.value ).draw();
                    } else if ( column.search() !== "" ) {
                        column.draw();
                    }
                });
            });

            /*$( '.foot-th'  ).on( 'keyup', ".head_search",function () {
                // https://live.datatables.net/giharaka/1/edit
                let all_header_column_names = table.columns().header().map(d => d.textContent).toArray()
                table
                    .column( all_header_column_names.indexOf(this.id) )
                    .search( this.value )
                    .draw();
            } );*/
        }
    });

Thats my rendering code if it helps at all.

allan

Doh! Thank you for letting me know about that. I've committed a fix which will be in the nightly soon, and in the next release of Scroller.

Allan

mmssix

Much appreciated Sir. You guys are the best.