Datatable

$(document).ready(function () {
                  // hide loader after succesfully loaded data into datatable by ajax
            $.ajax({
                "url": url,
                "dataType": 'json',
                "success": function (json) {
                        for (var i = 0; i < json.columns.length; i++) {
                            $("#customersTbl tfoot tr ").append('<th></th>')

                    };
                    toDataTable(json);
                    $("customersTbl").show();
                    $(".loader1337").hide();
                    $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();

                }
            });
        });


        function toDataTable(json) {
            var table = $('#customersTbl').DataTable({
                columns: json.columns,
                data: json.data,
                language: {
                    search: '',
                    searchPlaceholder: 'Zoeken'
                },
                buttons: [
                    {
                        extend: 'colvis',
                        text: '<i class="fa fa-wrench"></i>',
                        init: function (api, node, config) {
                            $(node).removeClass('btn-secondary')
                            $(node).addClass('btn-outline-secondary')
                        },
                        columnText: function (dt, idx, title) {
                            return title;
                        }
                    },
                    {
                        extend: 'copyHtml5',
                        text: '<i class="fa fa-copy"></i>',
                        titleAttr: 'Kopie naar klembord',
                        init: function (api, node, config) {
                            $(node).removeClass('btn-secondary')
                            $(node).addClass('btn-outline-secondary')
                        }
                    },
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fa fa-file-excel"></i>',
                        titleAttr: 'Excel',
                        init: function (api, node, config) {
                            $(node).removeClass('btn-secondary')
                            $(node).addClass('btn-outline-secondary')
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        text: '<i class="fas fa-file-pdf"></i>',
                        titleAttr: 'PDF',
                        init: function (api, node, config) {
                            $(node).removeClass('btn-secondary')
                            $(node).addClass('btn-outline-secondary')
                        }

                    },
                    {
                        extend: 'csvHtml5',
                        text: '<i class="fas fa-code"></i>',
                        titleAttr: 'CSV',
                        init: function (api, node, config) {
                            $(node).removeClass('btn-secondary')
                            $(node).addClass('btn-outline-secondary')
                        }
                    }
                ],

                responsive: true,
                bLengthChange: false,
                bInfo: false,
                colReorder: true,
                scrollY: '500px',
                scroller: true,
                scrollCollapse: true,
                stateSave: true,
                select: true,
                dom: 'Bfrtil',
                initComplete: function () {

                    // create filter for every column mentioned in array below.
                    this.api().columns().every(function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo($(column.footer()).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, j) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        });
                    });
                }
            });


            // trigger colomn reorder after reordering / resizing  etc etc
            table.on('column-visibility.dt column-reorder.dt init.dt responsive-resize responsive-display', function () {
                $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
            });


            // when clicked on an col that has an URL in it (a link) return false so the default redirect to the clicked rows edit screen doesn't get triggered.
            // else go to edit/single page with data.id from row
            table.on('click', 'tbody td', function () {
                if ($(this).html().indexOf('href=') != -1) {
                    return;
                }
                var data = table.row($(this).parent()).data();
                console.log("row ID:" + data.id)
                window.open('viewitem.aspx?tab=1&name=employee&item_id=' + data.id, '_self');
            })

            $("#customersTbl_filter").css("float", "right");
            $(".dataTables_info").hide();
        }