Proper way to define DataTables columns when using Ajax?

Proper way to define DataTables columns when using Ajax?

CrlotronCrlotron Posts: 16Questions: 5Answers: 0

I'm retrieving server side data with Ajax using an API. The table is functional but I just noticed that the API url is appended with the entire column definition string. I'm guessing there's something wrong with my syntax or a way to disable this but I haven't found it in the documentation. Below is an example of my DataTable definition and the API call using only a single column. The code using all columns sends a similar call, but over ten times as long.

$(document).ready(function () {
   var table = $('#data').DataTable({
      ajax: '/api//data',
      serverSide: true,
      columns: [
         {data: 'transaction_dt',
              className: 'edit_date transaction_dt',
              render: function ( data, type ) {
                 return type === "display" || type === "filter" ?
                    moment(data).format("YYYY-MM-DD") :
                    data;}
      }]
   });
});

Results in the following API call:
GET /api/transactions/data?draw=1&columns%5B0%5D%5Bdata%5D=transaction_dt&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1641830451072

Since I don't need any data initially passed to populate my table, my desired state for the API call looks like:
GET /api/transactions/data

Any help is greatly appreciated, thanks.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    Answer āœ“

    You have server side processing enabled via the serverSide option, ie, serverSide: true.
    Server side processing is using the protocol documented here to send parameters to interact with the server. If you aren't needing server side processing then remove the serverSide: true. Or you can set the type to POST as shown in this example.

    Kevin

  • CrlotronCrlotron Posts: 16Questions: 5Answers: 0

    Iā€™m using server side processing. Pagination, search, and all that is handled by the server. I guess that verbose string is feeding the Python backend and is actually necessary. Thank you

  • fermevcfermevc Posts: 5Questions: 1Answers: 0

    I know it's probably late, but you could change the 'ajax' request method from default GET to POST (you'll need to adapt the backend code too).

    ...
    ajax: {
      url: '/api/data',
      type: 'POST'
    },
    ...
    

    By doing it this way, you'll get clean request url.

Sign In or Register to comment.