Django Rest Framework and DataTables

Tangoalee

I'm not able to display the json payload from Django Rest Framework in a DataTable and I'm not sure why. I've overwritten the serializer to better format the json payload however it still isn't working.

I can verify that the JSON request is firing and getting the proper information back (can see in the console of the browser) however the table says "No data to display"

Here is my json payload:

{"data":[
    {"product_name":"123",
     "mdr_class":1,
     "category":1,
     "eo_role":1,
     "division":1,
     "created_by":"root"}
    {"product_name":"1234",
     "mdr_class":1,
     "category":1,
     "eo_role":1,
     "division":1,
     "created_by":"root"}
     ...
    ]}

singleline of JSON:

{"data":[{"product_name":"123","mdr_class":1,"category":1,"eo_role":1,"division":1,"created_by":"root"},{"product_name":"1234","mdr_class":1,"category":1,"eo_role":1,"division":1,"created_by":"root"},{"product_name":"234234","mdr_class":1,"category":1,"eo_role":1,"division":1,"created_by":"root"},{"product_name":"432","mdr_class":1,"category":1,"eo_role":1,"division":1,"created_by":"root"},{"product_name":"432134","mdr_class":1,"category":1,"eo_role":1,"division":1,"created_by":"root"},{"product_name":"432134","mdr_class":1,"category":1,"eo_role":1,"division":1,"created_by":"root"},{"product_name":"432134","mdr_class":1,"category":1,"eo_role":1,"division":1,"created_by":"root"}]}

and my HTML file with the AJAX call outlined.

<table id="example" class="display">
<thead>
    <tr>
        <th>Product Name</th>
        <th>MDR Class</th>
        <th>Category</th>
        <th>EO Role</th>
        <th>Division</th>
        <th>Created By</th>
    </tr>
<thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th>Product Name</th>
        <th>MDR Class</th>
        <th>Category</th>
        <th>EO Role</th>
        <th>Division</th>
        <th>Created By</th>
    </tr>
<tfoot>
</table>

<script>
$(document).ready(function() {
    $('#example').DataTable( {

        ajax: {
        "processing":true,
        url: 'http://localhost:8000/api/entry/?format=json',
        "dataSrc":"",
        },


        columns: [
            {"mData":"product_name"},
            {"mData":"mdr_class"},
            {"mData":"category"},
            {"mData":"eo_role"},
            {"mData":"division"},
            {"mData":"created_by"},
            ]
        } );


});

</script>

Again - I can see the json in the console, but the data doesn't display.
Do I need to modify how the json is being presented to the DataTable? I am very confused.

Tangoalee

The script portion was formatted incorrectly.
This is what worked:

    <script>
    $(document).ready(function() {
        $('#example').dataTable( {

            ajax: {
            url: 'http://localhost:8000/api/entry/?format=json',
            },
            
            
            columns: [
                {data:"product_name"},
                {data:"mdr_class"},
                {data:"category"},
                {data:"eo_role"},
                {data:"division"},
                {data:"created_by"},
                ]
            } );
    
    
    });

    </script>

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