How to create and render listview with autodividers in a web page using jQuery Mobile

Shashwat Srivastava

Shashwat Srivastava

— 4 min read

jQuery Mobile allows us to display a list of items in a mobile friendly manner using listview component. The listview in jQuery Mobile comes packed with many features such as making a list filterable (with the help of search box) or grouping list items into various sections using dividers. This comes in handy when you have to render long lists. Here, in this article, I will show you how to implement listview of jQuery Mobile framework and configure it to automatically generate dividers for its items.

Create a new HTML file and add the following code to it:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
        <meta name="apple-mobile-web-app-capable" content="yes"> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
        <title>Listview with autodividers</title> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> 
        <!-- jQuery and jQuery Mobile --> 
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    </head> 
    <body> 
        <!-- Home --> 
        <div data-role="page" id="page1"> 
            <div data-role="content"> 
                <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true"> 
                    <li>
                        <a href="index.html">Arron Gouveia</a>
                    </li> 
                    <li>
                        <a href="index.html">Bobette Gregory</a>
                    </li> 
                    <li>
                        <a href="index.html">Brian Sarles</a>
                    </li> 
                    <li>
                        <a href="index.html">Hayden Condon</a>
                    </li> 
                    <li><
                        a href="index.html">Jeanmarie Swager</a>
                    </li> 
                    <li>
                        <a href="index.html">Karlyn Bullock</a>
                    </li> 
                    <li>
                        <a href="index.html">Katie Jourdan</a>
                    </li> 
                    <li>
                        <a href="index.html">Katherina Sakata</a>
                    </li> 
                    <li>
                        <a href="index.html">Kieth Mabery</a>
                    </li> 
                    <li>
                        <a href="index.html">Lachelle Schrader</a>
                    </li> 
                    <li>
                        <a href="index.html">Mammie Hunsicker</a>
                    </li> 
                    <li>
                        <a href="index.html">Marina Ikner</a>
                    </li> 
                    <li>
                        <a href="index.html">Misha Vandeusen</a>
                    </li> 
                    <li>
                        <a href="index.html">Nakisha Gleeson</a>
                    </li> 
                    <li>
                        <a href="index.html">Phillis Summerlin</a>
                    </li> 
                    <li>
                        <a href="index.html">Ronny Heineman</a>
                    </li> 
                    <li>
                        <a href="index.html">Shante Mcshane</a>
                    </li> 
                    <li>
                        <a href="index.html">Sherika Marotz</a>
                    </li> 
                    <li>
                        <a href="index.html">Sherri Vancamp</a>
                    </li> 
                    <li>
                        <a href="index.html">Stephen Mantyla</a>
                    </li> 
                </ul> 
            </div> 
        </div> 
    </body> 
</html>

Now, open this HTML page on your mobile device. It will look like this:

jQuery Mobile Listview with autodividers

If you type anything in search box, then the list(along with dividers) is filtered accordingly. The dividers are auto generated on the basis of first letter of each item's text.

Searching in listview with autodividers of jQuery Mobile

Here, to create a listview, we basically create a list, either unordered (ul) or ordered (ol), and set attribute data-role as listview. Next, to enable list to be filterable, we set another attribute data-filter as true. Finally, to automatically generate dividers for this list, we set attribute data-autodividers to true.

<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
   <li><a href="index.html">Arron Gouveia</a></li>
   <li><a href="index.html">Bobette Gregory</a></li>
   <li><a href="index.html">Brian Sarles</a></li>
   <li><a href="index.html">Hayden Condon</a></li>
   <li><a href="index.html">Jeanmarie Swager</a></li>
   <li><a href="index.html">Karlyn Bullock</a></li>
   <li><a href="index.html">Katie Jourdan</a></li>
   <li><a href="index.html">Katherina Sakata</a></li>
   <li><a href="index.html">Kieth Mabery</a></li>
   <li><a href="index.html">Lachelle Schrader</a></li>
   <li><a href="index.html">Mammie Hunsicker</a></li>
   <li><a href="index.html">Marina Ikner</a></li>
   <li><a href="index.html">Misha Vandeusen</a></li>
   <li><a href="index.html">Nakisha Gleeson</a></li>
   <li><a href="index.html">Phillis Summerlin</a></li>
   <li><a href="index.html">Ronny Heineman</a></li>
   <li><a href="index.html">Shante Mcshane</a></li>
   <li><a href="index.html">Sherika Marotz</a></li>
   <li><a href="index.html">Sherri Vancamp</a></li>
   <li><a href="index.html">Stephen Mantyla</a></li>
</ul>

Easy, isn't it!?

Read more