12

When loading a jQuery DataTable, I have the code shown below. How do I pass additional parameters to the AJAX call? The fnServerParams callback suggested in the questions and answers below does not work. That is, naively using aodata.push() results in "push is undefined" (because, indeed, aodata is not an array). So what's the correct way to do this?

Related questions:

Code:

self.dataTable = self.dataTableContainer.DataTable({
            "autoWidth": false,
            "bSort": false,
            "displayStart": 0,
            "paging": false,
            "lengthChange": false,
            "processing": true,
            "serverSide": true,
            "dom": "<'dataTables_header dashboard_alert_history__alertHeader'i>",
            "ajax": {
                url: getDataUri,
                error: onError,
                cache: false,
                "fnDrawCallback": onTableDrawn,
            },
            "fnDrawCallback": onTableDrawn,
            "language": {
                "info": resources.alarmHistory,
                "infoEmpty": resources.alarmHistory,
                "infoFiltered": ''
            },
            "columns": [
                {
                    "data": "timestamp",
                    "mRender": function (data) {
                        return IoTApp.Helpers.Dates.localizeDate(data, 'L LTS');
                    },
                    "name": "timestamp"
                },
                {
                    "data": "deviceId",
                    "mRender": function (data) {
                        return htmlEncode(data);
                    },
                    "name": "deviceId"
                },
                {
                    "data": "ruleOutput",
                    "mRender": function (data) {
                        return htmlEncode(data);
                    },
                    "name": "ruleOutput"
                },
                {
                    "data": "value",
                    "mRender": function (data) {
                        return htmlEncode(IoTApp.Helpers.Numbers.localizeFromInvariant(data));
                    },
                    "name": "value"
                },
            ],
            "columnDefs": [
                {
                    "targets": [0, 1, 2, 3],
                    "className": 'table_alertHistory_issueType',
                    "width": "20%"

                }
            ],
        });
Community
  • 1
  • 1
Brett
  • 8,575
  • 5
  • 38
  • 51

1 Answers1

39

I neglected to RTFM. The fnServerParams callback is now legacy for versions 1.9 and earlier. In the latest version of DataTables, you leverage the ajax data parameter as described in the DataTables documentation. In the example below, appending mykey to the d object will do the trick: 

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "scripts/server_processing.php",
            "data": function ( d ) {
                d.myKey = "myValue";
                // d.custom = $('#myInput').val();
                // etc
            }
        }
    } );
} );
Brett
  • 8,575
  • 5
  • 38
  • 51
  • Awesome! This is just what I'm looking for. Thanks for your good answer! – iconique May 31 '20 at 04:07
  • how to do this on a already initialised datatable ? – Sandeep Balagopal Apr 21 '21 at 05:59
  • @SandeepBalagopal It's been many years for me, but I think that's a different question. You're asking, "how do I manipulate the table after it is loaded?" Or more likely, you want to catch the ajax promise and manipulate the data before it is displayed. – Brett Apr 21 '21 at 12:43
  • i wanted to pass extra paramaters to the ajax url after it is initialized. found out that i have to destroy the table and recreate it for that. – Sandeep Balagopal Apr 21 '21 at 14:47
  • @SandeepBalagopal I'm still looking for an answer for a similar question here https://stackoverflow.com/questions/67376953/jquery-datatable-update-request-postdata-on-datatable-reload?noredirect=1#comment119092423_67376953. Please help me if you have a solution. – BetterLateThanNever May 04 '21 at 00:40