server side data tables send POST data as json

Question

I'm trying to use server processing with data tables:

$("#my-table-id").DataTable( {
    serverSide: true,
    ajax: {
    url: '/request/path/',
    type: 'POST',    
    }
});

sends data as url encoded, which as you can see is pretty unmanageable:

draw=1&columns%5B0%5D%5Bdata%5D=0&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&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=2&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=3&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=4&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=true&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B5%5D%5Bdata%5D=5&columns%5B5%5D%5Bname%5D=&columns%5B5%5D%5Bsearchable%5D=true&columns%5B5%5D%5Borderable%5D=true&columns%5B5%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B5%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B6%5D%5Bdata%5D=6&columns%5B6%5D%5Bname%5D=&columns%5B6%5D%5Bsearchable%5D=true&columns%5B6%5D%5Borderable%5D=true&columns%5B6%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B6%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B7%5D%5Bdata%5D=7&columns%5B7%5D%5Bname%5D=&columns%5B7%5D%5Bsearchable%5D=true&columns%5B7%5D%5Borderable%5D=true&columns%5B7%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B7%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=0&length=100&search%5Bvalue%5D=&search%5Bregex%5D=false

decoded:

draw=1&columns[0][data]=0&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=true&columns[0][search][value]=&columns[0][search][regex]=false&columns[1][data]=1&columns[1][name]=&columns[1][searchable]=true&columns[1][orderable]=true&columns[1][search][value]=&columns[1][search][regex]=false&columns[2][data]=2&columns[2][name]=&columns[2][searchable]=true&columns[2][orderable]=true&columns[2][search][value]=&columns[2][search][regex]=false&columns[3][data]=3&columns[3][name]=&columns[3][searchable]=true&columns[3][orderable]=true&columns[3][search][value]=&columns[3][search][regex]=false&columns[4][data]=4&columns[4][name]=&columns[4][searchable]=true&columns[4][orderable]=true&columns[4][search][value]=&columns[4][search][regex]=false&columns[5][data]=5&columns[5][name]=&columns[5][searchable]=true&columns[5][orderable]=true&columns[5][search][value]=&columns[5][search][regex]=false&columns[6][data]=6&columns[6][name]=&columns[6][searchable]=true&columns[6][orderable]=true&columns[6][search][value]=&columns[6][search][regex]=false&columns[7][data]=7&columns[7][name]=&columns[7][searchable]=true&columns[7][orderable]=true&columns[7][search][value]=&columns[7][search][regex]=false&order[0][column]=0&order[0][dir]=asc&start=0&length=100&search[value]=&search[regex]=fals

I want to be able to send it as JSON, which seems like a much cleaner way to receive this data in the backend. I don't know how it is sending data at the front end, so I can't use the solution that this question is supposed to be a duplicate of

You could change it to json %5B = [ and %5D = ]. See http://stackoverflow.com/questions/9966053/what-does-5b-and-5d-in-post-requests-stand-for for help — depperm, Jun 25 '15 at 13:23
possible duplicate of [jQuery ajax, how to send JSON instead of QueryString](http://stackoverflow.com/questions/12693947/jquery-ajax-how-to-send-json-instead-of-querystring) — Miraage, Jun 25 '15 at 13:25
That's jQuery and PHP's standard way to encode structured data. If you're using PHP on the backend then `$_POST['columns']` will just contain useful multidimensional arrays. If you aren't using PHP, then processing it is still trivial. It isn't remotely unmanageable. — Quentin, Jun 25 '15 at 13:26
I'm using Django, am I supposed to url decode it then then split it ? I want to get something iterable instead of having to assign each parameter one by one to a variable. Is there some way to send json from client side, rather than having to process it server side ? — madhukar93, Jun 25 '15 at 13:46
http://stackoverflow.com/questions/1890013/django-python-is-there-a-simple-way-to-convert-php-style-bracketed-post-keys-t — Quentin, Jun 25 '15 at 13:50
so no way to encode it as json on client side ? maybe some JS magic ? Otherwise I'll use the package you suggested Quentin — madhukar93, Jun 25 '15 at 13:54
well quentin's suggested package is exactly what I was looking for, All you need to know about the table is that it has 8 columns,as far as I can tell, the request is based solely on the number of columns anyway — madhukar93, Jun 25 '15 at 14:14

score 2 · Accepted Answer · answered Jun 25 '15 at 16:06

To submit data as JSON string use the code below:

$("#my-table-id").DataTable( {
    serverSide: true,
    ajax: {
       url: '/request/path/',
       type: 'POST',
       data: function (d) {
         return JSON.stringify(d);
       }
    }
});

See ajax.data for more information.

server side data tables send POST data as json

1 Answers1

Linked