web2py Grid Custom Search WITHOUT specifying a custom search_widget
The custom_search.html view contains the EASIER TO UNDERSTAND customization code. Here is the technique.
- Make the SQLFORM.grid’s Standard Search Input hidden.
- Define Custom Search Input elements with onchange events that send their values to the to the hidden Standard Search Input.
- Insert the Custom Search Input elements after the Standard Search Input (“#w2p_keywords”) using jQuery
.insertAfter()
.- This prevents them from showing up on Edit or View pages.
- Insert them in reverse order of them appearing on the page.
You can find an older version of this on web2pyslices.com
Here is the Controller code. Note the absence of a custom search_widget
argument in the grid function call.
# in default.py Controller def custom_search(): ''' Implements SQLFORM.grid custom search WITHOUT specifying a custom search_widget, and so needing to read & understand the clever web2py implementation source code. The custom_search.html view contains the EASIER TO UNDERSTAND customization code. The technique: 1. Make the grid's Standard Search Input hidden. 2. Define Custom Search Input elements with onchange events that send their values to the to the hidden Standard Search Input. ''' query=((db.contact.id > 0)) fields = (db.contact.id, db.contact.l_name, db.contact.f_name, db.contact.prime_phone, db.contact.date_modified, ) headers = {'contact.id': 'ID', 'contact.l_name': 'Last Name', 'contact.f_name': 'First Name', 'contact.prime_phone': 'Primary Phone', 'contact.date_modified': 'Info Last Updated', } init_sort_order=[db.contact.l_name] grid = SQLFORM.grid(query=query, fields=fields, headers=headers, orderby=init_sort_order, searchable=True, user_signature=False, create=True, deletable=False, editable=True, maxtextlength=100, paginate=25) return dict(grid=grid)
Here is the View code.
<!-- In custom_search.html view --> {{extend 'layout.html'}} {{block head}} {{super}} <script> function phoneSrch(){ var srch ='contact.prime_phone contains '+'"'+jQuery('#joephone').val()+'"'; $("#w2p_keywords").val(srch); } function lnameSrch(){ var srch ='contact.l_name starts with '+'"'+jQuery('#joelname').val()+'"'; $("#w2p_keywords").val(srch); } $(document).ready(function(){ // Make the Grid Standard Search Input hidden $("#w2p_keywords").prop("type", "hidden"); // Insert the Custom Search Input elements after // the Standard Search Input ("#w2p_keywords") // using jQuery .insertAfter(). // This prevents them from showing up on Edit or View pages. // Insert them in reverse order of them appearing on the page. var input2Str = '<div class="joeinputclass" style="padding-bottom:10px;" >'; input2Str += '<span class="joelabelclass" >Primary Phone contains: '; input2Str += '</span><input name="joephone" id="joephone" type="text" '; input2Str += 'onchange="phoneSrch()" style="width:150px;" ><br/></div>'; $(input2Str).insertAfter("#w2p_keywords"); var input1Str = '<div class="joeinputclass" style="padding-bottom:10px;">'; input1Str += '<span class="joelabelclass" style="padding-right:18px;" >'; input1Str += 'Last Name starts with: </span><input name="joelname" '; input1Str += 'id="joelname" type="text" onchange="lnameSrch()" '; input1Str += 'style="width:150px;" ></div>'; $(input1Str).insertAfter("#w2p_keywords"); }); </script> {{end}} <h2>Contacts</h2> <div id="theweb2pygrid"> {{=grid}} </div>