Mapping DataTables params to Django Rest Framework params?

yaplej

I am trying to get DataTables server side processing to work with Django Rest Framework.
http://www.django-rest-framework.org

So far I have tried to manually map the data json to the correct params used by DRF but I was wondering if there was this capability already baked into DataTables? If not could it be added so one could simply specify ajax:{mode: 'drf'}?

It seems like the parameters are considerably different in the Django Rest Framework and I have only been successful in mapping to the most basic ones.

api/assets/?id=&asset_type_fk=&asset_type_fk__name=&parent_fk=&parent_fk__isnull=&parent_fk__serial_num=&serial_num=&model_fk=&asset_num=&model_fk__name=&location_fk=

ordering uses the ?ordering= followed by the field name or -field name
searching is only ?search= followed by the search string.
for column filtering I noticed that the column maps well to the field parameter ?columndata and for nested data it maps well to ?columndata__field where the column is nested "data: 'field.value'".

<script type="text/javascript">
            $(document).ready(function () {
                $('#packages_table').dataTable({
                    "serverSide": true,
                    "ajax": {
                        "processing": true,
                        url: '/api/assets/?format=json',
                        data: function ( data ) {
                            console.log(data);
                            data.page = data.draw;
                            delete data.draw;
                            data.limit = data.length;
                            data.page_size = data.limit;
                            delete data.length;
                            data.search = data.search.value;
                            data.offset = data.start;
                            delete data.start;
                            return data;
                        },
                        dataFilter: function(data){
                            var json = jQuery.parseJSON(data);
                            json.recordsTotal = json.count;
                            json.recordsFiltered = json.count;
                            json.data = json.results;
                            delete json.results;
                            return JSON.stringify(json); // return JSON string
                        },
                    },
                    "columns": [
                        { data: "id",},
                        { data: "asset_type_fk"},
                        { data: "serial_num"},
                        { data: "model_fk.name"},
                        { data: "location_fk"},
                    ]
                });
            });
        </script>

kthorngren

My backend is Python but I don't use Django. IMHO I think it would be easier to deal with the "mapping" in the Python code rather than within the Datatables AJAX request.

I found this:
https://bitbucket.org/pigletto/django-datatables-view

It looks like it might work well for server side processing. I'm not sure if it will work with DRF. If nothing else it may provide some base code for you to use.

Kevin

allan

One option on the client-side might be to use the traditional option that jQuery offers for parameter serialisation. The jQuery docs don't to a great job of explaining that option (imho), but this SO post looks good.

Allan

yaplej

I was able to get sorting working but IMO it seems a little crude. The traditional option looks promising.

        <script type="text/javascript">
            $(document).ready(function () {
                $('#packages_table').dataTable({
                    "serverSide": true,
                    "ajax": {
                        "processing": true,
                        url: '/api/assets/?format=json&parent_fk__isnull=True',
                        data: function ( data ) {
                            data.page = data.draw;
                            delete data.draw;
                            data.limit = data.length;
                            data.page_size = data.limit;
                            delete data.length;
                            data.search = data.search.value;
                            data.offset = data.start;
                            var ordering = data.columns[data.order[0].column].data;
                            if(ordering.includes('.')){
                                ordering = ordering.replace('.','__');
                            }
                            if(data.order[0].dir === 'asc') {
                                data.ordering = ordering;
                            }else{
                                data.ordering = "-" + ordering;
                            }
                            delete data.start;
                            return data;
                        },
                        dataFilter: function(data){
                            var json = jQuery.parseJSON(data);
                            json.recordsTotal = json.count;
                            json.recordsFiltered = json.count;
                            json.data = json.results;
                            delete json.results;
                            return JSON.stringify(json); // return JSON string
                        },
                    },
                    "columns": [
                        { data: "id"},
                        { data: "asset_type_fk.name", defaultContent: ""},
                        { data: "serial_num"},
                        { data: "model_fk.name", defaultContent: ""},
                        { data: "location_fk"},
                    ]
                });
            });
        </script>

Dambles

@yaplej did you ever get this working the way that you wanted? I am also doing something similar and was wondering if you found a better solution

izi

For the record, there is now a Django Rest Framework third party module that provides integration with Datatables: https://github.com/izimobil/django-rest-framework-datatables

allan

Thanks for sharing that with us. I've added it to the DataTables home page's links section.

Allan

izi

Thanks Allan !