0

I'm working on a project upgrading our website- jquery/datatables/codeigniter. In the previous version, 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. When you try to select either of these you get the three dots for waiting but nothing happens, they just keep going and never stop.

The header HTML:

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

 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 });

I can see in my browser's network tab that getRecordsInfo successfully returns the following when I try to click the pagination tools.

{ "draw": 1, "recordsTotal": 10426, "recordsFiltered": 10426, "data": [ { "pkLocationLookupID": "1", "fkLocationID": "1001", "fkLookupID": "1000", "fldOriginalCode": "", "fldOriginalValue": "", "fldSortOrder": "" }, { "pkLocationLookupID": "2", "fkLocationID": "1002", "fkLookupID": "1000", "fldOriginalCode": "", "fldOriginalValue": "", "fldSortOrder": "" }, { "pkLocationLookupID": "3", "fkLocationID": "1003", "fkLookupID": "1000", "fldOriginalCode": "", "fldOriginalValue": "", "fldSortOrder": "" }, { "pkLocationLookupID": "4", "fkLocationID": "1004", "fkLookupID": "1000", "fldOriginalCode": "", "fldOriginalValue": "", "fldSortOrder": "" }, { "pkLocationLookupID": "5", "fkLocationID": "1005", "fkLookupID": "1000", "fldOriginalCode": "", "fldOriginalValue": "", "fldSortOrder": "" }, { "pkLocationLookupID": "6", "fkLocationID": "1006", "fkLookupID": "1000", "fldOriginalCode": "", "fldOriginalValue": "", "fldSortOrder": "" }, { "pkLocationLookupID": "7", "fkLocationID": "1007", "fkLookupID": "1000", "fldOriginalCode": "", "fldOriginalValue": "", "fldSortOrder": "" }, { "pkLocationLookupID": "8", "fkLocationID": "1008", "fkLookupID": "1002", "fldOriginalCode": "", "fldOriginalValue": "", "fldSortOrder": "" }, { "pkLocationLookupID": "9", "fkLocationID": "1009", "fkLookupID": "1003", "fldOriginalCode": "", "fldOriginalValue": "", "fldSortOrder": "" }, { "pkLocationLookupID": "10", "fkLocationID": "1010", "fkLookupID": "1003", "fldOriginalCode": "", "fldOriginalValue": "", "fldSortOrder": "" } ], "columns": "[{ \"data\": \"pkLocationLookupID\" },{ \"data\": \"fkLocationID\" },{ \"data\": \"fkLookupID\" },{ \"data\": \"fldOriginalCode\" },{ \"data\": \"fldOriginalValue\" },{ \"data\": \"fldSortOrder\" }]" }

That looks like a successful response to me, so I'm not sure why the datatable isn't updating?

Let me know if there is any other information that may be helpful to troubleshoot. Any ideas are appreciated, thanks!

Improve this question
3
  • What am I missing? I can add manage/versions/getRecordsInfo, but it's a long routine and it seems to be passing back a correct JSON. What else would you like to see? What errors are contained in the code that you are talking about, perhaps that would help me fix? Commented Oct 31 at 12:00
  • 1
    "What am I missing?" You are missing a minimal reproducible example in the question. We don't need to see a lot of code. We may not even need to see any of your existing code. We need to see a minimal application that recreates the specific problem. Normally, the best way to do this is to start with nothing and then create the simplest possible demo that shows the problem. (I understand this can be tricky when you have server-side logic as well as client-side processing, but still give it a try. You also stand a better chance of narrowing down, or even solving your own problem for yourself, this way.) Commented Oct 31 at 15:27
  • "That looks like a successful response to me" - but is it the correct response, for the current page of data that is getting requested ...? Commented Nov 3 at 11:57

1 Answer 1

Reset to default
0

I figured out the issue. The function manage/versions/getRecordsInfo was writing values to draw, start and length. In earlier versions of dataTables, it seems that getting the post variable after setting would overwrite the values, but in this upgraded version I needed to completely remove them from my data variable.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.