Paging buttons correctly rendered, but disabled (search, sorting and page size OK tho)

lneville

I have integrated Data Tables into an ASP.NET site. Everything is working as expected, except the paging buttons.

The paging buttons are rendered but nothing happens when they are clicked. There is also no hover effect.

Changing page size works, and the paging buttons are re-rendered correctly for the new page size. I can't see any JS errors.

The Data Tables version is 1.10.20 (no additional plugins). Also used are Bootstrap 4.3.1, jQuery 3.2.1 & jQuery SlimMenu.

Example: http://lneville.s18.dotnetsql.com/Data/Countries/List.html
(this is a static HTML equivalent of a page rendered by ASP.NET ... I can't do anything about the table being in a form, the wierd IDs ... that is done by ASP.NET)

How can I fix this?

Thanks

allan

Honestly - I don't know! The click is being blocked by something - indeed, the CSS hover effect on the paging buttons doesn't even get picked up.

Could you try out DataTables / Bootstrap 4 integration please? Instead of your current DataTables CSS and JS files, try these:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>

and then let me know if it still isn't working and I'll dig more.

Thanks,
Allan

allan

Ah no - I've got it. Didn't like to admit defeat!

Its this in custom.css:

a:not([href]) {
    color: #333;
    pointer-events: none;
    cursor: default;
}

The pointer-events: none is killing the click on those buttons.

Never seen that happen before - thanks for the interesting report! For the moment, just remove that line and it will work.

Allan

lneville

Removing pointer-events: none; did the trick!
I put that in at some point to make links with no href "as disabled as possible" ... not really needed though.
Thanks very much ... I was baffled!