Mapping DataTables params to Django Rest Framework params?

Mapping DataTables params to Django Rest Framework params?

yaplejyaplej Posts: 2Questions: 1Answers: 0

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>

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • yaplejyaplej Posts: 2Questions: 1Answers: 0
    edited August 2017

    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>
    
  • DamblesDambles Posts: 1Questions: 0Answers: 0

    @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

  • iziizi Posts: 4Questions: 0Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • iziizi Posts: 4Questions: 0Answers: 0
    edited April 2018

    Thanks Allan !

This discussion has been closed.