Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I pass additional parameters to the jQuery DataTable ajax call?

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:

  • Datatables serverside. Send extra parameters asynchronously
  • Understanding fnServerData in Datatables

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%"

                }
            ],
        });
like image 695
Brett Avatar asked Nov 06 '15 17:11

Brett


1 Answers

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
            }
        }
    } );
} );
like image 57
Brett Avatar answered Nov 02 '22 11:11

Brett