Reuse DataTable in Modal dialog

cariaco99

Hi there.
I have a form and I'm using the form input titles as links to open a dialog where I perform a lookup and injct the result in the input field. I named the theader as 'theader' and the tbosy as 'tbody'. when a user clicks the title, an ajax retrieves data nad I build the tbody rows and the theader headers based on the result. I need to "clear" the theader and the tbody so when the user clicks another title i can reuse the dialog and the datatable with a new list. I have tried to destroy, clear etc. But I'm not even sure that is is the right way of doing it. My code as follows:

HTML:

<div class="modal fade" id="modal_lookup" tabindex="-1" role="dialog" aria-labelledby="nodal_title" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <p class="modal-title" id="modal_title" style="font-size:18px;font-weight:bold">LOOKUP</p>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <table id="lookup_table" class="table_pr display compact nowrap dataTable no-footer dtr-inline collapsed" style="cursor:pointer">
                            <thead id="lookup_thead"></thead>
                            <tbody id="lookup_tbody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <button id="btn_lookup_close" style="font-size: 10px;">CLOSE</button>
                </div>
            </div>
            
        </div>
    </div>
</div>

JS

       var lookup = ""
        $('.lookup').on('click', function (e) {
            e.preventDefault();
            var id      = this.id;
            var two     = id.split("-");
            var myarray = []

            lookup      = two[1]

            $.ajax({
                url: "/Ajax/lookup?lookup_field=" + lookup
            })
            .done(function (data) {
                data    = JSON.parse(data);
                myarray = data.Table;

                $("#modal_title").html("LOOKUP - " + lookup.toUpperCase())
                
                var thead = "";
                var tbody = "";
                for (var i = 0; i < myarray.length; i++) {
                    if (i == 0)
                        thead += "<tr><td>" + lookup.toUpperCase() + "</td></tr>"
                    tbody += "<tr><td>" + myarray[i][lookup] + "</td></tr>"
                }
**                $("#lookup_thead").html(thead)
                $("#lookup_tbody").html(tbody)**
                    var table = $('#lookup_table').DataTable({
                    scrollY:        "275px",
                    scrollCollapse: true,
                    paging:         false,
                    bPaginate:      false,
                    bFilter:        true,
                    bSort:          false,
                    bInfo: false,
                    columnDefs: [
                        {
                            targets: 0,
                            render: function (data, type, row, meta) {
                                if (type === 'display') {
                                    data = '<a class="link-post" href="#" style="color:black">' + data + '</a>';
                                }
                                return data;
                            }
                        }
                    ]
                });
                $("#modal_lookup").modal("show");

                // Handle click on link in the table
                $('#lookup_table').on('click', '.link-post', function (e) {
                    e.preventDefault();
                    // Get row data


                    var data = table.row($(this).closest('tr')).data();
                    console.log("data=",data)

                    $('#'+lookup).val(data);

                    $('#lookup_table').DataTable({"destroy": true});
                    $("#modal_lookup").modal("hide");
                });

                $('#btn_lookup_close').on('click', function (e) {
                    $('#lookup_table').DataTable({ "destroy": true });
                    $("#modal_lookup").modal("hide");
                });

            });
        });

This code is crashing when the var table = $('#lookup_table').DataTable({ occurs the second time, of course.

Any help would be greatly appreciated
Thanks
cariaco99 (Rafael)

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

cariaco99

What I really would like to do is just reinsert new data in the tbody and refresh the Datatable

colin

This code is crashing when the var table = $('#lookup_table').DataTable({ occurs the second time, of course.

I'm not clear what the problem is - what do you mean by crashing? If it's saying you can't reinitialise the table, add destroy to the initialisation. If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin