Pagination start post variable always 0

xanabobana

Hello,

I'm working on a project upgrading our website- jquery/datatables/codeigniter. With the previous versions, I had no problem with this datatable. But now, for some reason the pagination isn't working. The datatable loads successfully the first time, but neither the drop-down to choose the number of results shown, nor the clickable page numbers work. Each time the function getRecordsInfo returns the same thing (results from 0 to 10).

Unfortunately the page is behind a login, but I can provide code as necessary. This is the header HTML, we are using dataTables 2.0.8

<script src="https://dev.vmc.w3.uvm.edu/xana/CI4/js/jquery-3.7.1.min.js" type="text/javascript"></script>
<script src="https://dev.vmc.w3.uvm.edu/xana/CI4/js/jquery-ui-1.13.2.js" type="text/javascript"></script>
<script src="https://dev.vmc.w3.uvm.edu/xana/CI4/js/bootstrap-4.1.3/bootstrap.min.js" type="text/javascript"></script>
<script src="https://dev.vmc.w3.uvm.edu/xana/CI4/js/vendor/mustache/0.5.0-dev/mustache.js" type="text/javascript"></script>
<script type="text/javascript" src="https://dev.vmc.w3.uvm.edu/xana/CI4/js/dataTables-2.0.8/datatables.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://dev.vmc.w3.uvm.edu/xana/CI4/css/bootstrap-4.1.3/bootstrap.min.css"/>
<link href="https://dev.vmc.w3.uvm.edu/xana/CI4/js/jquery-ui-1.11.2.custom/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://dev.vmc.w3.uvm.edu/xana/CI4/js/dataTables-2.0.8/datatables.min.css"/>

The javascript initializing the table:

                      datat = $('#data-table').DataTable({
                           "processing": true,
                           "serverSide": true,
                            "ajax": {
                                "url": "<?php echo site_url('manage/versions/getRecordsInfo');?>",
                                "type": "POST",
                                "data": data
                            }, 
                            "drawCallback": function (settings) { 
                                    // Here the response
                                    var response = settings.json;
                                    console.log(response);
                                },                                    
                            "searching": false,
                            "ordering": false,
                            "columns": JSON.parse(result.cols), //result.cols,
                            "stateSave": true,
                            "scrollY": '50vh',
                            "scrollCollapse": true,
                            "scrollX": true
                        });

The beginning of getRecordsInfo looks like this. When I echo 'start' it is always 0, even if I am clicking on the 2nd or 3rd page. Any idea why that would be the case?

            $postData = $this->request->getPost();             
            $draw = (int)$postData['draw'];
            $start = $postData['start'];
            $length = $postData['length'];
            $datasetid = $postData['datasetid'];
            $versionid = $postData['versionid'];
            echo $start 

Link to test case: unavailable
Debugger code (debug.datatables.net): uploaded as debug code ejodaw
Error messages shown: no error messages shown
Description of problem: Pagination not working, start is always 0 (length is always 10 also)

allan

What does your data variable contain? From the debug trace it might include start: 0, which would be the issue. If it does, remove that property. draw, and length as well.

Allan

xanabobana

The data variable does contain an initialization of those variables for the first draw of the datatable, before the post request is made. Why wouldn't the post variable contain the overwritten value? If I remove those initializations the datatable doesn't draw the first time...

kthorngren

You have this:

      "ajax": {
          "url": "<?php echo site_url('manage/versions/getRecordsInfo');?>",
          "type": "POST",
          "data": data
      },

When Datatables initializes it will read the data variable. Each subsequent request will use the original values. Sounds like this is the problem you are describing. Use ajax.data is a function so it can update the values sent for each request.

Use the browser's network inspector tool to view the request parameters sent. Are they correct? As Allan said you might need to remove the start, draw and length from the data variable.

Kevin

allan

In an object form, the data provided by the dev (i.e. your data variable) is given priority. As such if you have start: 0 that is what is always going to be sent to the server.

Remove those three parameters and let's try and debug from there. Perhaps do another debug trace please.

Allan

xanabobana

Allan was correct! I rewrote the function to remove the start, draw and length from the data variable after the first render of the table, and it worked! Interesting that earlier versions of dataTables would overwrite them.

allan

Good to hear that helped. Thanks for letting us know.

Allan