jplist_test

  <!-- handlebars template -->
  <script id="jplist-template" type="text/x-handlebars-template">
   {{#each this}}
                  
      <div class="list-item box">	
         <div class="img left">
            <img src="{{image}}" alt="" title=""/>
         </div>
                        
         <div class="block right">
            <p class="title">{{title}}</p>
            <p class="desc">{{description}}</p>
            <p class="like">{{likes}} Likes</p>
            <p class="theme">{{keyword1}}, {{keyword2}}</p>
         </div>
      </div>
                     
   {{/each}}
  </script>	

  <script>
   $('document').ready(function () {

      var $list = $('#demo .list')
         ,template = Handlebars.compile($('#jplist-template').html());

      $('#demo').jplist({

         itemsBox: '.list'
         ,itemPath: '.list-item'
         ,panelPath: '.jplist-panel'

         //data source
         ,dataSource: {

            type: 'server'
            ,server: {

            //ajax settings
            ajax: {
               url: '/content/data-sources/php-mysql-demo/server-json.php'
               ,dataType: 'json'
               ,type: 'POST'
            }
         }

         //render function for json + templates like handlebars, xml + xslt etc.
         ,render: function (dataItem, statuses) {
            $list.html(template(dataItem.content));
         }
      }

      });
   });
</script>    

  
  Filter bills:
 <!-- demo -->
<div id="demo">
   
   <!-- panel -->
   <div class="jplist-panel">						
      
      <!-- reset button -->
      <button 
         type="button" 
         class="jplist-reset-btn"
         data-control-type="reset" 
         data-control-name="reset" 
         data-control-action="reset">
         Reset  <i class="fa fa-share"></i>
      </button>

      <!-- items per page dropdown -->
      <div
         class="jplist-drop-down"
         data-control-type="items-per-page-drop-down"
         data-control-name="paging"
         data-control-action="paging">

         <ul>
            <li><span data-number="3"> 3 per page </span></li>
            <li><span data-number="5"> 5 per page </span></li>
            <li><span data-number="10" data-default="true"> 10 per page </span></li>
            <li><span data-number="all"> View All </span></li>
         </ul>
      </div>

      <!-- sort dropdown -->
      <div
         class="jplist-drop-down"
         data-control-type="sort-drop-down"
         data-control-name="sort"
         data-control-action="sort">

         <ul>
            <li><span data-path="default">Sort by</span></li>
            <li><span data-path=".title" data-order="asc" data-type="text">Title A-Z</span></li>
            <li><span data-path=".title" data-order="desc" data-type="text">Title Z-A</span></li>
            <li><span data-path=".desc" data-order="asc" data-type="text">Description A-Z</span></li>
            <li><span data-path=".desc" data-order="desc" data-type="text">Description Z-A</span></li>
            <li><span data-path=".like" data-order="asc" data-type="number">Likes asc</span></li>
            <li><span data-path=".like" data-order="desc" data-type="number">Likes desc</span></li>
         </ul>
      </div>

      <!-- text filter by title -->
      <div class="text-filter-box">
                                             
         <!--[if lt IE 10]>
         <div class="jplist-label">Filter by Title:</div>
         <![endif]-->
                        
         <input 
            data-path=".title" 
            data-button="#title-search-button"
            type="text" 
            value="" 
            placeholder="Filter by Title" 
            data-control-type="textbox" 
            data-control-name="title-filter" 
            data-control-action="filter"
         />
                        
         <button 
            type="button" 
            id="title-search-button">
            <i class="fa fa-search"></i>
         </button>
      </div>
                     
      <!-- text filter by description -->
      <div class="text-filter-box">
                                                
         <!--[if lt IE 10]>
         <div class="jplist-label">Filter by Description:</div>
         <![endif]-->
                        
         <input 
            data-path=".desc" 
            data-button="#desc-search-button"
            type="text" 
            value="" 
            placeholder="Filter by Description" 
            data-control-type="textbox" 
            data-control-name="desc-filter" 
            data-control-action="filter"
         />	
                        
         <button 
            type="button" 
            id="desc-search-button">
            <i class="fa fa-search"></i>
         </button>
      </div>
                     
      <!-- checkbox filters -->
      <div
         class="jplist-group"
         data-control-type="checkbox-group-filter"
         data-control-action="filter"
         data-control-name="themes">

         <input
            data-path=".architecture"
            id="architecture"
            type="checkbox"
         />

         <label for="architecture">Architecture</label>

         <input
            data-path=".christmas"
            id="christmas"
            type="checkbox"
         />

         <label for="christmas">Christmas</label>

         <input
            data-path=".nature"
            id="nature"
            type="checkbox"
         />

         <label for="nature">Nature</label>

         <input
            data-path=".lifestyle"
            id="lifestyle"
            type="checkbox"
         />

         <label for="lifestyle">Lifestyle</label>
      </div>

      <div
         class="jplist-group"
         data-control-type="checkbox-group-filter"
         data-control-action="filter"
         data-control-name="colors">

         <input
            data-path=".red"
            id="red-color"
            type="checkbox"
         />

         <label for="red-color">Red</label>

         <input
            data-path=".green"
            id="green-color"
            type="checkbox"
         />

         <label for="green-color">Green</label>

         <input
            data-path=".blue"
            id="blue-color"
            type="checkbox"
         />

         <label for="blue-color">Blue</label>

         <input
            data-path=".brown"
            id="brown-color"
            type="checkbox"
         />

         <label for="brown-color">Brown</label>
                        
      </div>

      <!-- list / grid view -->
      <div 
         class="jplist-views" 
         data-control-type="views" 
         data-control-name="views" 
         data-control-action="views"
         data-default="jplist-list-view">
                        
         <button type="button" class="jplist-view jplist-list-view" data-type="jplist-list-view"></button>
         <button type="button" class="jplist-view jplist-grid-view" data-type="jplist-grid-view"></button>
      </div>
                     
      <!-- pagination results -->
      <div 
         class="jplist-label" 
         data-type="Page {current} of {pages}" 
         data-control-type="pagination-info" 
         data-control-name="paging" 
         data-control-action="paging">
      </div>
                        
      <!-- pagination -->
      <div 
         class="jplist-pagination" 
         data-control-type="pagination" 
         data-control-name="paging" 
         data-control-action="paging">
      </div>	

      <!-- preloader for data sources -->
      <div 
         class="jplist-hide-preloader jplist-preloader"
         data-control-type="preloader" 
         data-control-name="preloader" 
         data-control-action="preloader">
         <img src="/content/img/common/ajax-loader-line.gif" alt="Loading..." title="Loading..." />
      </div>		
      
   </div>				 
   
   <!-- HTML data -->   
   <div class="list">
      
      <!-- item 1 -->
      <div class="list-item">	
         ...
      </div>
      
      <!-- item 2 -->
      <div class="list-item">	
         ...
      </div>
      
      ...
      
   </div>
   
   <!-- no results found -->
   <div class="jplist-no-results">
      <p>No results found</p>
   </div>
               
</div>