Datatables pagination next button is not working

Question

I am using datatables/bootstrap.yadcf where data are paginated and being collected using ajax.

var oTable = $('#myTable').DataTable({
        pagingType: "full_numbers",
            searching: true,
            select: true,
            lengthChange: false,
            pageLength: "10",
            scrollY: "550px",
            scrollCollapse: true,
            processing: true,
            language: { 
                info:           "Show _START_ to _END_ from _TOTAL_ (filterded) zoekvragen (Pag. _PAGE_ from _PAGES_)",
                infoEmpty:      "No data",
                emptyTable:     "No data",
                zeroRecords:    "No data",
                infoFiltered:   " - Total number of zoekvragen: _MAX_",
                paginate: {first: "First", last: "Last", next: "Next", previous: "Previous"}
            },
            serverSide: true,
            ajax: {url: '/intakes/ajax', type: 'GET'},

            columns: [
                { width: "10%", data: "familienaam", render: function(data, type, row) {return "<a href='/intakes/" + row.zoekvraagId + "'>" + row.familienaam +  ' ' + row.voornamen + "</a>";}},
                ... more columns
                ]
        });

At the bottom of the table I see the selectable pages. If a click on a page the correct dataset is being retrieved from the server and is shown in the browser client (10 entries). When I select last and press next a couple of times everything works correctly.

If a click on next from a page which is not the first page nothing happens. I noticed at the bottom of the table the following:

Selected page 1: Show 1 to 10 from 926 (filterded) zoekvragen (Pag. 1 from 93) Selected page 2: Show 11 to 926 from 926 (filterded) zoekvragen (Pag. 2 from 93) Selected page 3: Show 21 to 926 from 926 (filterded) zoekvragen (Pag. 3 from 93)

The last one is strange. There are 10 entries shown and one would expect "Show 21 to 30 from 926 (filterded) zoekvragen (Pag. 3 from 93)"

Used libraries (bootstrap-4):

<script src="/webjars/jquery/3.2.1/jquery.min.js"></script>
<script src="/webjars/jquery-ui/1.12.1/jquery-ui.min.js"></script>
<script src="/webjars/popper.js/1.12.5/dist/umd/popper.min.js"></script>
<script src="/webjars/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<script type="text/javascript" charset="utf-8" src="/webjars/datatables/1.10.15/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/webjars/yadcf/0.9.1/jquery.dataTables.yadcf.js"></script>

<link rel="stylesheet" type="text/css" href="/webjars/jquery-ui/1.12.1/jquery-ui.min.css" />
<link rel="stylesheet" href="/webjars/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/webjars/datatables/1.10.15/media/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="/webjars/yadcf/0.9.1/jquery.dataTables.yadcf.css" />

Answer 1

Solved the problem. The pageLength should be an integer instead of a string. Replacing

pageLength: "10" 

by

pageLength: 10

solved the problem.

Answer 2

Mark Smith is right. if you are using variable then, Replace

pageLength: perPage,

by

pageLength: parseInt(perPage),