Datatable input pagination fires on entry of first number

harjmankoo

Hi All,
Using Datatable 1.10+ with the following code. The input pagination was taken from various peoples hard work, I am just trying to implement it.

$('#POsTable').DataTable( {
            processing: true,
            language: {
            loadingRecords: 'Loading Data My Friend;',
            processing: 'Loading...',
            oPaginate: {
                        sNext: '<i class="fa fa-forward"></i>',
                        sPrevious: '<i class="fa fa-backward"></i>',
                        sFirst: '<i class="fa fa-step-backward"></i>',
                        sLast: '<i class="fa fa-step-forward"></i>'
                    }
           
            },
            serverSide: true,
            ajax: {
                url: "getJSONData.php",
                type: "GET",
                data: {"0": "HSChecker",
                       "BRDCustomer": document.getElementById("Company").value,
                       "Style": StyleValue,
                       "SKU": SKUValue,
                       "Description": DescriptionValue,
                       "Price": PriceValue,
                       "Curr": CurrValue,
                       "Material": MaterialValue,
                       "Commodity": CommodityValue,
                       "MappedCode": MappedCodeValue,
                       "ForeignDescription": ForeignDescriptionValue,
                },
                
            },
            columns: [
                { data: "GroupFields" },
                { data: "Style"},
                { data: "SKU" },
                { data: "Description" },
                { data: "Price" },
                { data: "Curr" },
                { data: "Material" },
                { data: "GBCode" },
                { data: "ForeignCode" },
                { data: "ForeignDesc" }
            ],
            searching: false,
            paging: true,
            pageLength: 30,
            pagingType: "input",
            ordering:  false,

The above requires the following plug-in

So I have used oPaginate and pagingType: "input". This gives me a really nice input box with icons for first/previous,next,last buttons. The issue I have is that when I enter a page number, the trigger which gets the page fires on entry of teh first digit. For exampel I am on page 1 and want to go to page 100. When I enter the first 0 the trigger fires and takes me to page 10.
Is there anyway to control how the trigger fires. Ideally I would want it to fire when I tab out.

Thanks
Harj

harjmankoo

Before anyone shouts, I have read the helpful hint at the top which informed me I was using lagacy attributes. I have changed oPaginate to paginate and changed sNext to next etc.

colin

Hi @harjmankoo ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

harjmankoo

Hi Colin
I hope I am not cheating the forum rules by referencing another forum question but this actually shows what I am talking about. https://datatables.net/forums/discussion/43564/user-entered-page-numbers. This has fiddle code https://jsfiddle.net/7bxwhvzv/4/ which has the issue. If you enter a number in the input field the page change trigger fires on entry. This fiddle just has 5 pages but issue is the same. I have 100+ pages using server-side processing. With server-side there is a delay in retrieving the data. So if I enter a 1 the trigger will fire to get page 1 then if I enter 0, it will retrieve data for page 10. But I want page 100 so you can see my issue. For user its a pain waiting for every entry of number to refresh datatable even though user is not interested in page 1 or page 10, user wants 100.
Once again apologies if I am cheating. Happy to recreate the same fiddle for my issue if required.
Harj

colin

Hi @harjmankoo ,

Got it, thanks!

If you look at the code for the plugin, you'll see line 119:

 $(nInput).keyup(function (e) {

If you change that to be:

 $(nInput).focusout(function (e) {

that should do the trick. We won't change the plugin ourselves, since it's being used and the behavioural change would impact those users, but feel free to change it for yourself locally.

Cheers,

Colin

harjmankoo

Hi Colin
Once again thanks very much for your help. That was spot on.
All good now

Harj