Scroller information readout shows 0 of X

Scroller information readout shows 0 of X

mmssixmmssix Posts: 3Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • mmssixmmssix Posts: 3Questions: 1Answers: 0
        //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.

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    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

  • mmssixmmssix Posts: 3Questions: 1Answers: 0

    Much appreciated Sir. You guys are the best.

  • Wooly65Wooly65 Posts: 66Questions: 19Answers: 0

    Since the examples are broken do you plane to push release 2.4.2 soon.
    https://datatables.net/extensions/scroller/examples/initialisation/simple.html

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Sorry it slipped my mind. Yes, I'll get that done by the end of the week.

    Allan

Sign In or Register to comment.