Missing Parameters in Paging Plugin

SLorenz

I tried to migrate the "Full Numbers No Ellipses" plugin from https://github.com/DataTables/Plugins/blob/master/pagination/full_numbers_no_ellipses.js to be compatible with DataTables 2.

It seems like there were no parameters passed to the custom paging function anymore: https://github.com/DataTables/DataTablesSrc/blob/26a9c2f7f10d1b0f41009a6476b9784674c4767b/js/features/features.page.js#L43

However, the documentation still describes the parameters: https://github.com/DataTables/DataTablesSrc/blob/26a9c2f7f10d1b0f41009a6476b9784674c4767b/js/ext/ext.js#L197

This is how I register the function (in a TypeScript file):

import DataTable from "datatables.net"
import jQuery from 'jquery';

jQuery.extend(DataTable.ext.pager, {
    full_numbers_no_ellipses: function (page: number, pages: number) {
        ...
    }
})

Is there any chance to bring back the parameters?

allan

Hi,

Good point thank you. The paging plugins have changed a bit in v2 and it looks like there is a little documentation to update.

The easiest way to hide the ellipsis in v2 is to use a little CSS rather than a custom plugin. The element gets an ellipsis class.

div.dt-paging .ellipsis {
 display: no e;
}

I think should do it. Apologies, I'm on a mobile atm so can't resist check it.

Allan

SLorenz

Hi Allan,

thank you for your reply. You are right, I could remove the ellipsis with CSS. However, that's not enought for my use case since I try to remove the numbers of the first and last page, too.

This is my pager using Datatables 1:

By removing only the ellipsis I get something like this:

It seems that with DataTables 2 I cannot control how the "numbers" element of the pager is rendered, since it's done by the internal function _pagingNumbers which I cannot override: https://github.com/DataTables/DataTablesSrc/blob/26a9c2f7f10d1b0f41009a6476b9784674c4767b/js/features/features.page.js#L46

That's the only place in code where the parameters page and pages are defined.

allan

I'll have a bit of a play with it - it might be possible to use CSS to hide the first and last numbers as well. I'll let you know once I've tried it.

Allan

SLorenz

Thank you for your efforts. I really appreciate it!

allan

It isn't quite right, and the CSS is rather nasty, but this is the closest I was able to get it with just plain CSS: https://live.datatables.net/lehoxeli/1/edit .

It almost works, but it doesn't add in buttons to replace those which have been hidden.

The best way to handle this might be to modify the DataTables paging button generator to have an option not to do the first / last / ellipsis.

At the moment the paging button layouts are defined by this part of the code - we could introduce a new numbers_middle token (or something like that).

That then ends up here, via this call.

I'll have a further think about how small a code addition I can make it do that in.

Allan

SLorenz

Thank you for your effort. I would really appreciate it if you could make this possible natively.

Unfortunately, the CSS :has selector is not supported in Firefox ESR. So I cannot use your CSS solution (yet). But thank you anyway.

Let me know if I can do something to help you implement this.

allan

I committed a new feature to DataTables to add the ability to have it hide the first and last numbers - while I was working on it I realised how redundant those numbers are now that I've got it displaying the first last icons buttons by default, so I rather like this feature

It is in DataTables 2.0.4 (release notes) and can be enabled like this:

var table = new DataTable('#example', {
  layout: {
    bottomEnd: {
      paging: {
        boundaryNumbers: false
      }
    }
  }
});

Live example.

I hope this suits your needs.

Allan

SLorenz

That's awesome, thank you!

It is still not 100% compatible with the implementation of DataTables 1.x but I could work around this by implementing a custom renderer.

Btw: Doing so I discovered that your latest changes are not represented in your TypeScript type declarations: https://github.com/DataTables/Dist-DataTables/blob/ac26a0f8ec2badb23ee24a4442032292dae033be/types/types.d.ts#L164
The key "numbers" should be renamed to "buttons" and "boundaryNumbers" is missing at all.

I also discovered that according to your documentaion the layout option allows null values to remove a feature from the layout: https://datatables.net/reference/option/layout
This is also not allowed by your Typescript declaration: https://github.com/DataTables/Dist-DataTables/blob/ac26a0f8ec2badb23ee24a4442032292dae033be/types/types.d.ts#L185
I worked around this by defining an empty object.

allan

Thanks for pointing out those errors.

The first one I've just fixed here and funnily enough, the other was fixed earlier due to another report on that error.

Allan