DataTables warning: table id=student_info - Cannot reinitialise DataTable why?

shahjalal

<script>
    $(document).ready(function () {
        // Setup - add a text input to each footer cell
        $('#student_info thead tr').clone(true).appendTo('#student_info thead');
        $('#student_info thead tr:eq(1) th').not(":eq(5)").each(function (i) {
            var title = $(this).text();
            $(this).html('<input class="form-control" type="text" placeholder="Search ' + title + '" />');
            var table = $('#student_info').DataTable({
                dom: 'Blfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                lengthMenu: [[20, 50, 100, -1], [20, 50, 100, "All"]]
            });
            // Apply the search
            table.columns().eq(0).each(function (i) {
                if (i == 5)
                    return; //Do not add event handlers for these columns
                $('input', table.column(i).header()).on('keyup change', function () {
                    table
                            .column(i)
                            .search(this.value)
                            .draw();
                });
            });
            table.column(3).every(function () {
                var column = this;
                var select = $('<select class="form-control"><option value="">Select One</option></select>')
                        .appendTo($(column.header()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                    );

                            column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                        });

                column.data().unique().sort().each(function (d) {
                    if (d) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    }
                });
            });
            table.column(4).every(function () {
                var column = this;
                var select = $('<select class="form-control"><option value="">Select One</option></select>')
                        .appendTo($(column.header()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                    );

                            column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                        });

                column.data().unique().sort().each(function (d) {
                    if (d) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    }
                });
            });
        });
    });
</script>

kthorngren

Looks like you have your Datables init code inside a loop:

        $('#student_info thead tr:eq(1) th').not(":eq(5)").each(function (i) {
            var title = $(this).text();
            $(this).html('<input class="form-control" type="text" placeholder="Search ' + title + '" />');
            var table = $('#student_info').DataTable({

You will want to structure your code like this example:
https://datatables.net/examples/api/multi_filter_select.html

Kevin