range_dates plugin filters rows correctly, but unexpectedly shows or hides filtered rows

range_dates plugin filters rows correctly, but unexpectedly shows or hides filtered rows

stevepiercystevepiercy Posts: 2Questions: 1Answers: 0

I modified the range_dates.js plugin to parse and filter ISO 8601 dates (yyyy-mm-dd).

I have created a test case at:
http://live.datatables.net/nuxasuxa/2

To replicate the issue:
1. Select Start Date == 2018-12-01. Immediately all records are filtered out, but all 15 should display.
2. Select End Date == 2018-12-25. All records remain filtered out, but 8 records should display.
3. Tab back and forth through Search Record Name and End Date. 8 records will hide and display, but 8 records should display.
4. Repeat Steps 1 and 2, but type the date manually to experience the same issue.
5. Remove the datepicker initialization, and repeat Steps 1 and 2 to experience the same issue.

I've tried changing events between keyup, change, blur, focus, etc., but that had no effect.

How can I fix this UI issue?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 49,733Questions: 1Answers: 7,345 Site admin
    Answer ✓

    Your filter is actually working correctly. But this block of code isn't doing what is expected:

        // Filter by Record Name
        table.columns([3]).every( function () {
            var that = this;
    
            $( 'input' ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            } );
        } );
    

    Specifically it is adding a keyup and change event to every input on the page, not just the one in that column. So in fact the start date is being applied as a column filter to the record name column which is why it is filtering everything out.

    You need to limit its scope - $('input', this.footer()) perhaps (although i don't see a footer cell there so that might not solve it).

    Allan

  • stevepiercystevepiercy Posts: 2Questions: 1Answers: 0

    FTR, changing the selector of the record name input to input#record-name did the trick. Thank you!

Sign In or Register to comment.