Datatables custom button in Django application

mgpearce48

Does anyone have an example of DataTables custom button which is used to launch django function on the server? The button action would need to pass an array of items selected from the table. The django function would then update database records based on which rows were selected.

mgpearce48

This is from my js code:

buttons: [
{
text: 'Select all',
action: function () {
table.rows().select();
}
},
{
text: 'Select none',
action: function () {
table.rows().deselect();
}
},
{
text: 'Create Commitments',
action: function (e, dt, node, config) {
var rows = dt.rows( { selected: true } ).data().toArray();
alert(rows);
}
}
]

I'm able to retrieve the rows selected however I'm not sure how to send on to the server for further processing.

kthorngren

I think you will want to use jQuery ajax() to send the request to the server. The data option would be used to pass the array of items to the server.

Kevin

mgpearce48

Thank you Kevin for the response. I have tried using the data option as follows:

var rows = JSON.stringify(dt.rows( { selected: true } ).data().toArray());

However when I retrieve in the view function (as follows), the data is not clean. Is there a better way to format?

rows = request.POST

colin

How do you mean it isn't clean?

mgpearce48

This is the response that I get on the server when selecting 2 rows:

<QueryDict: {'[["","<a href': ['\\"/purchaseorder/17/QF123282/\\">QF123282</a>","Seeho Su Pty Ltd","Christopher Peck","23,280"],["","<a href=\\"/purchaseorder/17/QF123283/\\">QF123283</a>","Living Edge (Aust) Pty Ltd","Christopher Peck","1,421"]]']}>

Each row contains 3 columns (the first column contains a hyperlink). It will be difficult for me to retrieve the data from each row to process. I was thinking that the conversion to js array (toArray()) may not be the best approach. Actually, I only need to primary key for each record to update the Django model. Any guidance would be appreciated. Thanks, Michael

allan

A link to a test page would be really useful so I can give you a direct answer. Do you have the primary key value in the table already? If so, get that using the API and post that to the server rather than getting the whole data for the selected rows.

For example you could do something like:

var ids = dt.rows( { selected: true } ).data().map( function (row) {
  return row.id;
} );

What the .id should actually be will depend on where the primary key value is in the data source row. It looks like you are using arrays so it might be `[1]