Search broken with Foreign Key many-to-many field

jweiskittel

Error messages shown: 500 error
Description of problem: I am building a Django project and using DRF and Datatables with the djangorestframework_datatables package. I am using the serverSide and ajax options and everything is working great until I try to use the search box to filter the rows. I get a 500 error and I believe the error is because it does not know how to search the ajax return correctly.

I am returning four fields from a Model. All four are Foreign Keys and I have created serializers to return the data I need. However, three of these fields are also Many-To-Many fields. Here is a sample of one full object that gets returned:

{"id":12196,"organization":{"name":"Bartholomew County REMC"},"topics":[{"name":"MCM Terminations"}],"instructors":[{"name":"Tim Crouch"}],"dates":[{"to_string":"Aug 09, 2021"}]}

Here is my DataTable JS:

var table = $('#Meetings').DataTable({
                "lengthMenu": [
                    [25, 50, 100, -1],
                    [25, 50, 100, "All"]
                ],
                "columnDefs": [
                    {'targets': [4], type: 'date'},
                    {'targets': [0], "visible": false},
                ],
                "order": [
                    [4, "desc"]
                ],
                "processing": true,
                "serverSide": true,
                "ajax": "http://127.0.0.1:8000/api/meetings/?format=datatables",
                "searching": true,
                "columns": [
                    {"data": "id"},
                    {"data": "organization.name", "name": "organization.name",
                        render: function(data, type, full, meta) {
                            var url = '{% url "meat:meeting_detail" 0 %}'
                            url = url.replace(0, full.id)
                            console.log(full)
                            return '<a href=' + url + '>' + data + '</a>'
                        }
                    },
                    {"data": "topics",
                        render: function(data, type, full, meta) {
                            var result = ''
                            $.each(full.topics, function(index, value) {
                                result = result + value.name
                                if (index < full.topics.length) {
                                    result = result + '</br>'
                                }
                            })
                            return result
                        }
                    },
                    {"data": "instructors",
                        render: function(data, type, full, meta) {
                            var result = ''
                            $.each(full.instructors, function(index, value) {
                                result = result + value.name
                                if (index < full.instructors.length) {
                                    result = result + '</br>'
                                }
                            })
                            return result
                        }
                    },
                    {"data": "dates",
                        render: function(data, type, full, meta) {
                            var result = ''
                            $.each(full.dates, function(index, value) {
                                result = result + value.to_string
                                if (index < full.dates.length) {
                                    result = result + '</br>'
                                }
                            })
                            return result
                        }
                    }
                ]
            })

My render function is for the cases where there are multiple objects in the array that gets returned for the many-to-many fields. I know I need to specify the data AND name properties for each column, but I can only get it to work with organization as it is a simple object, whereas the other are arrays of objects. I have tried all types of things and cannot figure out how to tell datatables to interpret this. Can anyone help me out here?

kthorngren

The 500 error is coming from your Django script. There is an error causing it to return the 500 server error. With server side processing the client Datatables will send a request containing the search parameters among other things. The server script is responsible for the search and returning the data for the page. See the Server Side Processing docs for details.

Are you using a third party Django library that supports Datatables server side processing or are you writing your own. Datatables doesn't supply one and you will need to contact the developer of the library for support of the library.

Kevin

kthorngren

I should add that if you need help with the client side Datatables and diplaying your data please provide us with a simple test case with a sample of the data so we can help. Instead of using ajax and serverSide you can supply Datatables with the data using Javascript, like this example:
https://datatables.net/examples/data_sources/js_array.html

Kevin