list.js 是一個好用且方便的 js 列表、篩選、排序與分頁套件，只要透過簡單的設置就能把功能套上去。

 

範例 1: 將 list.js 套到 UI 上：

<div id="hacker-list">
  <ul class="list">
    <li>
       <h3 class="name">Jonny</h3>
       <p class="city">Stockholm</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="city">Berlin</p>
    </li>
  </ul>
</div>

 

js 部分：

var options = {
    valueNames: [ 'name', 'city' ]
};

var hackerList = new List('hacker-list', options);

 

 

範例 2: 加上篩選與排序功能

<div id="hacker-list">

  <input class="search" />
  <span class="sort" data-sort="name">Sort by name</span>
  <span class="sort" data-sort="city">Sort by city</span>

  <ul class="list">
   <li>
     <h3 class="name">Jonny</h3>
     <p class="city">Stockholm</p>
   </li>
   <li>
     <h3 class="name">Jonas</h3>
     <p class="city">Berlin</p>
   </li>
  </ul>
</div>

 

var options = {
  valueNames: [ 'name', 'city' ]
};

var hackerList = new List('hacker-list', options);

 

更多的用途可以參考官方文件說明。