event click button does not show up

Using Django Templates & Frontend
1

I need to add a event action button for each row in my datatable to show more detail about the row. my code is as below. In fact the datatable and its data is correct, but the event button does not show up in “Detail” column. Please help me fix the issue.

.html

<!DOCTYPE html>
{% extends 'my_app/base.html' %}
{% block head %}
<title>Search Order</title>
{% endblock %}

{% block body_block %}


    <div class="form-group">
        <form id="search_order_form" data-url="{% url 'my_app:search_order' %}">
            {% for field in search_order_form %}
                <label class="order-label" for="{{ field.auto_id }}">{{ field.label }}</label>
                {{ field }}
            {% endfor %}
            {% csrf_token %}
            <br>
            <input class="btn btn-block" type="submit" value="Search Order" name="search_order_submit" style="width:600px">
        </form>
        <br>
    </div>

    <table id="search_order_info" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Order Sequence</th>
                <th>Order Date</th>
                <th>Source Warehouse</th>
                <th>Destination Warehouse</th>
                <th>Detail</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
  
{% endblock %}

.js

    var editor
    $(document).ready(function(){
    $('#search_order_form').submit(function(e){
            e.preventDefault();
            var serializedData = $(this).serialize();
            var url  = document.querySelector('#search_order_form').dataset.url
            $.ajax({
                type: 'POST',
                url: url,
                data: serializedData,
                success: function(response){
                    $("#search_order_info").show();
                    $("#search_order_info_detail").show();
                    $('#search_order_form').trigger('reset');
                    // alert(response['ser_search_order_result'])
                    // alert(response['ser_search_order_result'].length)

                    for (var i=0; i<response['ser_search_order_result'].length;i++){
                        var fields = response['ser_search_order_result'][i];
                        // alert(ser_search_order_result)
                        $('#search_order_info tbody').append(
                            `<tr>
                            <td>${fields["sequence"]||""}</td>
                            <td>${fields["order_date"]||""}</td>
                            <td>${fields["source"]||""}</td>
                            <td>${fields["destination"]||""}</td>
                            </tr>`      
                    )
                    $('#search_order_info').DataTable();
 
                    $('#search_order_info').DataTable({
                        'columnDefs': [
                           {
                              'targets': 4,
                              'data': null,
                              'searchable': false,
                              'orderable': false,
                              'defaultContent': '<button type="button" class="btn btn-primary btn-edit">Edit</button>'
                           }
                        ]
                    });        
                    }//first for loop
                    
                },//success 
            });
            
        });//submit button
    });
2

Just a shot in the dark here - try adding an empty <td></td> after the last field and before the </tr> in this block of code.

3

Thank you for your comment, but it does not work
I got below error:
DataTables warning: table id=search_order_info - Cannot reinitialise DataTable. For more information about this error, please see 3. Warning: Cannot reinitialise DataTable

4

Please post your updated code and the specific line being referenced by the error.

It also looks like you’re defining the datatable twice:

You might try removing that first call.

I’ll also add a side-note here that this is clearly a JavaScript / jQuery / DataTables issue and not a Django issue. You might get a faster and more directed response posting this question in a forum more directly focused on DataTables.

1 Like
5

Thanks for helpful comment. by removing first call, the issue has been solved :grinning: