Query with datatables by passing custom parameters in JavaScript

Question

I try to get data from a database and display it on a datatable. This code works:

  tableTest = $('#example').DataTable({
    ajax: "/datatables/getSomething",
    serverSide: true,
    processing: true,
    columns: [
      {data: 'a'},
      {data: 'b'},
      {data: 'c'},
      {data: 'd'}
    ],
    responsive: true
  });

But now I want to pass custom parameters, e.g. myCustomParams = ["foo", "bar", "top"] to the request so I can query custom data.

  tableTest = $('#example').DataTable({
    ajax: {
      url: "/datatables/getSomething",
      type: "POST",
      data: myCustomParams
    },
    serverSide: true,
    processing: true,
    columns: [
      {data: 'a'},
      {data: 'b'},
      {data: 'c'},
      {data: 'd'}
    ],
    responsive: true
  });

In getSomething() I would then take the parameters (i.e. ["foo", "bar", "top"]), query the dataset I want, and then return it back.

But I would only get the error

invalid JSON response.

I looked up that error. I debugged, I looked into Developer Console-> Network-> response and saw that instead of a return value, I get the whole page back. Is there a syntax error I'm missing?

Open the route /datatables/getSomething in your browser directly and see what it returns. It should output JSON in any case (even when there was an error). This question seems to be not related to JavaScript but to whatever language you are using on the server. — feeela
– feeela, Commented Jul 5, 2016 at 11:56
@feeela I'm using nodeJS. So, it is JS. When I go to datatables/getSomething on my browser I see as a response not a JSON file, but the whole HTML code of my page. — thadeuszlay
– thadeuszlay, Commented Jul 5, 2016 at 12:18

Deep · Accepted Answer · 2016-07-05 13:55:29Z

1

as per jquery documents the data should be a plain object or string that is sent to the server with the request.

https://api.jquery.com/jquery.post/

you are directly passing an array , try to wrap that inside an object {},

including the example as per the suggestion by OP

 ajax: {
  url: "/datatables/getSomething",
  type: "POST",
  data: { "myRequest": myCustomParams } 
}

edited Jul 5, 2016 at 13:55

answered Jul 5, 2016 at 12:03

Deep

9,7962 gold badges24 silver badges34 bronze badges

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

6 Comments

Liam Over a year ago

You should not edit another answer with your code @thadeuszlay. The answerer cannot accept your edit FYI, it goes to a queue of trusted users to check, which is where I saw this. If you want to answer, you can answer your own question

thadeuszlay Over a year ago

@Liam ok, I thought I would do him and others a favour by elaboriting on his answer and accepting it. Ok. I answered my own question.

Liam Over a year ago

If you want to help and this answer was useful, upvote it? @thadeuszlay

Deep Over a year ago

@thadeuszlay : glad that you got the resolution using the answer above, you can accept it if you think it helped.

thadeuszlay Over a year ago

@Liam it did help. But I needed time to figured out myself. Having an example would be more clear to me. But ok. @ Deep I will. :)

|

Ulrich Dohou · Accepted Answer · 2017-06-15 23:55:11Z

1

Here is my example and it works

tableTest = $('#example').DataTable({
ajax: {
  url: "/datatables/getSomething",
  type: "POST",
  data: function ( d ) {
       d.myCustomParams = myCustomParamsValues;
  },
},
serverSide: true,
processing: true,
columns: [
  {data: 'a'},
  {data: 'b'},
  {data: 'c'},
  {data: 'd'}
],
responsive: true
});

answered Jun 15, 2017 at 23:55

Ulrich Dohou

1,55914 silver badges25 bronze badges

1 Comment

Saurabh Misra Over a year ago

For whatever reason, the accepted answer didn't work for me and this did. Here is the official documentation about it in the dataTables docs: datatables.net/reference/option/ajax.data

thadeuszlay · Accepted Answer · 2016-07-05 13:04:33Z

0

This way the data is passed to the router getSomething()

  tableTest = $('#example').DataTable({
    ajax: {
      url: "/datatables/getSomething",
      type: "POST",
      data: {
        "myRequest": myCustomParams
      } 
    },
    serverSide: true,
    processing: true,
    columns: [
      {data: 'a'},
      {data: 'b'},
      {data: 'c'},
      {data: 'd'}
    ],
    responsive: true
  });

answered Jul 5, 2016 at 13:04

thadeuszlay

3,0557 gold badges39 silver badges71 bronze badges

Collectives™ on Stack Overflow

Query with datatables by passing custom parameters in JavaScript

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related