Description of problem: When I was trying to use the data tables default serach available on the top-right corner for the plugin fnFilterOnReturn I'm unable to get any results

$(document).ready(function () {
            $("#ddlJobId").select2();
            $("#ProjectId").select2();
            $("#JobStatusId").select2();
            $("#EmployeeId").select2();          
            $('#refreshbtn').click(function () {
                location.reload();
            $('#TableJobs').dataTable().fnFilterOnReturn();
            });$('#TableJobs').dataTable().fnFilterOnReturn();
            });

            var jobsTable = $('#TableJobs').DataTable({
                "lengthMenu": [20, 40, 60, 100],
                "pageLength": 20,
                "processing":true,
                "serverSide": true,
                "filter": true,
                "language": {
                    "infoFiltered": "",
                    "processing": "<i class='fa fa-cog fa-spin fa-4x fa-fw'></i> <br/> Loading...." //"<i class='fa fa-refresh fa-spin'></i>" 
                },
                "ajax": {
                    "url":'@Url.Action("DashboardJobs", "Home")',
                    "type": "POST",
                    "datatype": "json"
                },
                "columnDefs": [{
                    "targets": [0],
                    "visible": false,
                    "searchable": false
                }],
                "columns": [
                    //<td> "EditJob", "EditJob", new { id = x.JobNo }, null) </td>
                    { "data": "id", "name": "id", "autoWidth": true },
                    {
                        "data": "jobNo", "name": "jobNo", "autoWidth": true, "type": "string",
                        render: function (data,type,job) {
                            return "<a href='../EditJob/EditJob/" + job.jobNo + "'>" + job.jobNo + "</a>";

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide