Good Afternoon All;
I have a problem with the DataTables search boxes in my web app. I am a beginner using DataTables. When I adapted them to use in my web app it was in an earlier incarnation of DataTables, and I did not attempt to get very fancy with it. ( just added DataTables to my html tables in a plain vanilla fashion.) Later on I had others working on the project with extensive experience in datatables. When my users complained that they wanted the search criteria to persist when the user left the page and then returned to it one of theprogrammers experienced with DataTables carried out the fix by

 oTable = $('#RequirementsView').dataTable();

        var searchbox = $('#RequirementsView_filter input');
        searchbox.unbind();
        
        searchbox.bind('input', function (e) {
            var sURL = '@Url.Action("_indexPageSearch","Requirements")';
            sURL += '?reqDTfilter=' + this.value.toString();
            // $.get(sURL);    // send to server to store in session
            $.ajax({
                url: sURL,
                cache: false
            });


            oTable.fnFilter(this.value);    // apply filter to dt
            return;
        });

        oTable.fnFilter('@Model.reqDTfilter');

Later on a different developer was looking for a means to speed up the loading of the page. He did this by updating to a later version of DataTables, serializing the data into JSON and then setting oTable to use the serialized data using the DataTable api (i.e. DataTable vice dataTable) so that the code looked like this.

 var data = @Html.Raw(serializedData);


        var oTable = $('#RequirementsLightView').DataTable({
            'data': data,
            'columns': [
                {
                    'data': 'ReqNum',
                    'render': function (data, type, row) {
                        return '<a href="Requirements/RequirementSummary/' + row.ReqID + '">' + data + '</a>';
                    } 
                },
                { 'data': 'DoDIC' },
                { 'data': 'CC_Description' },
                { 'data': 'Quantity' },
                { 'data': 'PRQTY' },
                { 'data': 'CtrQty' },
                { 'data': 'TargetPRSendDate' },
                {
                    'data': null,
                    'render': function (data, type, row) {
                        return '<a href="Requirements/EditNew/' + row.ReqID + '">Edit</a> | <a href="Requirements/Delete/' + row.ReqID + '">Delete</a>';
                    }
                }
            ],
            'deferRender': true
            });

Now the code to retain the search criteria looked like this.

        oTable.on('search.dt', function(){
            var sURL = '@Url.Action("_indexPageSearch","Requirements")';
            sURL += '?reqDTfilter=' + oTable.search();

            $.ajax({
                url: sURL,
                type: 'GET',
                cache: false,
                dataType: 'json'
                
            });
        });

        oTable.search('@Model.reqDTfilter');

But apparently the "search" method works differently than the fnFilter method, because upon page reload, the search criteria is still there but it is not applied until the user makes a change in the search box. I tried to use the fnFilter method, but it is not a valid method for the DataTable api object.

Is there a way to force the search to be applied to the data immediately upon reload.

Unfortunately I cannot provide a link to the page providing the issue because only internal people are allowed to connect to the server and I have nothing to operate as a web server.

I must be doing something incorrectly with the Data Tables Debugger because I was not able to paste the script into my browser's debugger.