A new datatable is created inside the old one when doing a search through JSON

Thore

Hi! I have a MVC project with a view with a table that in initially filled when the view is loaded. The view is a search form. Each row in the table has a button to the right, to edit the post, which you do in a separate form that is opened in a modal window. When a post is edited through the modal form, the view is not reloaded with a new get. Instead the modal form is closed and the function Search is called again to update the table with the updated/changed data.

Now to the problem. When I do a search after opening the modal form - I even dont have to save the post, can just press the cancel button on the modal form and then click the Search button - the function Search creates a new DataTable within the first one. The basic table is deleted, but the things that DataTables add to the table when i initializing it is still there. So now I have double fields for pagination and search. And if i click the Search agaian, a third datatable is created inside the first two. And so on for each time I do a search. And also, all new datatables seems to have a different settings then the original one. As exampel, "iDisplayLength" is 25 in the original table, but seems to be set to 10 in all the other tables.

The Search function works perfectly as long as I do not open the modal form.

Can someone please tell me what the fault is, or at least point me in some direction? I have running out of ideas on how to fix this, and don't know what to do anymore!

My code is as follow:

The table is written as:

<table id="searchResultTable" class="table table-hover">
    <thead>
        <tr>
            <th>
                Name:
            </th>

            <th>
                Category:
            </th>

            <th>
            </th>
        </tr>
    </thead>

    <tbody>
        @foreach (var item in Model.searchResult)
        {
            <tr>
                <td>
                    @item.name
                </td>

                <td>
                    @item.category
                </td>

                <td>
                    <a href="/Contacts/Contact_Edit?id=@item.contact_id" class="editPost">
                        <span class="glyphicons glyphicons-edit" title="Edit"></span>
                    </a>
                </td>
            </tr>
        }
    </tbody>
</table>

I initialize DataTables on the table:

$(document).ready(function () {
    $('#searchResultTable').DataTable({
        stateSave: true,
        "sDom": '<lfr>t<<"col-xs-12 col-md-12"ip><B>>',
        bPaginate: true,
        "lengthMenu": [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]],
        "iDisplayLength": 25,
        "order": []
    });
});

In the function Search(), I do a JSON request, which returns data that I use to fill the table again with new data. So the view is not reloaded when I do a search.

function Search() {
    $.get("/Contacts/Contact_Search?searchData=" + encodeURIComponent(SearchData())).done(function (data) {
        sr = JSON.parse(data)

        if (sr.success == true) {
            var resultList = sr.searchResult;
            var table = $("#searchResultTable").DataTable();

            table.clear();

            $.each(resultList, function (idx, elem) {
                var i = table.row.add(
                    [
                        elem.name,
                        elem.category,
                        "<a href='/Contacts/Contact_Edit?id=" + elem.contact_id + "' class='editPost'><span class='glyphicons glyphicons-edit' title='Edit'></span></a>"
                    ]);
            });

            table.draw();
        }
    }).fail(function (data) {
    });
};

The modal form is opened by the code

$(document.body).on('click', '.editPost', function (evt) {
    evt.preventDefault();

    var modal = $('#editPost').modal();
    modal
        .find('.modal-body')
        .load($(this).attr('href'), function (responseText, textStatus) {
            if (textStatus === 'success' || textStatus === 'notmodified') {
                modal.show();
                $('#modalLoader').hide();
            }
        });
});

The search button:

<button id="button_search" class="btn btn-default" onclick="Search();">Search</button>

My current version of DataTables is 1.10.15.

Hopefully someone out there chan help me! Thanks is advance if you are that someone!

/Anders