iT邦幫忙

2018 iT 邦幫忙鐵人賽
2
Modern Web

30天學習30套前端技術(2018年)系列 第 49

[十分鐘學習] List.js - 資料排序

example1

對表格、清單、各式各樣的物件,增加搜尋、排序、過濾和靈活性,無形的建立在HTML內,極簡易也易於使用。即便周邊套件不如DataTables,但不依賴jQuery及大小僅DataTables的1/4(應縮後17KB),以及對IE的高相容性,和不只對<table>,對<ul><ol>或是其他HTML元素的支援,都是List.js不容忽視的優勢之一。

GitHub Star: 8,600
Javascripting Overall: 82%
瀏覽器: ChromeFirefoxIE6+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

    <!-- List.js v1.5.0 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
    
  • npm

    $ npm install list.js
    
  • Bower

    $ bower install list.js
    

《範例》

  • 可排序的清單

    <div id="example">
    	<!-- 
    		// 屬性設定[註2]
    		data-sort: 指定排序的項目
    	-->
    	<button class="sort" data-sort="name">Sort by name</button>
    	<button class="sort" data-sort="age">Sort by age</button>
    	<input type="text" class="fuzzy-search" />
    	<hr />
    	<ol class="list">
    		<li>
    			<span class="name">Tom</span>
    			<em class="age">25</em>
    		</li>
    		<li>
    			<span class="name">Mike</span>
    			<em class="age">30</em>
    		</li>
    		<li>
    			<span class="name">Jack</span>
    			<em class="age">15</em>
    		</li>
    		<li>
    			<span class="name">Bob</span>
    			<em class="age">20</em>
    		</li>
    	</ul>
    </div>
    <script>
    	var example = new List( "example", {
    		// 參數設定[註1]
    		valueNames: [ "name", "age" ] // 項目
    	});
    </script>
    

    [註1]

    參數 描述
    valueNames 項目

    [註2]

    屬性 描述
    data-sort 指定排序的項目
  • 可搜尋的清單

    example2

    <div id="example">
    	<!-- 
    		// 類別設定[註2]
    		fuzzy-search: 搜尋
    	-->
    	<button class="sort" data-sort="name">Sort by name</button>
    	<button class="sort" data-sort="age">Sort by age</button>
    	<input type="text" class="fuzzy-search" />
    	<hr />
    	<ol class="list">
    		<li>
    			<span class="name">Tom</span>
    			<em class="age">25</em>
    		</li>
    		<li>
    			<span class="name">Mike</span>
    			<em class="age">30</em>
    		</li>
    		<li>
    			<span class="name">Jack</span>
    			<em class="age">15</em>
    		</li>
    		<li>
    			<span class="name">Bob</span>
    			<em class="age">20</em>
    		</li>
    	</ul>
    </div>
    <script>
    	var example = new List( "example", {
    		// 參數設定[註1]
    		valueNames: [ "name", "age" ] // 項目
    	});
    </script>
    

    [註1]

    參數 描述
    valueNames 項目

    [註2]

    類別 描述
    fuzzy-search 搜尋

《延伸》

  1. Search, sort, filters, flexibility to tables, list and more! - List.js
  2. javve/list.js: The perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML.

上一篇
[十分鐘學習] TinyMCE - HTML編輯器
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言