Default global search

Default global search

asemberengasembereng Posts: 1Questions: 1Answers: 0

I am currently working on displaying records using datatables. By default, I want to display only records that match a certain criteria using regex search with an OR logic. I am able to achieve the desired records to be displayed. I want the user to be able to search for records that are not being displayed, records such as expired, rejected or another status. For example, if the user enters the status "expired" on the search textbox, all records in column(2) with the string expired will be displayed. When the search textbox is cleared, the user will only see records matching column(2) with status "In Progress" and "Approved".
How can this be achieved using datatables.

table = $('#report').DataTable({
                select: {
                    style: "single",
                    info: "false",
                    selector: "td:nth-of-type(10)"
                },
                language: {
                    searchPlaceholder: "Permit #,Contractor,..."
                },
                "search": ({regex: true}),
                 "dom": '<"top"flp<"clear">>rt<"bottom"<"clear">>',
                 "processing": false,
                 "serverSide": false,
                 "deferRender": false,
                 "order": [[ 1, "desc" ]],
                "ajax": {
                  "url" : PTWApp.getSitePrefix() + "/WorkPermits?skip=0&take=9999&pageSize=9999&filter[logic]=or&filter[filters][0][status]=1",
                  "dataSrc": function(json) {
                    return json.data;
                    }
                  },
                  "columnDefs": [
                  ],
                  columns: [
                    {"data": "Id", orderable:false, "searchable":false, "render": function(id,type,row,meta) {
                    var url = window.location.origin + "/ptw/Content/WorkPermit.aspx?pid=" + id;
                        return '<button><a href="' + url +'">'+ gridDefaultActionName +'</a></button>';
                        }, "name": "Status", "title": ""},
                    { "data": "Id", "name": "Id", "title": "Permit #"},
                    { "data": "Status", "render": function(status,type,row,meta) {return addStatusImg(status)}, "name": "Status", "title": "Status"},
                    { "data": "StartDate", "searchable":false, "render": function (startDate,type,row,meta) { return PTWApp.ConvertDate(startDate)}, "name": "StartDate", "title": "Start Date"},
                    { "data": "EndDate","searchable":false, "render": function (endDate,type,row,meta) { return PTWApp.ConvertDate(endDate)}, "name": "EndDate", "title": "End Date"},
                    { "data": "ContractorName", "name":"ContractorName", "title" : "Contractor" },
                    { "data": "ContractorSupervisorName", "name": "ContractorSupervisorName", "title": "Supervisor"},
                    { "data": "ContractorSupervisorPhone", "searchable":false, "render": function (ContractorSupervisorPhone,type,row,meta){return formatPhone(ContractorSupervisorPhone)},"name": "ContractorSupervisorPhone", "title": "Phone #"},
                    { "data": "RequestedBy","searchable":false, "name": "RequestedBy", "title": "Requester"},
                    { "data": "Status","searchable":false, "render": function (status,type,row,meta){ return addFileImg(status)}, "name": "files", "title": "Files"},
                    { "data": "IsEvent","searchable":false, "render":function (IsEvent,type,row,meta) {return addEventImg(IsEvent)},  "name": "IsEvents", "title": "Events"},
                    { "data": "Description", "name":"Description", "title":"Work Description"}
                  ],
                  
                  "stateSave": true
            }).column(2).search("In Progress|Approved", true, false ).draw();

Answers

  • kthorngrenkthorngren Posts: 21,166Questions: 26Answers: 4,921

    I would look at using a search plugin for this. Here is an example that may help you get started.
    http://live.datatables.net/rosahuka/1/edit

    Its not exactly what you are asking for but the keys are it uses draw() when the input changes to run the plugin. The plugin checks the inputs to determine what to filter. In your case you would look at the search input value and if empty return true for all rows except those with "expired".

    Kevin

This discussion has been closed.