单击一个数据表，填充第二个数据表

Question

I have 2 datatables and what I wan is to fill the second datatable depending on witch row of the first datatable I clicked. Some sort of master-detail.

This is the master datatable:

<table id="tinzidentziak" class="table table-bordered table-striped dataTable" role="grid" aria-describedby="example1_info">
<thead>
    <tr>
        <th>Id</th>
        <th>Inzidentzia</th>
        <th>Erabiltzailea</th>
        <th>Engine version</th>
        <th></th>
    </tr>
</thead>
<tbody>
    {% for i in inzidentziak %}
        <tr>
            <td>{{ i.id }}</td>
            <td>{{ i.izena }}</td>
            <td>{{ i.userid }}</td>
            <td>{{ i.teknikoa }}</td>
            <td></td>
        </tr>
    {% endfor %}
</tbody>
</table>

This is the detail datatable:

<table id="tdeiak" class="table table-bordered table-striped dataTable">
    <thead>
        <tr>
            <th>id</th>
            <th>Fetxa</th>
            <th>Nork</th>
            <th>Teknikoa</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

The first datatable is working ok, the problem comes when I tried to load the second datatable, I tried with this:

var table = $('#tinzidentziak').DataTable();
$('#tinzidentziak tbody').on( 'click', 'tr', function () {
    var midata=table.row( this ).data();

    $('#tdeiak').Datatable({
        "ajax": "deiak.json"
    });

} );

I tried first without any parameter, just for check if it´s possible to load the second datatable this way. I´ve got this error:

Uncaught TypeError: $(...).Datatable is not a function

on the line $('#tdeiak').Datatable({

Any help or clue?

Answer 1

It's DataTable not Datatable

Change

$('#tdeiak').Datatable({
        "ajax": "deiak.json"
    });

to

$('#tdeiak').DataTable({
    "ajax": "deiak.json"
});