You can even externalize search fields without ever using phpGrid’s integrated or advanced search feature. It’s more work but you have the liberal to put the search box anywhere on the page.
This feature requires no PHP, only a little bit of HTML and Javascript. The filters are sent to server side via AJAX. It then reloads grid with filtered data without refreshing the entire page.
Below code snippet using “orders” table from the previous integrated search example.
HTML:
1 2 3 4 5 6 7 | <fieldset id="SearchPanel"><legend>Search</legend>Status <input id="status" type="text" placeholder="Enter status" /> <select id="op"> <option value="AND">AND</option> <option value="OR">OR</option> </select> Customer # <input id="customerNumber" type="text" placeholder="Enter customer number" /> <button id="searchbtn"> Search</button></fieldset> |
JavaScript:
1 2 3 4 5 6 7 8 9 10 11 | function searchGrid(){ phpGrid_orders.setGridParam({ postData: { filters:'{"groupOp":" '+ $("#op").val() +' ","rules":['+ '{"field":"status","op":"cn","data":"' + $("#status").val() +'"}'+ ',{"field":"customerNumber","op":"cn","data":"'+ $("#customerNumber").val() +'"}]}' }, "search":true, page:1 }).trigger("reloadGrid"); } |
The search operan can have one of the following values:
- eq: Equals
- ne: Not Equals
- lt: Less than
- le: Less than or Equal
- gt: Greater than
- ge: Greater than or Equal
- cn: Contains
- nc: Does not Contain
- bw: Begins With
- bn: Not Begins With
- ew: Ends With
- en: Not Ends With