IE8 - Next page not working

IE8 - Next page not working

ashipmaashipma Posts: 14Questions: 0Answers: 0
edited May 2014 in DataTables 1.10

I am having issues with the "Next" button working in IE8. If you click next for the first page, it works. But it will not go past page 2. Also, if you click on any page number and then try clicking next, the next button will not work. I am also having issues with not being able to click any rows in this table. I am using Internet Explorer 8.0.6001.18702CO.

This is similar to the other issue I have posted about not being able to click rows in IE8 except the other issue has nothing to do with pagination and it is using AJAX as its data source. This example uses data in the DOM instead of AJAX.

Here is a test case: http://jsbin.com/kewez/1

Please try clicking the next page several times. It works the first time, but it will not go past page two. Also, try clicking any of the rows in the table. They should set the row to a "selected" state, but the row clicking does not work on any of the rows. Also, if you click down to the bottom of a page of results, it will not be possible to scroll to the bottom row. The viewport will be set such that the bottom row is outside the view. You can pull the scroll bar down to the bottom, but once you let go, the table is scrolled up.

None of these issues occur in Google Chrome. These issues only occur in IE8.

Here is the JavaScript for the table. These issues seem to go away if the scrollY and scrollCollapse properties are removed. But if I have either of these set, these issues occur in IE8.

$(document).ready( function () {
    $("#second-table").DataTable({
        scrollCollapse: true,
        scrollY: "9em"
    });
    $('#second-table').on('click', 'tbody tr', function () {
        $(this).toggleClass("selected");
    });
});

Thanks for your help,
Alex

Replies

  • ashipmaashipma Posts: 14Questions: 0Answers: 0

    I am just following up on the previous issue to make sure this does not get lost. I do believe the issues described in the previous posting to be bugs in DataTables, but I just want to make sure that is the case and that there is not something I am doing wrong.

    Here is a test case: http://jsbin.com/kewez/1

    Please use IE8 to view the test case because the test case works fine in other browsers. These issues are only happening in IE8. These are the issues that are occurring:

    1. Row clicking is not working. The user is supposed to be able to click the rows.
    2. The "Next" page button does not work after page two. If clicking "Next", it will go to page two, but it will not get to page three. Also, if you click on a specific page and then click "Next", the next page button will not work either.
    3. When clicking a column header, the sorting icon does not change. Try sorting any of the columns and look at the sorting icon. The sorting works fine, it is just the icon is not getting updated.
    4. When scrolling to the bottom of the current page, the view port will be scrolled up about one row, so the bottom row cannot be viewed. Try to scroll to the bottom of the current page and look at the bottom row, it will not be able to stay in view.

    Again, as I have said before, this all works perfectly fine in Google Chrome, but it does not work in IE8, so I think it is a browser compatibility issue with the DataTable, but I just want to verify that.

    Please let me know if you have any questions, comments, or concerns about any of these issues.

    Thank you for your help,
    Alex

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    This is a bit of a nightmare bug to be honest. I've absolutely no idea what is causing it, despite just having spent an hour working on it. If you disable scrolling it works okay, but internally in DataTables you have to disable both the scroll and autoWidth calculations (just one doesn't work) to allow it to work. It works in DataTables 1.9.4 so its due to something I've changed - either I've made a mistake, or I'm triggering a bug in IE8.

    Unfortunately, I'm going to have to come back to this as I really must do a few other things today. Sorry I don't have an immediate fix. I suspect this one is going to involve a lot of head banging, and not in a good moshing way...

    Allan

  • ashipmaashipma Posts: 14Questions: 0Answers: 0

    Okay, thank you so much for your help with this. I do not mean to be a pain and I understand that you are really busy with everything, so is there any official issue tracker or bug list that this can be added to just so it is not forgotten?

    Thank you again for all your help and for providing this data grid. It is a really nice data grid with a good API and a nice interface.

    Alex

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    There is the github issue list which you could use, but I've already got this bookmarked in my forum preferences, so it won't be forgotten about.

    I'm still no closer to resolve it though - it just doesn't seem to make any sense at all...

    Allan

  • ashipmaashipma Posts: 14Questions: 0Answers: 0

    Okay, well thank you so much for your help with this.

  • ashipmaashipma Posts: 14Questions: 0Answers: 0

    Hey Allan,

    I know you are busy, but have you had a chance to look at this issue any more? Some people on my team are also running into problems related to this so I was just wanting to follow up to find out if you have discovered anything about this issue.

    Thank you for your help,
    Alex

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    Apologies for the delay at looking into this. This should now be resolved. I've updated the JSBin to use the nightly version of DataTables and it appears to operate as expected in IE8: http://jsbin.com/nidavexo/2/edit .

    Let me know if you run into problems with it.

    Regards,
    Allan

  • ashipmaashipma Posts: 14Questions: 0Answers: 0

    Awesome. Thank you so much for your help. The paging and sorting all works perfectly now. The only issue that is left is issue number four above:

    • When scrolling to the bottom of the current page in the data table, the view port will be scrolled up about one row, so the bottom row cannot be viewed. Try to scroll to the bottom of the current page of results and look at the bottom row, it will not be able to stay in view.

    Do you know how this can be fixed? I am not trying to be a pain on purpose. I really do appreciate all the work you have put into this table and for the help you have provided in fixing the other issues.

    Thank you again,
    Alex

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    edited July 2014

    Outside of JSBin I haven't been able to recreate that issue. For example, just copy and paste the code for the bin and save it into a text file and then run it in IE8 - should work okay (it does for me). So looks like something wrong with the interaction for JSBin and DataTables - I suspect something to do with the scrollbars showing and hidden (so quickly we can't see them).

    Allan

This discussion has been closed.