Search Issue while server side processing in datatable

Manoj Sawan

Whenever I search a text by typing slowly in the global search box or column search box the search works fine, but if I type fast then the server gives me error 404

is this a known issue ??

Below is my datatable code, I have been searching for fix but havent got any, please someone help

$('#workflow-table').DataTable({
processing: true,
serverSide: true,
pageLength: 5,
deferRender: true,
lengthMenu: [5, 10, 25, 50, 100],
ajax: {
url: ${context}/user/reviews/queried/${userId}/${tenantId},
data: function (data) {
}
},
columns: [
{"data": "workflow", "name": "workflow_name"},
{"data": "workflowType", "name": "workflow_for"},
{"data": "startTime", "name": "start_time"},
{"data": "endTime", "name": "expiration_time"},
{"data": "progress", "name": "percent"}
],
columnDefs: [{
"targets": [2, 3, 4],
"orderable": false,
"searchable": false
}],
initComplete: function () {
this.api().columns().every(function (element, index) {
/*
* current column
* */
var column = this;

            /*
            * for workflow name
            *
            * */
            if (element === 0) {
                var placeHolder = column.footer().innerText;
                $('<input type="text" class="custom-control search-inputs"  placeholder="' + placeHolder + '"/>')
                    .appendTo($(column.footer()).empty())
                    .on('keyup change clear', function () {
                        if (column.search() !== this.value) {
                            column.search(this.value).draw();
                        }
                    });
            }

            /*
            * if it is the 2 column(1 index wise)
            * then true as dropdown is required for
            * workflow type
            * */
            if (element === 1) {

                /*
                * container structure
                * */
                var dropdown = $('<div id="work-type-dropdown" ' +
                    'class="selection ui dropdown search-inputs" tabindex="0">' +
                    '<i class="dropdown icon"></i>' +
                    '<div class="text fixed">All</div>' +
                    '<div class="menu transition" tabindex="-1" ></div></div>');

                /*
                * appending the dropdown container to datatable footer of workflow table
                * */
                dropdown.appendTo($(column.footer()).empty()).on('click', function () {
                    $(this).toggleClass('active visible');
                    $(this).find('.menu').toggleClass('hidden visible');
                });

                $('<div class="item" data-value="All">All</div>')
                    .appendTo(dropdown.find('.menu')).on('click', function () {

                    /*
                    *assign click event for All option, and clearing any regex
                    * */
                    var searchText = $.fn.dataTable.util.escapeRegex($(this).attr('data-value'));
                    changeOnClick(searchText);
                    column.search(searchText ? searchText : '', true, false).draw();
                });

                /*
                * sorting and getting all the unique data from each column
                * and appending it to the workflow type dropdown
                *
                * */
                column.data().unique().sort().each(function (data, j) {

                    /*
                    * assigning click events to all elements with item class
                    * which will be acting as our dropdown
                    * */
                    $('<div class="item" data-value="' + data + '">' + data + '</div>')
                        .appendTo(dropdown.find('.menu'))
                        .on('click', function () {
                            var searchText = $.fn.dataTable.util.escapeRegex($(this).attr('data-value'));

                            /*
                            * on click of child menu shows
                            * the currently selected text as active
                            * */
                            changeOnClick(searchText);

                            /*
                            * directs the datatable to search the currently selected value
                            * */
                            column.search(searchText ? searchText : '', true, false).draw();
                        });
                });
            }
        });
    },
    rowCallback: function (row, data) {
        var lastTd = row.lastChild;
        var progress = parseInt(lastTd.innerText);
        lastTd.innerText = '';

        /*
        * setting basic attributes required for redirection
        * to specific controllers
        * */
        lastTd.setAttribute("view-type", data['viewType']);
        lastTd.setAttribute("workflow-type", data['workflowType']);
        lastTd.setAttribute("camp-id", data['campaignId']);

        /*
        * classes to change progress
        * style as per current progress percentage
        * */
        var progressClass = "bg-success";
        if (progress < 50)
            progressClass = "bg-danger";
        else if (progress > 70)
            progressClass = "bg-warning";

        var progressText = "progress-white";
        if (progress === 0)
            progressText = "progress-black";

        /*
        * appending the progress bar after row creation,
        * as row creation can be dynamic in case of searching
        * sorting and pagination
        *
        * */
        var progressBar = $(' <div class="progress">' +
            ' <div class="progress-bar ' + progressText + ' progress-bar-striped ' + progressClass + ' "' +
            ' role="progressbar" ' +
            ' style="width: ' + progress + '%"' +
            ' aria-valuenow="' + progress + '" aria-valuemin="0"' +
            ' aria-valuemax="100">' + progress + '%</div>' +
            ' </div>');

        progressBar.appendTo($(lastTd));
    }
});

rf1234

Duplicate of this thread:
https://datatables.net/forums/discussion/62368/i-have-a-unusual-issue-while-i-perform-a-search-operation-by-typing-slowly-the-results-are-fine