gistfile1.txt

        try {
            order = DT_ORDER_BY;
        } catch(e) {
            order = [0, "asc"];
        }

        var editor = new $.fn.dataTable.Editor( {
            ajax:  '/api/staff',
            table: '#listing',
            fields: [
                { label: 'First name', name: 'd1' },
                { label: 'First name', name: 'd2' },
                { label: 'First name', name: 'd3' },
                { label: 'First name', name: 'd4' },
                { label: 'First name', name: 'd5' },
                { label: 'First name', name: 'd6' },
                { label: 'First name', name: 'd7' },
                { label: 'First name', name: 'd8' },
            ]
        } );

        $('#listing').each(function() {

            var thead = $(this).find('thead');
            var tfoot = $(this).find('tfoot');
            if (!tfoot.length && thead.length) {
                var html = thead.wrap('<p/>').parent().html();
                html = html.replace('thead', 'tfoot');
                $(html).appendTo($(this));
            }
        });

        $('#listing tfoot th').each( function (i) {
        var title = $(this).text();
            $(this).html( '<input type="text" placeholder="'+title+'" data-index="'+i+'" />' );
        });
        

        var table = $('#listing').DataTable({
            columnDefs: [ {
                targets: 'no-sort',
                orderable: false,
            } ],
            pageLength: 10,
            autoWidth: false,
            initComplete: function(settings, json) {
                $('#listing').show();
            },
            order: order,
            aLengthMenu: [10, 25, 50, 100, 250, 500, 750, 1000, 2000, 3000],
            dom: 'Bfrtip',
            select: true,
            columns: [
                { data: 'd1' },
                { data: 'd2' },
                { data: 'd3' },
                { data: 'd4' },
                { data: 'd5' },
                { data: 'd6' },
                { data: 'd7' },
                { data: 'd8' },
            ],
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit',   editor: editor },
                { extend: 'remove', editor: editor }
            ],
        });
        table.columns().every( function () {
            var that = this;
            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            } );
        });
});