DataTables Configuration

datatables.js

var table = $('#new-incident-table').on('preXhr.dt', function ( e, settings, data ) {
            sData = data;
          } ).DataTable({
            stateSave: true,
            order: [[3, 'asc'],[0,'desc']],
            responsive: true,
            ajax: {
                url: "{% url 'ajax_datatable' %}",
                contentType: "application/json",
                type: "POST"
            },
            paging: true,
            columns: [
                {data: 'project_code'}, //0
                {data: 'name'},         //1
                {data: 'manager__user'},//2
                {data: 'status__name'}, //3
                {data: 'status__group'},//4
                {data: 'status__order'},//5
                {data: 'phase__name'},  //6
                {data: 'phase__order'}, //7
                {data: 'sector'},       //8
                {data: 'company_size'}, //9
                {                       //10
                    data: 'tlp_code',
                    render: function(data, type, row) {
                        let color = ''
                        if(data == 'TLP:AMBER+STRICT') {
                            color = 'AMBER'
                        } else {
                            color = data.replace('TLP:','');
                        }

                        return `<span class="TLP TLP_${color}">${data}</span>`
                    }
                },
                {data: 'country'},  //11
                {data: 'started_on'}//12
            ],
            rowCallback: function(row, data) {
                $(row).attr('data-url', "/incidents/" + data.pk);
                $(row).addClass('fake-link');
            },
            columnDefs: [
                {
                    searchPanes: {
                        show: true
                    },
                    targets: [2,3,4,6,8,9,10,11]
                },
                {
                    searchPanes: {
                        show: false
                    },
                    targets: [1,5,7,12]
                },
                {
                    targets: [4,5,7,8,9,11],
                    visible: false
                },
                {
                    orderData: [5],
                    target: 3
                },
                {
                    orderData: [7],
                    target: 6
                }
            ],
            searchPanes: {
                layout: 'columns-4',
                cascadePanes: true,
                initCollapsed: true,
                orderable: false,
                dtOpts: {
                    searching: true,
                },
            },
            dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"frtip>>',
            deferRender: true,
            processing: true,
            serverSide: true,
            stateLoadParams(settings, data) {
                data.searchPanes.panes.splice(0);
            },
            search: {
                return: true
            },
            language: {
                search: "Name Search:"
            }
        });