Child row not working-table is not defined

Child row not working-table is not defined

lazybrainlazybrain Posts: 13Questions: 5Answers: 0

I'm trying to display a table with a child row using django and I keep having the error of the table is not defined thought all the js and css needed are there , this is my code :

{% load static %}
<html>
<html>
<head>
<link rel="stylesheet" href="{% static 'css/jquery.dataTables.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'css/dataTables.tableTools.css' %}" type="text/css" />
<link rel="stylesheet" href="{% static 'datatables/extensions/Responsive/css/dataTables.responsive.css' %}">
<script src="{% static 'js/jquery-1.11.2.min.js' %}"></script>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'datatables/extensions/TableTools/js/dataTables.tableTools.js' %}"></script>
<script src="{% static 'datatables/extensions/Responsive/js/dataTables.responsive.js' %}"></script>
<script src="{% static 'datatables/extensions/Responsive/js/dataTables.responsive.min.js' %}"></script>
</head>
<style type="text/css">
td.details-control {
    background: url('{% static 'img/details_open.png' %}') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('{% static 'img/details_close.png' %}') no-repeat center center;
}
</style>
<body>
<table cellpadding="0" cellspacing="0" border="0" id="example" class="display">
     <thead>
         <tr><th></th><th>eeee</th><th>eeee</th><th>eeee</th><th>eeee</th></tr>
     </thead>
     <tbody></tbody>
     <tfoot></tfoot>
</table>
<script type="text/javascript" language="javascript" class="init">
// setTimeout(function() { window.location=window.location;},20000);
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

     $(document).ready(function() {
        $('#example').dataTable( {
            "dom": 'T<"clear">lfrtip',
            "ajax": {
                 "processing": true,
                 "url": "{% url 'api_login_list' %}",
                 "dataSrc": ""
             },
             "tableTools": {
            "sSwfPath": "{% static 'datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf' %}",
            "aButtons": [ "csv", "pdf", "print" ]
        },
        "language": {
            "lengthMenu": "Display _MENU_ records per page",
            "zeroRecords": "RESULTAT INTROUVABLE",
            "info": " page _PAGE_ de _PAGES_",
            "infoEmpty": "RESULTAT INTROUVABLE",
            "infoFiltered": "(filtered from _MAX_ total records)"},
            "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
            },
            { "Field": "Nom" },
            { "Field": "Prenom" },
            { "Field": "Login" },
            { "Field": "Adress" },
        ],
        "order": [[1, 'asc']]
    });
        $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    });
});
 </script>
</body>
</html>

I hope someone can help me in this !

This question has an accepted answers - jump to answer

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    You shouldn't have both of those:

    jquery.dataTables.js
    jquery.dataTables.min.js
    

    and you shouldn't have both of those:

    dataTables.responsive.js
    dataTables.responsive.min.js
    
  • lazybrainlazybrain Posts: 13Questions: 5Answers: 0

    ....Still not working :(

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395
    Answer ✓
    var table = $('#example').dataTable( {
    ....etc.
    
  • lazybrainlazybrain Posts: 13Questions: 5Answers: 0

    It gives me the error of table.row is not a function !

  • lazybrainlazybrain Posts: 13Questions: 5Answers: 0

    I found the solution replace datatables with Datatables and removed the var

  • lazybrainlazybrain Posts: 13Questions: 5Answers: 0

    thank you , the answer you gave was somehow leading to the answer :))

This discussion has been closed.