adding pagination to the search results, changing the layout of the initial search
authorAnthony Talarico <talarico@gaslightmedia.com>
Mon, 13 Mar 2017 17:00:30 +0000 (13:00 -0400)
committerAnthony Talarico <talarico@gaslightmedia.com>
Mon, 13 Mar 2017 17:00:30 +0000 (13:00 -0400)
page

css/front.css
models/front/obits/search.php
views/front/obits/search.html
views/front/obits/searchResults.html

index 391503d..d3b4c95 100644 (file)
 }
 .search-container .results-limit-container {
   margin-bottom: 20px;
+    text-align: center;
+}
+.search-container .results-limit-container input:nth-child(2){
+    margin-left: 20px;
+}
+input.sidebar-criteria{
+    margin-left: 10px;
 }
 .detail-record{
     padding: 5px 0px;
-
 }
 .detail-label{
     font-weight: bold;
-    padding: 2px 0;
+    padding: 2px 10px;
 }
 
 .detail-value{
-  padding: 2px 0;
-   
+  padding: 2px 0; 
 }
 .detail-header{
     font-size: 24px;
     padding: 5px 0px;
     margin-bottom: 15px;
     text-align: center;
-}
-.detail-wrapper{
-  
 }
 .record-row:nth-child(even){
     background-color: #eeeeee;
 }
-
+.expand-collapse{
+    display: inline-block;
+    float:right;
+    color: #1d3961;
+}
+.expand-collapse:focus{
+    color: #1d3961;
+}
+.search-container .not-wrapper{
+    margin-top: 7px;
+}
+.search-input input, .search-input select{
+    max-width: 320px;
+}
+.search-input select{
+/*    max-width: 222px;*/
+}
+.search-container .not-input{
+    margin-top: 10px;
+}
+.logic-input{
+    max-width: 125px;
+}
+.search-container .search-btn-container{
+    margin: 0 auto;
+    width: 120px;
+    margin-top: 20px;
+}
+.footable-filter{
+    max-width: 250px;
+    float: left !important;
+}
+.glm-alpha-link, .detail-link{
+    color: #1d3961;
+}
\ No newline at end of file
index feedc16..8ac6f55 100644 (file)
@@ -97,26 +97,51 @@ class GlmMembersFront_obits_search extends GlmDataObits
         $view = 'search';
         
         $sql = "SELECT * FROM $this->table";
-//        $sql_where = "SELECT * FROM $this->table WHERE ";
         
         $year_ranges        = new glmObitSupportFunctions($this->wpdb, $this->config);
         $birth_death_range  = array('birth' => $year_ranges->getObitYearRange(BIRTH_YEAR_START), 'death' => $year_ranges->getObitYearRange(DEATH_YEAR_START));
         $logic_dropdown     = array('Contains' => 'LIKE' ,'Starts With' => 'LIKE%','Equals' => '=', 'More than' => '>', 'Less than' => '<');
         
-        $per_page   = isset( $_REQUEST['results-limit']) ? (int)filter_var( $_REQUEST['results-limit'], FILTER_SANITIZE_STRING) : 20;
-
+        $per_page   = isset( $_REQUEST['results-limit']) ? (int)filter_var( $_REQUEST['results-limit'], FILTER_SANITIZE_STRING) : 50;
+//        echo "PER PAGE:" . $per_page;
+        
         $form_data = $_POST;
+
+        // build array of potential search fields , will be used in the paging urls
+        $form_fields = array(
+            'last'          => filter_var($form_data['last_name'],FILTER_SANITIZE_STRING), 
+            'first'         => filter_var($form_data['first_mid'],FILTER_SANITIZE_STRING), 
+            'b_yr'          => filter_var($form_data['b_year'],FILTER_SANITIZE_STRING), 
+            'b_range'       => filter_var($form_data['b_yr_range'],FILTER_SANITIZE_STRING), 
+            'd_yr'          => filter_var($form_data['d_year'],FILTER_SANITIZE_STRING), 
+            'd_range'       => filter_var($form_data['d_yr_range'],FILTER_SANITIZE_STRING), 
+            'spouse'        => filter_var($form_data['spouse_partner'],FILTER_SANITIZE_STRING), 
+            'maiden'        => filter_var($form_data['maiden_other'],FILTER_SANITIZE_STRING)
+        );
         
+        $get_fields = array(
+            'last_name'         => filter_var($_GET['last'],FILTER_SANITIZE_STRING), 
+            'first_mid'         => filter_var($_GET['first'],FILTER_SANITIZE_STRING), 
+            'b_year'            => filter_var($_GET['b_yr'],FILTER_SANITIZE_STRING), 
+            'b_yr_range'        => filter_var($_GET['b_range'],FILTER_SANITIZE_STRING), 
+            'd_year'            => filter_var($_GET['d_yr'],FILTER_SANITIZE_STRING), 
+            'd_yr_range'        => filter_var($_GET['d_range'],FILTER_SANITIZE_STRING), 
+            'spouse_partner'    => filter_var($_GET['spouse'],FILTER_SANITIZE_STRING), 
+            'maiden_other'      => filter_var($_GET['maiden'],FILTER_SANITIZE_STRING)
+        );
+        // get the alpha key
         if ( isset( $_REQUEST['alpha'] ) ){
             $alpha_key = filter_var( $_REQUEST['alpha'], FILTER_SANITIZE_STRING );
         }
         
