Missing Parameters in Paging Plugin

Missing Parameters in Paging Plugin

SLorenzSLorenz Posts: 5Questions: 1Answers: 0

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?

Answers

  • allanallan Posts: 63,419Questions: 1Answers: 10,456 Site admin

    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

  • SLorenzSLorenz Posts: 5Questions: 1Answers: 0

    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. :(

  • allanallan Posts: 63,419Questions: 1Answers: 10,456 Site admin

    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

  • SLorenzSLorenz Posts: 5Questions: 1Answers: 0

    Thank you for your efforts. I really appreciate it!

  • allanallan Posts: 63,419Questions: 1Answers: 10,456 Site admin

    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

  • SLorenzSLorenz Posts: 5Questions: 1Answers: 0

    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.

  • allanallan Posts: 63,419Questions: 1Answers: 10,456 Site admin

    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

  • SLorenzSLorenz Posts: 5Questions: 1Answers: 0

    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.

  • allanallan Posts: 63,419Questions: 1Answers: 10,456 Site admin

    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

Sign In or Register to comment.