Pass Parameters through ajax call - ajax url

Question

I am trying to pass value parameter through the ajax call to the controller. It is a date value. I am struggling to find a way to pass parameters through this ajax url. Please help.

 function dataTable() {
    var value = $("#somedatevalue).val();
    $("#thisTable").DataTable({
        "processing": true,
        "paging": false,

        "language": {
            processing: "<span class='processing-message'><i class='fa fa-circle-o-notch fa-spin'></i> Processing...</span>"
        },
        
        ajax: {

            url: $('table#thisTable').data("ajaxurl"),
            type: "POST",
            datatype: "json",

        },
        "columns": [
            {
                "data": "column1",
            },
            {
                "data": "column2",
            },
            {
                "data": "column3",
            },
            {
                "data": "column4",
            },
            {
                "data": "column5",
            },
            {
                "data": "Url",
                "render": function (data) {
                    return '<a class="btn btn-info" href="' + data + '">Select</a>';
                }
            }
        ],
        "dom": 't<"col-lg-3"l><"col-lg-6"p><"col-lg-3"i>'
    });
}  

Answer 1

You can pass value as query parameter like http://www.url.com?date="17-02-21"

If you are using php use can get the value as $_GET['date'] If you are using node.js, you can get value as req.query.date

Answer 2

Consider the following.

function dataTable() {
  $("#thisTable").DataTable({
    "processing": true,
    "paging": false,
    "language": {
        processing: "<span class='processing-message'><i class='fa fa-circle-o-notch fa-spin'></i> Processing...</span>"
    },
    "ajax": {
      "url": $('table#thisTable').data("ajaxurl"),
      "type": "POST",
      "data": { "someDate": $("#somedatevalue").val() },
      "datatype": "json"
    },
    "columns": [
      {
        "data": "column1",
      },
      {
        "data": "column2",
      },
      {
        "data": "column3",
      },
      {
        "data": "column4",
      },
      {
        "data": "column5",
      },
      {
        "data": "Url",
        "render": function (data) {
          return '<a class="btn btn-info" href="' + data + '">Select</a>';
        }
      }
    ],
    "dom": 't<"col-lg-3"l><"col-lg-6"p><"col-lg-3"i>'
  });
}

First you must address the Typo in your jQuery Selector. Then you can adjust your Ajax parameters to include a data .

See more here: https://datatables.net/reference/option/ajax.data

In principle it operates in exactly the same way as jQuery's $.ajax.data property, in that it can be given as an object with parameters and values to submit, but DataTables extends this by also providing it with the ability to be a function, to allow the data to be re-evaluated upon each Ajax request (see above).