DataTables - push - from partial view

TimothyV

Can someone please assist me? From a partial view (modal) I am trying to call a function that will action the table.draw() method. The partial view successfully calls the find() function but the table.draw is not called.

$.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
        alert("table.draw");
        return true;
    }
);

function find() {
    alert("table redraw");
    table.draw();
}

kthorngren

Do you get errors in the browser's console?

My guess is table is undefined. The API docs explain how to get an API instance you can use in the find() function.

Kevin

TimothyV

Kevin, my apologies for wasting your time. I should have posted all of the code. The table.draw does get called for each row initially when the grid is built. Just not on the click of the find button in the partial view.

https://jsfiddle.net/TimothyV/w8oja213/

<script type="text/javascript">
    $(document).ready(function () {
        var table = $('#example').DataTable({
            dom: 'lrtip' //hide default search box but keep it enabled
        });

        $('#btnSearch').click(function () {
            $("#modfind").modal();
        });
    });

    function find() {
        alert("table redraw");
        table.draw();
    }

    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            alert("table.draw");
            return true;
        }
    );
</script>

kthorngren

$(document).ready(function () {
var table = $('#example').DataTable({

The variable table is only available within the scope of $(document).ready(). Your functions are outside this scope. Some options:

• Move the functions inside $(document).ready()
• Declare var table before $(document).ready() and remove var from var table = $('#example').DataTable({.
• Get an instance of the Datatable API in the find() function.

Kevin

TimothyV

Kevin, thank you for your quick and accurate response. Like this?

<script type="text/javascript">
    table = $('#example').DataTable({
        dom: 'lrtip' //hide default search box but keep it enabled
    });

    $(document).ready(function () {
        function find() {
            alert("table redraw");
            table.draw();
        }

        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                alert("table.draw");
                return true;
            }
        );

        $('#btnSearch').click(function () {
            $("#modfind").modal();
        });
    });
</script>

kthorngren

No. Sorry I meant do one of the three options :-). I would just do this:

<script type="text/javascript">
    $(document).ready(function () {
        var table = $('#example').DataTable({
            dom: 'lrtip' //hide default search box but keep it enabled
        });
 
        $('#btnSearch').click(function () {
            $("#modfind").modal();
        });
    });
 
    function find() {
        alert("table redraw");
        var table = $('#example').DataTable();  // Get the DT API Instance.
        table.draw();
    }
 
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            alert("table.draw");
            return true;
        }
    );
</script>

Added one line to your original code posting.

Kevin

TimothyV

Kevin, thank you so much! Everyone at https://datatables.net is amazing.

Have a wonderful weekend.