Exclude particular elements from JQuery ListNav plugin

Question

I have used the Jquery plugin for filtration of records. Following is the link from where i have gotten the plugin:

http://ericsteinborn.com/jquery-listnav/

I am able to implement this plugin successfully. Although when it filters by alphabets in my code it also counts the heading below it. Look at the following picture for more clarity:

Now, as you can see in the above picture that total count is four. However, it should be only 1 because T contains only one entry. It also counts the heading i have mentioned, which are 3 (Title, Type, Training Required).

Here is another example:

I can disable the head count to make it work but problem occurs when it any alphabet does not contain any record but heading does then it also shows that there is record there. As in above figure, F alphabet does not contain any name but it has heading named Full Name .

Therefore, i would to know how to exclude heading records. Following is my code in View.

View

<ul id="demoOne" class="demo">

       <span class="site-heading">Title</span>
       <span class="site-heading">Address/Location</span>
       <span class="site-type" >Type</span>
       <span class="site-type">Training<br />Required</span>
       <hr class="horizontal-row "> 
        <?php
                $i = 0;
                foreach($sites as $site) :
         ?>
       <ul class="<?php print ($i % 2 == 1) ? 'horizontal' : 'horizontal_odd'; ?>">

            <li class="col-site-first">
                  <a href="#" style="text-decoration:none; color: #990000; font-weight:bold;"><?php print $site->title; ?></a>
             </li>
             <li class="col-site-first">
       <?php
               print $site->unit.' '.
                $site->street.' '.
                 $site->suburb.' '.
                $site->state.' '.
                 $site->postcode.'<br />'.
                  $site->location;
           ?>
                        </li>
                         <li class="col-site-type"><?php print str_replace(",", "<br />", $site->job_type_title); ?></li>
                         <li class="col-site-edit"><strong><?php print ($site->required_training == 0) ? "No" : "Yes" ;?></strong></li>
                        <li class="col-site-edit">
                            <a href="<?php print site_url('sites/edit/'.$site->sid); ?>" class="table-edit-link"></a>
                            <a href="javascript:void(0);" class="table-delete-link" sid="<?php print $site->sid; ?>" title="<?php print $site->title; ?>"></a>
                        </li>
                    </ul>

                    <?php
                    $i++;
                endforeach; ?>
            </ul></tr>

Simple JQuery Script

  <script>
            $(function(){
                 $('#demoOne').listnav({

                    noMatchText: 'No user in the system.'
                        });

                    });
                </script>

Basically, as far as i have figured out, it includes everything that comes between demo div .

Any help will be appreciated. Thanks

Answer 1

Way 1:

You can target the all child ul on which horizontal and horizontal_odd class are added of parent ul, so that it only considers the inner ul and will skipping the main ul in which headings are placed:

$(function(){

    $('#demoOne ul:eq(0)').listnav({

    noMatchText: 'No user in the system.'

   });

});

Way 2:

or modify your html to put header in a seperate ul

<ul class="demo">

       <span class="site-heading">Title</span>
       <span class="site-heading">Address/Location</span>
       <span class="site-type" >Type</span>
       <span class="site-type">Training<br />Required</span>
       <hr class="horizontal-row ">
</ul>

and content in seperate ul:

<ul id="demoOne" class="demo">
<?php
                $i = 0;
                foreach($sites as $site) :
         ?>
       <ul class="<?php print ($i % 2 == 1) ? 'horizontal' : 'horizontal_odd'; ?>">

            <li class="col-site-first">
                  <a href="#" style="text-decoration:none; color: #990000; font-weight:bold;"><?php print $site->title; ?></a>
             </li>
             <li class="col-site-first">
       <?php
               print $site->unit.' '.
                $site->street.' '.
                 $site->suburb.' '.
                $site->state.' '.
                 $site->postcode.'<br />'.
                  $site->location;
           ?>
                        </li>
                         <li class="col-site-type"><?php print str_replace(",", "<br />", $site->job_type_title); ?></li>
                         <li class="col-site-edit"><strong><?php print ($site->required_training == 0) ? "No" : "Yes" ;?></strong></li>
                        <li class="col-site-edit">
                            <a href="<?php print site_url('sites/edit/'.$site->sid); ?>" class="table-edit-link"></a>
                            <a href="javascript:void(0);" class="table-delete-link" sid="<?php print $site->sid; ?>" title="<?php print $site->title; ?>"></a>
                        </li>
                    </ul>

                    <?php
                    $i++;
                endforeach; ?>
            </ul>

and in jquery:

$(function(){
    $('#demoOne').listnav({

    noMatchText: 'No user in the system.'
   });

});

UPDATE:

After researching on the plugin, i have found an attribute of it filterSelector tha is useful in your scenario, it will filter only that elements, you can use it this way:

add a generic class on inner child ul and then use it :

<ul class="<?php print ($i % 2 == 1) ? 'horizontal' : 'horizontal_odd'; ?> childRow">

$(function(){ $('#demoOne').listnav({

    noMatchText: 'No user in the system.',
    filterSelector: '.childRow'
   });

});

you can see filterSelector DEMO on this URL on DEMO6 tab.

OP solved it by modifying its html to this with the proposed updated solution:

<li class="col-site-first">
    <div class="childRow">
        <a href="#" style="text-decoration:none; color: #990000; font-weight:bold;"><?php print $site->title; ?></a>
     </div>
</li>