mason/search/people.mas

   1
   2 <%args>
   3
   4 </%args>
   5
   6 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables' ] &>
   7
   8 <& /page/page_title.mas, title=>'Search People' &>
   9
  10 <div class="row" id="people_search_form" >
  11   <div class="col-sm-1">
  12   </div>
  13   <div class="col-sm-10 well">
  14     <div class="row">
  15
  16   <div class="col-sm-6">
  17     <div class="form-horizontal">
  18       <div class="form-group">
  19         <label class="col-sm-6 control-label">Last Name: </label>
  20         <div class="col-sm-6" >
  21           <input type="text" class="form-control" id="last_name" />
  22         </div>
  23       </div>
  24       <div class="form-group">
  25         <label class="col-sm-6 control-label">First Name: </label>
  26         <div class="col-sm-6" >
  27           <input type="text" class="form-control" id="first_name" />
  28         </div>
  29       </div>
  30     </div>
  31   </div>
  32   <div class="col-sm-6">
  33     <div class="form-horizontal">
  34       <div class="form-group">
  35         <label class="col-sm-6 control-label">Organization: </label>
  36         <div class="col-sm-6" >
  37           <input type="text" class="form-control" id="organization" />
  38         </div>
  39       </div>
  40       <div class="form-group">
  41         <label class="col-sm-6 control-label">Country: </label>
  42         <div class="col-sm-6" >
  43           <input type="text" class="form-control" id="country" />
  44         </div>
  45       </div>
  46     </div>
  47   </div>
  48   <center>
  49     <button class="btn btn-primary" id="submit_people_search" >Search</button>
  50   </center>
  51
  52     </div>
  53   </div>
  54   <div class="col-sm-1">
  55   </div>
  56 </div>
  57
  58 <!--
  59 <div id="people_search_form">
  60 <table width="100%">
  61 <tr><td><label for="last_name">Last name</label></td>
  62 <td><input id="last_name" /><br /></td><td><label for="first_name">First name</label></td><td><input id="first_name" /><br /></td></tr>
  63 <tr><td><label for="organization">Organization</label></td><td><input id="organization" /><br /></td><td><label for="country">Country</label></td><td><input id="country" /><br /></td></tr>
  64 <tr><td colspan="4" align="right">
  65 <button id="submit_people_search" >Search</button>
  66 </td></tr></table>
  67 </div>
  68 -->
  69
  70 <br /><br />
  71
  72 <table id="people_search_results" class="display">
  73 <thead>
  74   <tr>
  75     <th>Last name</th>
  76     <th>First name</th>
  77     <th>Organization</th>
  78     <th>Country</th>
  79 </tr>
  80 </thead>
  81
  82 </table>
  83
  84 <link rel="stylesheet" type="text/css" href="/documents/inc/datatables/jquery.dataTables.css">
  85
  86
  87
  88 <script>
  89
  90 jQuery(document).ready(function () {
  91
  92    var table = jQuery('#people_search_results').DataTable( {
  93
  94      'searching' : false,
  95      'ordering'  : false,
  96      'processing': true,
  97      'serverSide': true,
  98      'ajax': { 'url':  '/ajax/search/people',
  99                'data': function(d) {
 100                   d.first_name = jQuery('#first_name').val();
 101                   d.last_name  = jQuery('#last_name').val();
 102                   d.organization = jQuery('#organization').val();
 103                   d.country = jQuery('#country').val();
 104              }
 105          }
 106      });
 107
 108
 109    jQuery('#submit_people_search').click( function() {
 110        table.search("").draw();
 111    });
 112
 113
 114
 115    jQuery('#people_search_form').keypress( function( e ) {
 116      var code = e.keyCode || e.which;
 117
 118      if( code === 13 ) {
 119          jQuery('#submit_people_search').click();
 120      }
 121    });
 122 });
 123
 124
 125
 126
 127 </script>
 128