searchBuilder Predefined with Ajax fires twice

SamAnson123

Hello,

I am currently making use of the searchBuilder extension with my DataTable with has its data loaded via AJAX and has serverSide processing enabled. I am trying to set a predefined search using the predefined search option and this works successfully. The issue I am having however is this fires an ajax request twice on load, once without the predefined search applied and then again with the search applied. I am trying to reduce unnecessary requests on the server so this isn't ideal.

I have got round the issue by applying deferLoading: 0 (the 0 gets replaced anyway by the second draw which effectively becomes my only draw) however I understand this option is deprecated and will be removed eventually so I was wondering if there was a better way of going around this. I tried applying the search criteria to the prexhr event so it sends it on the first draw and then blocking the second draw however this seemed a more tedious patch fix than the deferLoading option so I removed it.

Just for background on my application, this is an MVC razor application where I have also applied some server-side rendering to the initialisation of my DataTable.

function setTable() {
        if (!$.fn.DataTable.isDataTable('#editTable')) {
            $('#editTable').DataTable({
                dom: 'Ql<"toolbar ml-1 mt-2 mb-2">Brtip',
                paging: true,
                processing: true,
                scrollX: true,
                serverSide: true,
                searchBuilder: true,
                deferLoading: 0,
                language: {
                    searchBuilder: {
                        title: '<span class="blue-text" style="font-size:150%;">Search - (%d)</span>'
                    }
                },
                searchBuilder: {
                    preDefined: {
                        criteria: [
                            {
                                data: "Active",
                                condition: "=",
                                value: [1],
                                type: "num"
                            }
                        ]
                    }
                },
                buttons: [
                    {
                        text: '<i class="fas fa-plus-square"></i> Insert Record',
                        attr: {
                            class: 'btn btn-primary ml-3',
                            id: 'newRecord'
                        }
                    }
                ],
                ajax: {
                    url: "@Url.Action("GetTableData", "Table")",
                    type: "POST",
                    data: function (d) {
                        d.Database = $('#databaseName').val();
                        d.TableName = $('#tableName').val();
                        d.Schema = $('#SchemaName').val();
                        d.Server = $('#serverName').val();
                    }
                },
                columns: [
                    @foreach (DTO.SelectedTableColumns s in Model.TableColumns)
                    {
                        <text>
                        {
                            data: "@s.ColumnName",
                            @if (Model.primaryKeyNames.Contains(s.ColumnName))
                            {
                            <text>
                            render: function (data, type, row, meta) {
                                return '<input type="hidden" value='+ data +' />' + data
                            },
                            </text>
                            }
                            else if (s.DataType == "bit")
                            {
                            <text>
                            render: function (data, type, row, meta) {
                                if (data == true) {
                                    return 1
                                }
                                else if (data == false) {
                                    return 0
                                }
                                else {
                                    return "NULL"
                                }
                            },
                            </text>
                            }
                            type: "@(s.DataType == "int" || s.DataType == "bit" ? "html-num" : s.DataType == "date" || s.DataType == "datetime" ? "date" : "string")",
                        },
                        </text>
                    }
                ],
                drawCallback: function () {
                    $('td:contains("NULL")').addClass('nullTD')
                },
                initComplete: function () {
                    $('.toolbar').text('@Model.tableName')
                    $('.toolbar').css('display', 'inline-block')
                },
                columnDefs: [
                    {
                        targets: '_all',
                        defaultContent: "NULL"
                    }
                ]
            })
        }
        else {
            $("#editTable").DataTable().ajax.reload()
        }
    }

Many thanks,
Sam