+        // create the any condition or all conditions query logic
         if( isset( $_REQUEST['conditions'] ) && $_REQUEST['conditions'][0] == 'any'){
             $clause = ' OR ';
         } else if ( isset( $_REQUEST['conditions'] ) && $_REQUEST['conditions'][0] == 'all') {
             $clause = ' AND ';
         }
 
+        // separate the search fields from the logic ('not', 'contains, 'equals') etc.
         foreach($form_data as $key=>$value){
             if (isset($value) && $value !== ''){
                 if( $value !== 'Search' && $key !== 'conditions' && $key !== 'results-limit'){
@@ -127,9 +152,28 @@ class GlmMembersFront_obits_search extends GlmDataObits
                         $search_options[$key] = $value;
                     }
                 } 
+            } else {
+                // populate an array for each empty search value
+                $empty_values[] = 'void';
             } 
         }
-   
+
+        // check to see if the GET query params search array is empty
+        foreach($get_fields as $key=>$val){
+            if( $val !== '' && isset($val)){
+                $get_values[$key] = $val;
+            }
+        }
+        
+        
+        // check to see if there are 8 empty values, if there are, there are no search values
+        if(count($empty_values) === 8){
+            $empty_search = 'true';
+        } else {
+            $empty_search = 'false';
+        }
+
+        // build the initial sql query based on the search fields populated
         foreach($search_fields as $field => $f){
 
             foreach($search_options as $option => $o){
@@ -156,18 +200,24 @@ class GlmMembersFront_obits_search extends GlmDataObits
         }
 
         $search = implode($clause, $search_fields);
-  
-//        $sql = "SELECT * FROM $this->table" .
-//        ( empty($search) ? " ORDER BY last_name ASC LIMIT 100" : " WHERE $search ORDER BY last_name ASC LIMIT 100");
-
-        if( empty($search) && empty( $alpha_key) ){
+   
+        // check the GET variables for sql queries with paging
+        if( empty( $search ) && empty( $alpha_key) && empty($get_values) ){
             $where = "";
         } else if( !empty( $alpha_key ) ) {
             $where = "last_name LIKE '$alpha_key%'";
-        } else {
+            
+        } else if( !empty( $get_values ) ){
+            foreach($get_values as $key=>$value){
+                if($value !== ''){
+                     $where .= "$key LIKE '%$value%' AND ";
+                }
+            }
+            $where = substr($where, 0, -5);
+        }else {
              $where = $search;
         }
-
+  
         if (isset($_REQUEST['pageSelect'])) {
 
             // If request is for Next
@@ -185,7 +235,8 @@ class GlmMembersFront_obits_search extends GlmDataObits
         }
         
         $obits = $this->getList($where, 'last_name', $fieldVals = true, $idField = 'id', $start, $per_page);
-
+//        echo '<pre>', print_r($obits), '</pre>';
+        $returned = $obits['returned'];
         // Get paging results
         $numbDisplayed = $obits['returned'];
  
@@ -202,9 +253,13 @@ class GlmMembersFront_obits_search extends GlmDataObits
         if ($obits['returned'] == $per_page) {
             $nextStart = $start + $per_page;
         }
-//        print_r($obits['list']);
+
+        if( empty( $where ) ){
+            $get_rows = "SELECT COUNT(*) FROM $this->table";
+        } else {
+            $get_rows = "SELECT COUNT(*) FROM $this->table WHERE $where";
+        }
         
-        $get_rows = "SELECT COUNT(*) FROM $this->table";
         
         $rows = $this->wpdb->get_results($get_rows, 'ARRAY_A');
         
@@ -231,14 +286,13 @@ class GlmMembersFront_obits_search extends GlmDataObits
         if( isset($_REQUEST['searchButton']) || isset( $_REQUEST['pageSelect'] ) || isset($_REQUEST['alpha'] ) ){
             $view = 'searchResults';
         }
-        
+
         // Compile template data
         $templateData = array(
             'birth_death_range' => $birth_death_range,
             'sql'               => $sql,
             'obits'             => $obits['list'],
             'logic'             => $logic_dropdown,
-            'pages'             => $pages,
             'per_page'          => $per_page,
             'numbDisplayed'     => $numbDisplayed,
             'lastDisplayed'     => $lastDisplayed,
@@ -248,8 +302,12 @@ class GlmMembersFront_obits_search extends GlmDataObits
             'start'             => $start,
             'limit'             => $per_page,
             'total'             => $total_records,
+            'returned'          => $returned,
             'alphaList'         => $alphaList,
-            'alpha_key'         => $alpha_key
+            'alpha_key'         => $alpha_key,
+            'search'            => $form_fields,
+            'get_params'        => $get_fields,
+            'empty_search'      => $empty_search
 
         );
              // Return status, any suggested view, and any data to controller
index c2b913f..7899375 100644 (file)
@@ -5,97 +5,90 @@
            <div class="results-limit-container">
                 <input type="radio" checked value="all" name="conditions[]">All Conditions
                 <input type="radio" value="any" name="conditions[]">Any Condition
-
-                <label class="search-results-label" for="results-limit">Results per page</label>
-                <select id="results-limit" class="results-limit" name="results-limit">
-                    <option value="10">10</option>
-                    <option value="20">20</option>
-                    <option value="30">30</option>
-                    <option value="50">50</option>
-                    <option value="100">100</option>
-                    <option value="500">500</option>
-                </select>
            </div>
 
             <div class="row search-row">
-                <div class="small-12 medium-4 large-3 columns search-label"> 
+                <div class="small-12 medium-4 large-3 columns search-label hide"> 
                     Last Name: 
                 </div>
-                <div class="small-3 medium-2 columns">
+                <div class="small-3 medium-2 large-1 large-offset-2 columns not-input">
                    <label for="not-last">Not</label>
                    <input type="checkbox" value="not" id="not-last" name="not-last_name">
                 </div>
-                <div class="small-4 medium-3 large-3 columns">
+                <div class="small-5 medium-3 large-3 columns end logic-input ">
                     <select name="last_name-logic" id="last_name-logic">
                         {foreach from=$logic key=k item=i}
                             <option value="{$i}">{$k}</option>
                         {/foreach}
                     </select>
                 </div>
-                <div class="small-12 medium-3 large-4 columns">
-                    <input type="text" name="last_name">
+                <div class="small-12 medium-6 large-4 columns end search-input">
+                    <input type="text" name="last_name" placeholder="Last Name">
                 </div>
             </div>
 
 
             <div class="row search-row">
-                <div class="small-12 medium-4 large-3 columns search-label">
+                <div class="small-12 medium-4 large-3 columns search-label hide">
                     First Name &amp; Middle: 
                 </div>
-                <div class="small-3 medium-2  columns">
+                
+                <div class="small-3 medium-2 large-1 large-offset-2 columns not-input">
                    <label for="not-first_mid">Not</label>
                    <input type="checkbox" value="not" id="not-first_mid" name="not-first_mid">
                 </div>
-                <div class="small-4 medium-3 large-3 columns">
+                <div class="small-5 medium-3 large-3 columns end logic-input ">
                     <select name="first_mid-logic" id="first_mid-logic">
                         {foreach from=$logic key=k item=i}
                             <option value="{$i}">{$k}</option>
                         {/foreach}
                     </select>
                 </div>
-                <div class="small-12 medium-3 large-4 columns">
-                    <input type="text" name="first_mid">
+                <div class="small-12 medium-6 large-4 columns end search-input">
+                    <input type="text" name="first_mid" placeholder="First Middle">
                 </div>
             </div>
 
 
             <div class="row search-row">
-               <div class="small-12 medium-4 large-3 columns search-label">
+               <div class="small-12 medium-4 large-3 columns search-label hide">
                     Birth Year: 
                 </div>
-                <div class="small-3 medium-2 columns">
+                
+                <div class="small-3 medium-2 large-1 large-offset-2 columns not-input">
                    <label for="not-b_year">Not</label>
                    <input type="checkbox" value="not" id="not-b_year" name="not-b_year">
                 </div>
-                <div class="small-4 medium-3 large-3 columns">
+                <div class="small-5 medium-3 large-3 columns end logic-input ">
                     <select name="b_year-logic" id="b_year-logic">
                         {foreach from=$logic key=k item=i}
                            <option value="{$i}">{$k}</option>
                         {/foreach}
                     </select>
                 </div>
-                <div class="small-12 medium-3 large-4 columns">
-                    <input type="text" name="b_year">
+                <div class="small-12 medium-6 large-4 columns end search-input">
+                    <input type="text" name="b_year" placeholder="Birth Year">
                 </div>
             </div>
 
 
             <div class="row search-row">
-                <div class="small-12 medium-4 large-3 columns search-label">
+                <div class="small-12 medium-4 large-3 columns search-label hide">
                     Birth Year Range:
                 </div>
-                <div class="small-3 medium-2  columns">
+                
+                <div class="small-3 medium-2 large-1 large-offset-2 columns not-input">
                    <label for="not-b_yr_range">Not</label>
                    <input type="checkbox" value="not" id="not-b_yr_range" name="not-b_yr_range">
                 </div>
-                <div class="small-4 medium-3 large-3 columns">
+                <div class="small-5 medium-3 large-3 columns end logic-input ">
                     <select name="b_yr_range-logic" id="b_yr_range-logic">
                          <option value="=">Equals</option>
                     </select>
                 </div>
-                <div class="small-12 medium-3 large-4 columns">
+                <div class="small-12 medium-6 large-4 columns end search-input">
                    <select name="b_yr_range" id="">
-                   <option value="">Select a date range</option>
+                   <option value="">Select Birth Year Range</option>
                     {foreach from=$birth_death_range.birth item=r}
                        <option value="{$r.start}">{$r.start} - {$r.end}</option>
                     {/foreach}
 
 
             <div class="row search-row">
-                <div class="small-12 medium-4 large-3 columns search-label">
+                <div class="small-12 medium-4 large-3 columns search-label hide">
                     Death Year: 
                 </div>
-                <div class="small-3 medium-2  columns">
+                
+                <div class="small-3 medium-2 large-1 large-offset-2 columns not-input">
                    <label for="not-death">Not</label>
                    <input type="checkbox" value="not" id="not-death" name="not-d_year">
                 </div>
-                <div class="small-4 medium-3 large-3 columns">
+                <div class="small-5 medium-3 large-3 columns end logic-input ">
                     <select name="d_year-logic" id="d_year-logic">
                         {foreach from=$logic key=k item=i}
                             <option value="{$i}">{$k}</option>
                         {/foreach}
                     </select>
                 </div>
-                <div class="small-12 medium-3 large-4 columns">
-                    <input type="text" name="d_year">
+                <div class="small-12 medium-6 large-4 columns end search-input">
+                    <input type="text" name="d_year" placeholder="Death Year">
                 </div>
             </div>
 
 
             <div class="row search-row">
-                <div class="small-12 medium-4 large-3 columns search-label">
+                <div class="small-12 medium-4 large-3 columns search-label hide">
                    Death Year Range: 
                 </div>
-                <div class="small-3 medium-2  columns">
+                
+                <div class="small-3 medium-2 large-1 large-offset-2 columns not-input">
                    <label for="not-d_yr_range">Not</label>
                    <input type="checkbox" value="not" id="not-d_yr_range" name="not-d_yr_range">
                 </div>
-                <div class="small-4 medium-3 large-3 columns">
+                <div class="small-5 medium-3 large-3 columns end logic-input ">
                     <select name="d_yr_range-logic" id="d_yr_range-logic">
                         <option value="=">Equals</option>
                     </select>
                 </div>
-                <div class="small-12 medium-3 large-4 columns">
+                <div class="small-12 medium-6 large-4 columns end search-input">
                     <select name="d_yr_range" id="d_yr_range-range">
-                    <option value="">Select a date range</option>
+                    <option value="">Select Death Year Range</option>
                     {foreach from=$birth_death_range.death item=r}
                        <option value="{$r.start}">{$r.start} - {$r.end}</option>
                     {/foreach}
 
 
             <div class="row search-row">
-                <div class="small-12 medium-4 large-3 columns search-label">
+                <div class="small-12 medium-4 large-3 columns search-label hide">
                     Maiden or Other Name:
                 </div>
-                <div class="small-3 medium-2  columns">
+                
+                <div class="small-3 medium-2 large-1 large-offset-2 columns not-input">
                    <label for="not-maiden_other">Not</label>
                    <input type="checkbox" value="not" id="not-maiden" name="not-maiden_other">
                 </div>
-                <div class="small-4 medium-3 large-3 columns">
+                <div class="small-5 medium-3 large-3 columns end logic-input ">
                     <select name="maiden_other-logic" id="maiden_other-logic">
                         {foreach from=$logic key=k item=i}
                             <option value="{$i}">{$k}</option>
                         {/foreach}
                     </select>
                 </div>
-                <div class="small-12 medium-3 large-4 columns">
-                    <input type="text" name="maiden_other">
+                <div class="small-12 medium-6 large-4 columns end search-input">
+                    <input type="text" name="maiden_other" placeholder="Maiden or Other Name">
                 </div>
             </div>
 
 
             <div class="row search-row">
-               <div class="small-12 medium-4 large-3 columns search-label">
+               <div class="small-12 medium-4 large-3 columns search-label hide">
                     Spouse / Partner Name:     
                 </div>
-                <div class="small-3 medium-2  columns">
-                   <label for="not-spouse_partner">Not</label>
+                <div class="small-3 medium-2 large-1 large-offset-2 columns not-input">
+                   <label for="not-spouse_partner not-input">Not</label>
                    <input type="checkbox" value="not" value="not" id="not-spouse" name="not-spouse_partner">
                 </div>
-                <div class="small-4 medium-3 large-3 columns">
+                <div class="small-5 medium-3 large-3 columns end logic-input ">
                     <select name="spouse_partner-logic" id="spouse_partner-logic">
                         {foreach from=$logic key=k item=i}
                             <option value="{$i}">{$k}</option>
                         {/foreach}
                     </select>
                 </div>
-                <div class="small-12 medium-3 large-4 columns">
-                    <input type="text" name="spouse_partner">
+                <div class="small-12 medium-6 large-4 columns end search-input">
+                    <input type="text" name="spouse_partner" placeholder="Spouse or Partner Name">
                 </div>
             </div>
-
-            <input id="input" class="search-button" name="searchButton" value="Search" type="submit">
+            <div class="search-btn-container">
+                <input id="input" class="search-button button" name="searchButton" value="Search" type="submit">
+            </div>
         </form>
     </div>
 </div>
index c91ecb2..fc16138 100644 (file)
 <div class="row">
     <form action="{$thisUrl}" method="post" enctype="multipart/form-data" name="obits-search" id="obits-search">
-        <div class="small-12 large-9 columns results-container">
-            <div class="glm-alpha-links">
-                {foreach $alphaList as $a}
-                    <a href="{$thisUrl}?alpha={$a.alpha}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&results-limit={$limit}" class="glm-alpha-link{if $a.default} glm-alpha-link-selected{/if}">{$a.alpha}</a>
-                {/foreach}
-            </div>
-            {if $paging}
-                <br>
-                <a href="{$thisUrl}?pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&results-limit={$limit}{if $alpha_key}&alpha={$alpha_key}{/if}" class="glm-alpha-link obits-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>Previous page</a>
-                <a href="{$thisUrl}?pageSelect=Next&prevStart={$prevStart}&nextStart={$nextStart}&results-limit={$limit}{if $alpha_key}&alpha={$alpha_key}{/if}" class="glm-alpha-link obits-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page</a>
-                <br>
-                showing {$start} through {$lastDisplayed} of {$total}
-            {/if}
-            <label class="search-results-label" for="results-limit">Results per page</label>
-            <select id="results-limit" class="results-limit" name="results-limit">
-                <option value="10">10</option>
-                <option value="20">20</option>
-                <option value="30">30</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-                <option value="500">500</option>
-            </select>
-           <table class="footable results-table" data-paging="false">
-             <thead>
-                  <tr>
-                    <th>Birth Year Range</th>
-                    <th>Death Year Range</th> 
-                    <th>Last Name</th>
-                    <th>First Name</th>
-                    <th>Birth Year</th>
-                    <th>Death Year</th>
-                    <th>Spouse</th>
-                    <th>Maiden Name</th>
-                  </tr>
-              </thead>
-                {foreach from=$obits item=i}
-                    <tr>
-                        <td>{$i.b_yr_range}</td>
-                        <td>{$i.d_yr_range}</td> 
-                        <td> <a href="{$thisUrl}/obits-detail/?obit={$i.id}" >{$i.last_name}</a> </td>
-                        <td>{$i.first_mid}</td>
-                        <td>{$i.b_year}</td>
-                        <td>{$i.d_year}</td>
-                        <td>{$i.spouse_partner}</td>
-                        <td>{$i.maiden_other}</td>
-                    </tr>
-                {/foreach}
-            </table>
-        </div>
-        <div class="small-12 medium-6 large-3 columns small-centered large-uncentered search-sidebar-container">
+       <div class="small-12 large-3 columns small-centered large-uncentered search-sidebar-container">
             <div class="search-sidebar">
     <!--            {include file='front/obits/search.html'}-->
                 <div class="search-container sidebar-container row">
                     <div class="small-12 columns">
-                        <form action="{$thisUrl}" method="post" enctype="multipart/form-data" name="obits-search" id="obits-search">
-                           <input class="sidebar-criteria" type="radio" checked value="all" name="conditions[]">All 
-                           <input class="sidebar-criteria" type="radio" value="any" name="conditions[]">Any 
-                           <a href="#" class="expand-collapse">Show Options</a>
-
-
-                            <div class="row search-row">
-                                <div class="small-12 columns search-label"> 
-                                    Last Name: 
+                       <input class="sidebar-criteria" type="radio" checked value="all" name="conditions[]">All 
+                       <input class="sidebar-criteria" type="radio" value="any" name="conditions[]">Any 
+                       <a href="#" class="expand-collapse">Show Options</a>
+                        <div class="row search-row">
+                            <div class="small-12 columns search-label hide "> 
+                                Last Name: 
+                            </div>
+                            <div class="options-wrapper">
+                                <div class="small-3 large-4 not-wrapper columns">
+                                   <label for="not-last">Not</label>
+                                   <input type="checkbox" value="not" id="not-last" name="not-last_name">
                                 </div>
-                                <div class="options-wrapper">
-                                    <div class="small-3 large-3 columns">
-                                       <label for="not-last">Not</label>
-                                       <input type="checkbox" value="not" id="not-last" name="not-last_name">
-                                    </div>
 
-                                    <div class="small-4 medium-3 large-6 columns">
-                                        <select name="last_name-logic" id="last_name-logic">
-                                            {foreach from=$logic key=k item=i}
-                                                <option value="{$i}">{$k}</option>
-                                            {/foreach}
-                                        </select>
-                                    </div>
-                                </div>
-                                <div class="small-12 columns">
-                                    <input type="text" name="last_name" placeholder="Last Name">
+                                <div class="small-4 medium-3 large-6 end columns ">
+                                    <select name="last_name-logic" id="last_name-logic">
+                                        {foreach from=$logic key=k item=i}
+                                            <option value="{$i}">{$k}</option>
+                                        {/foreach}
+                                    </select>
                                 </div>
                             </div>
+                            <div class="small-12 columns">
+                                <input {if $get_params.last}value="{$get_params.last}"{/if}{if $search.last}value="{$search.last}"{/if} type="text" name="last_name" placeholder="Last Name">
+                            </div>
+                        </div>
 
 
-                            <div class="row search-row">
-                                <div class="small-12 columns search-label"> 
-                                    First Name &amp; Middle: 
+                        <div class="row search-row">
+                            <div class="small-12 columns search-label hide "> 
+                                First Name &amp; Middle: 
+                            </div>
+                            <div class="options-wrapper">
+                                <div class="small-3 large-4 not-wrapper not-wrapper columns">
+                                   <label for="not-first_mid">Not</label>
+                                   <input type="checkbox" value="not" id="not-first_mid" name="not-first_mid">
                                 </div>
-                                <div class="options-wrapper">
-                                    <div class="small-3 large-3 columns">
-                                       <label for="not-first_mid">Not</label>
-                                       <input type="checkbox" value="not" id="not-first_mid" name="not-first_mid">
-                                    </div>
 
-                                    <div class="small-4 medium-3 large-6 columns">
-                                        <select name="first_mid-logic" id="first_mid-logic">
-                                            {foreach from=$logic key=k item=i}
-                                                <option value="{$i}">{$k}</option>
-                                            {/foreach}
-                                        </select>
-                                    </div>
-                               </div>     
-                               <div class="small-12 columns">
-                                   <input type="text" name="first_mid" placeholder="First - Middle Name">
+                                <div class="small-4 medium-3 large-6 end columns ">
+                                    <select name="first_mid-logic" id="first_mid-logic">
+                                        {foreach from=$logic key=k item=i}
+                                            <option value="{$i}">{$k}</option>
+                                        {/foreach}
+                                    </select>
                                 </div>
+                           </div>     
+                           <div class="small-12 columns">
+                               <input {if $get_params.first}value="{$get_params.first}"{/if}{if $search.first}value="{$search.first}"{/if} type="text" name="first_mid" placeholder="First - Middle Name">
                             </div>
+                        </div>
 
 
-                            <div class="row search-row">
-                                <div class="small-12 columns search-label"> 
-                                    Birth Year: 
+                        <div class="row search-row">
+                            <div class="small-12 columns search-label hide "> 
+                                Birth Year: 
+                            </div>
+                            <div class="options-wrapper">
+                                <div class="small-3 large-4 not-wrapper columns">
+                                   <label for="not-b_year">Not</label>
+                                   <input type="checkbox" value="not" id="not-b_year" name="not-b_year">
                                 </div>
-                                <div class="options-wrapper">
-                                    <div class="small-3 large-3 columns">
-                                       <label for="not-b_year">Not</label>
-                                       <input type="checkbox" value="not" id="not-b_year" name="not-b_year">
-                                    </div>
 
-                                    <div class="small-4 medium-3 large-6 columns">
-                                        <select name="b_year-logic" id="b_year-logic">
-                                            {foreach from=$logic key=k item=i}
-                                               <option value="{$i}">{$k}</option>
-                                            {/foreach}
-                                        </select>
-                                    </div>
-                                </div>
-                                <div class="small-12 columns">
-                                    <input type="text" name="b_year" placeholder="Year of Birth">
+                                <div class="small-4 medium-3 large-6 end columns ">
+                                    <select name="b_year-logic" id="b_year-logic">
+                                        {foreach from=$logic key=k item=i}
+                                           <option value="{$i}">{$k}</option>
+                                        {/foreach}
+                                    </select>
                                 </div>
                             </div>
+                            <div class="small-12 columns">
+                                <input {if $get_params.b_yr}value="{$get_params.b_yr}"{/if}{if $search.b_yr}value="{$search.b_yr}"{/if} type="text" name="b_year" placeholder="Year of Birth">
+                            </div>
+                        </div>
 
 
-                            <div class="row search-row">
-                                  <div class="small-12 columns search-label"> 
-                                    Birth Year Range:
+                        <div class="row search-row">
+                              <div class="small-12 columns search-label hide "> 
+                                Birth Year Range:
+                            </div>
+                            <div class="options-wrapper">
+                                <div class="small-3 large-4 not-wrapper columns">
+                                   <label for="not-b_yr_range">Not</label>
+                                   <input type="checkbox" value="not" id="not-b_yr_range" name="not-b_yr_range">
                                 </div>
-                                <div class="options-wrapper">
-                                    <div class="small-3 large-3 columns">
-                                       <label for="not-b_yr_range">Not</label>
-                                       <input type="checkbox" value="not" id="not-b_yr_range" name="not-b_yr_range">
-                                    </div>
 
-                                    <div class="small-4 medium-3 large-6 columns">
-                                        <select name="b_yr_range-logic" id="b_yr_range-logic">
-                                             <option value="=">Equals</option>
-                                        </select>
-                                    </div>
-                                </div>
-                                <div class="small-12 columns">
-                                   <select name="b_yr_range" id="">
-                                   <option value="">Select a date range</option>
-                                    {foreach from=$birth_death_range.birth item=r}
-                                       <option value="{$r.start}">{$r.start} - {$r.end}</option>
-                                    {/foreach}
+                                <div class="small-4 medium-3 large-6 end columns ">
+                                    <select name="b_yr_range-logic" id="b_yr_range-logic">
+                                         <option value="=">Equals</option>
                                     </select>
                                 </div>
                             </div>
+                            <div class="small-12 columns">
+                               <select name="b_yr_range" id="">
+                               <option value="">Select Birth Year Range</option>
+                                {foreach from=$birth_death_range.birth item=r}
+                                   <option value="{$r.start}">{$r.start} - {$r.end}</option>
+                                {/foreach}
+                                </select>
+                            </div>
+                        </div>
 
 
-                            <div class="row search-row">
-                                <div class="small-12 columns search-label"> 
-                                    Death Year: 
+                        <div class="row search-row">
+                            <div class="small-12 columns search-label hide "> 
+                                Death Year: 
+                            </div>
+                            <div class="options-wrapper">
+                                <div class="small-3 large-4 not-wrapper columns">
+                                   <label for="not-death">Not</label>
+                                   <input type="checkbox" value="not" id="not-death" name="not-d_year">
                                 </div>
-                                <div class="options-wrapper">
-                                    <div class="small-3 large-3 columns">
-                                       <label for="not-death">Not</label>
-                                       <input type="checkbox" value="not" id="not-death" name="not-d_year">
-                                    </div>
 
-                                    <div class="small-4 medium-3 large-6 columns">
-                                        <select name="d_year-logic" id="d_year-logic">
-                                            {foreach from=$logic key=k item=i}
-                                                <option value="{$i}">{$k}</option>
-                                            {/foreach}
-                                        </select>
-                                    </div>
-                                </div>    
-                               <div class="small-12 columns">
-                                    <input type="text" name="d_year" placeholder="Year of Death">
+                                <div class="small-4 medium-3 large-6 end columns">
+                                    <select name="d_year-logic" id="d_year-logic">
+                                        {foreach from=$logic key=k item=i}
+                                            <option value="{$i}">{$k}</option>
+                                        {/foreach}
+                                    </select>
                                 </div>
+                            </div>    
+                           <div class="small-12 columns">
+                                <input }{if $search.d_yr}value="{$search.d_yr}"{/if} type="text" name="d_year" placeholder="Year of Death">
                             </div>
+                        </div>
 
 
-                            <div class="row search-row">
-                                  <div class="small-12 columns search-label"> 
-                                   Death Year Range: 
+                        <div class="row search-row">
+                              <div class="small-12 columns search-label hide "> 
+                               Death Year Range: 
+                            </div>
+                            <div class="options-wrapper">
+                                <div class="small-3 large-4 not-wrapper columns">
+                                   <label for="not-d_yr_range">Not</label>
+                                   <input type="checkbox" value="not" id="not-d_yr_range" name="not-d_yr_range">
                                 </div>
-                                <div class="options-wrapper">
-                                    <div class="small-3 large-3 columns">
-                                       <label for="not-d_yr_range">Not</label>
-                                       <input type="checkbox" value="not" id="not-d_yr_range" name="not-d_yr_range">
-                                    </div>
 
-                                    <div class="small-4 medium-3 large-6 columns">
-                                        <select name="d_yr_range-logic" id="d_yr_range-logic">
-                                            <option value="=">Equals</option>
-                                        </select>
-                                    </div>
-                                </div>
-                                <div class="small-12 columns">
-                                    <select name="d_yr_range" id="d_yr_range-range">
-                                    <option value="">Select a date range</option>
-                                    {foreach from=$birth_death_range.death item=r}
-                                       <option value="{$r.start}">{$r.start} - {$r.end}</option>
-                                    {/foreach}
+                                <div class="small-4 medium-3 large-6 end columns ">
+                                    <select name="d_yr_range-logic" id="d_yr_range-logic">
+                                        <option value="=">Equals</option>
                                     </select>
                                 </div>
                             </div>
+                            <div class="small-12 columns">
+                                <select name="d_yr_range" id="d_yr_range-range">
+                                <option value="">Select Death Year Range</option>
+                                {foreach from=$birth_death_range.death item=r}
+                                   <option value="{$r.start}">{$r.start} - {$r.end}</option>
+                                {/foreach}
+                                </select>
+                            </div>
+                        </div>
 
 
-                            <div class="row search-row">
-                                 <div class="small-12 columns search-label"> 
-                                    Maiden or Other Name:
+                        <div class="row search-row">
+                             <div class="small-12 columns search-label hide "> 
+                                Maiden or Other Name:
+                            </div>
+                            <div class="options-wrapper">
+                                <div class="small-3 large-4 not-wrapper columns">
+                                   <label for="not-maiden_other">Not</label>
+                                   <input type="checkbox" value="not" id="not-maiden" name="not-maiden_other">
                                 </div>
-                                <div class="options-wrapper">
-                                    <div class="small-3 large-3 columns">
-                                       <label for="not-maiden_other">Not</label>
-                                       <input type="checkbox" value="not" id="not-maiden" name="not-maiden_other">
-                                    </div>
 
-                                    <div class="small-4 medium-3 large-6 columns">
-                                        <select name="maiden_other-logic" id="maiden_other-logic">
-                                            {foreach from=$logic key=k item=i}
-                                                <option value="{$i}">{$k}</option>
-                                            {/foreach}
-                                        </select>
-                                    </div>
-                                </div>
-                                <div class="small-12 columns">
-                                    <input type="text" name="maiden_other" placeholder="Maiden or Other">
+                                <div class="small-4 medium-3 large-6 end columns ">
+                                    <select name="maiden_other-logic" id="maiden_other-logic">
+                                        {foreach from=$logic key=k item=i}
+                                            <option value="{$i}">{$k}</option>
+                                        {/foreach}
+                                    </select>
                                 </div>
                             </div>
+                            <div class="small-12 columns">
+                                <input {if $search.maiden}value="{$search.maiden}"{/if} type="text" name="maiden_other" placeholder="Maiden or Other">
+                            </div>
+                        </div>
 
 
-                            <div class="row search-row">
-                                 <div class="small-12 columns search-label"> 
-                                    Spouse / Partner Name:     
+                        <div class="row search-row">
+                             <div class="small-12 columns search-label hide "> 
+                                Spouse / Partner Name: 
+                            </div>
+                            <div class="options-wrapper">
+                                <div class="small-3 large-4 not-wrapper columns">
+                                   <label for="not-spouse_partner">Not</label>
+                                   <input type="checkbox" value="not" value="not" id="not-spouse" name="not-spouse_partner">
                                 </div>
-                                <div class="options-wrapper">
-                                    <div class="small-3 large-3 columns">
-                                       <label for="not-spouse_partner">Not</label>
-                                       <input type="checkbox" value="not" value="not" id="not-spouse" name="not-spouse_partner">
-                                    </div>
 
-                                    <div class="small-4 medium-3 large-6 columns">
-                                        <select name="spouse_partner-logic" id="spouse_partner-logic">
-                                            {foreach from=$logic key=k item=i}
-                                                <option value="{$i}">{$k}</option>
-                                            {/foreach}
-                                        </select>
-                                    </div>
-                                </div>
-                                <div class="small-12 columns">
-                                    <input type="text" name="spouse_partner" placeholder="Spouse or Partner">
+                                <div class="small-4 medium-3 large-6 end columns ">
+                                    <select name="spouse_partner-logic" id="spouse_partner-logic">
+                                        {foreach from=$logic key=k item=i}
+                                            <option value="{$i}">{$k}</option>
+                                        {/foreach}
+                                    </select>
                                 </div>
                             </div>
-                            <input id="input" class="search-button" name="searchButton" value="Search" type="submit">
+                            <div class="small-12 columns">
+                                <input {if $get_params.spouse}value="{$get_params.spouse}"{/if}{if $search.spouse}value="{$search.spouse}"{/if} type="text" name="spouse_partner" placeholder="Spouse or Partner">
+                            </div>
+                        </div>
+                        <input id="input" class="search-button" name="searchButton" value="Search" type="submit">
                     </div>
                 </div>
             </div>
         </div>
+        <div class="small-12 large-9 columns results-container">
+            <div class="glm-alpha-links">
+                {foreach $alphaList as $a}
+                    <a href="{$thisUrl}?alpha={$a.alpha}&pageSelect=Previous&prevStart={$prevStart}&nextStart={$nextStart}&results-limit={$limit}" class="glm-alpha-link{if $a.default} glm-alpha-link-selected{/if}">{$a.alpha}</a>
+                {/foreach}
+            </div>
+            {if $paging}
+                <br>
+                <a href="{$thisUrl}?pageSelect=Previous&prevStart={$prevStart}{if $search.last}&last={$search.last}{/if}{if $search.first}&first={$search.first}{/if}{if $search.d_yr}&d_yr={$search.d_yr}{/if}{if $search.b_yr}&b_yr={$search.b_yr}{/if}{if $search.spouse}&spouse={$search.spouse}{/if}{if $search.maiden}maiden={$search.maiden}{/if}{if $search.b_range}&b_range={$search.b_range}{/if}{if $search.d_range}&d_range={$search.d_range}{/if}{if $get_params.last_name}&last={$get_params.last_name}{/if}{if $get_params.first_mid}&first={$get_params.first_mid}{/if}{if $get_params.d_year}&d_yr={$get_params.d_year}{/if}{if $get_params.b_year}&b_yr={$get_params.b_year}{/if}{if $get_params.spouse_partner}&spouse={$get_params.spouse_partner}{/if}{if $get_params.maiden_other}maiden={$get_params.maiden_other}{/if}{if $get_params.b_yr_range}&b_range={$get_params.b_yr_range}{/if}{if $get_params.d_yr_range}&d_range={$get_params.d_yr_range}{/if}&nextStart={$nextStart}&results-limit={$limit}{if $alpha_key}&alpha={$alpha_key}{/if}" class="glm-alpha-link obits-link" {if !$prevStart} style="pointer-events: none; opacity: 0.5;"{/if}>Previous page</a>
+                
+                <a href="{$thisUrl}?pageSelect=Next&prevStart={$prevStart}{if $search.last}&last={$search.last}{/if}{if $search.first}&first={$search.first}{/if}{if $search.d_yr}&d_yr={$search.d_yr}{/if}{if $search.b_yr}&b_yr={$search.b_yr}{/if}{if $search.spouse}&spouse={$search.spouse}{/if}{if $search.maiden}maiden={$search.maiden}{/if}{if $search.b_range}&b_range={$search.b_range}{/if}{if $search.d_range}&d_range={$search.d_range}{/if}{if $get_params.last_name}&last={$get_params.last_name}{/if}{if $get_params.first_mid}&first={$get_params.first_mid}{/if}{if $get_params.d_year}&d_yr={$get_params.d_year}{/if}{if $get_params.b_year}&b_yr={$get_params.b_year}{/if}{if $get_params.spouse_partner}&spouse={$get_params.spouse_partner}{/if}{if $get_params.maiden_other}maiden={$get_params.maiden_other}{/if}{if $get_params.b_yr_range}&b_range={$get_params.b_yr_range}{/if}{if $get_params.d_yr_range}&d_range={$get_params.d_yr_range}{/if}&nextStart={$nextStart}&results-limit={$limit}{if $alpha_key}&alpha={$alpha_key}{/if}" class="glm-alpha-link obits-link" {if !$nextStart} style="pointer-events: none; opacity: 0.5;"{/if}>Next page</a>
+                <br>
+                showing {$start} through {$lastDisplayed} of {$total}
+            {/if}
+            <label class="search-results-label" for="results-limit">Results per page</label>
+            <select id="results-limit" class="results-limit" name="results-limit">
+                <option value="10">10</option>
+                <option value="20">20</option>
+                <option value="30">30</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="500">500</option>
+            </select>
+           <table class="footable results-table" data-paging="false">
+             <thead>
+                  <tr>
+                    <th>Birth Year Range</th>
+                    <th>Death Year Range</th> 
+                    <th>Last Name</th>
+                    <th>First Name</th>
+                    <th>Birth Year</th>
+                    <th>Death Year</th>
+                    <th>Spouse</th>
+                    <th>Maiden Name</th>
+                  </tr>
+              </thead>
+                {foreach from=$obits item=i}
+                    <tr>
+                        <td>{$i.b_yr_range}</td>
+                        <td>{$i.d_yr_range}</td> 
+                        <td> <a class="detail-link"  href="{$thisUrl}/obits-detail/?obit={$i.id}" >{$i.last_name}</a> </td>
+                        <td>{$i.first_mid}</td>
+                        <td>{$i.b_year}</td>
+                        <td>{$i.d_year}</td>
+                        <td>{$i.spouse_partner}</td>
+                        <td>{$i.maiden_other}</td>
+                    </tr>
+                {/foreach}
+            </table>
+        </div>
     </form>
 </div>
 <script type="text/javascript">