Foreign key value in Django REST Framework Datatables

Question

I followed this SOF question Foreign key value in Django REST Framework closely and many others plus read this documentation and similar multiple times https://datatables.net/manual/tech-notes/4 but have yet to find a solution.

Error message:

DataTables warning: table id=entrytable - Requested unknown parameter 'symbol' for row 0, column 9. For more information about this error, please see http://datatables.net/tn/4

However, the right symbol.name does work in the end when I click okay on the error message.. I've tried to find a solution for this error for the past 2 days and not sure what else to try.

I think this data is being shown as a string. Some of the rows will also show null. Tried an if statement but still no fix.

If I comment out:

 # symbol = serializers.CharField(source='symbol.name', read_only=True)

Then the serializer will show just the foreign key but no error message. Seems to be an issue in my datatables javascript now. However, I've tried their suggestions and still no luck.

serializers.py (Everything commented out in serializers.py are attempted solutions)

class EntrySerializer(serializers.ModelSerializer):

    symbol = serializers.CharField(source='symbol.name', read_only=True)

    # symbol = serializers.SerializerMethodField('get_symbol_name')
    #
    # def get_symbol_name(self, obj):
    #     return obj.symbol.name

    class Meta:
        model = Entry
        # fields = ('id', 'date', 'amount', 'price', 'fee', 'entry_type', 'reg_fee', 'transaction_id', 'trade', 'symbol', 'created_by')
        fields = '__all__'
        # depth = 1

entry_list.html

{% extends "dashboard/base.html" %}
{% load i18n %}
{% block content %}

<style>


table.dataTable tbody tr.odd.selected {
 background-color:#acbad4
}

table.dataTable tbody tr.even.selected {
 background-color:#acbad5
}


</style>

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h2 class="text-gray-800">{% block title %}{% trans "Imported Entries" %}{% endblock %}</h2>
    <a role="button" class="btn btn-success" href="{% url 'import' %}"><i
            class="fas fa-plus-circle"></i> Import New Entires</a>
</div>

<button id="countbutton">Count rows</button>
<button id="deletebutton">Delete rows</button>

<!-- Content Row -->
<div class="row">
    <div class="col-md-12">
        <table id="entrytable"
               class="table-hover table display table-bordered"
               align="center"
               style="width:100%">
            <thead>
            <tr role="row">
                <th>id</th>
                <th>date</th>
                <th>amount</th>
                <th>price</th>
                <th>fee</th>
                <th>entry_type</th>
                <th>reg_fee</th>
                <th>transaction_id</th>
                <th>trade</th>
                <th>symbol</th>
                <!--                <th>created_by</th>-->
            </tr>
            </thead>

        </table>
    </div>
</div>

{% endblock %}


{% block js %}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"/>


<!--https://datatables.net/examples/server_side/select_rows.html-->
<!--<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css"/>-->

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>


<script>

$(document).ready(function() {

//    var selected = [];

    var table = $('#entrytable').DataTable({
        "order": [[ 0, "desc" ]],
        "processing": true,
        "ajax": "/api/entry/?format=datatables",
        "columns": [
            {
                "data": "id",
                "render": function ( data, type, row, meta ) {
                    return '<a type="button" class="" target="_blank" href="' + data + '">' + data + ' </a>';
                }
            },
            {"data": "date"},
            {"data": "amount"},
            {"data": "price"},
            {"data": "fee"},
            {"data": "entry_type"},
            {"data": "reg_fee"},
            {"data": "transaction_id"},
            {
                "data": "trade",
                "render": function ( data, type, row, meta ) {
                    if (data) {
                      return '<a type="button" target="_blank" class="" href="/trade/' + data + '"> ' + data + ' </a>';
                    } else {
                      // show nothing
                    }
                return data;
                }
            },
            {"data": "symbol"},
           // {"data": "created_by"},
            ],


    });

    $('#entrytable tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );

    $('#countbutton').click( function () {
        alert( table.rows('.selected').data().length +' row(s) selected' );
    } );


    $('#deletebutton').click( function () {
        table.row('.selected').remove().draw( false );
    } );


} );



</script>

{% endblock %}

Answer 1

I found the answer after going through the documentation a 10th+ time. I think organizing this question helped. It's also decided to wake up at 6am and try again. It's now 8:18 and I got it!

entry_list.html

        {
            "data": "symbol",
            "defaultContent": "",
        },