multiple checkbox filter for datatables

最近在練習 datatables 這個好用的工具，他可以搭配 jQuery 跟 Bootstrap 讓你可以很快的建立有 RWD 的表格，他有非常豐富的 API 可以客製內容，今天示範一下怎麼使用 checkbox 去 filter 出符合的內容。

使用正規式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
    <script>
        $(function() {
            let data = [
                [
                    "Chan",
                    "basketball"
                ],
                [
                    "Phoebe",
                    "volleyball"
                ],
                [
                    "Lucas",
                    "tennis"
                ],
                [
                    "LBJ",
                    "basketball"
                ],
            ];
            let table = $('#data_table').DataTable({
                data: data
            });

            $(':checkbox').on('click', function() {
                let options = $(':checkbox:checked').map(function() {
                    return $(this).val()
                }).get();

                if (options.length === 0) {
                    table.columns(1).search('').draw();
                } else {
                    let regex = options.join('|');

                    table.columns(1).search(regex, true, false).draw();
                }
            });
        });
    </script>
</head>
<body>
<div>
    <label> basketball
        <input type="checkbox" value="basketball">
    </label>
    <label> volleyball
        <input type="checkbox" value="volleyball">
    </label>
    <label> tennis
        <input type="checkbox" value="tennis">
    </label>
</div>
<table id="data_table">
    <thead>
    <tr>
        <th>name</th>
        <th>hobby</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
</body>
</html>

使用 extension

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
    <script>
        $(function() {
            let data = [
                [
                    "Chan",
                    "basketball"
                ],
                [
                    "Phoebe",
                    "volleyball"
                ],
                [
                    "Lucas",
                    "tennis"
                ],
                [
                    "LBJ",
                    "basketball"
                ],
            ];
            let table = $('#data_table').DataTable({
                data: data
            });

            $.fn.dataTable.ext.search.push(function(settings, data) {
                let options = $(':checkbox:checked').map(function() {
                    return $(this).val()
                }).get();

                if (options.length === 0) {
                    return true;
                }

                return options.indexOf(data[1]) !== -1;
            });

            $(':checkbox').on('click', function() {
                table.draw();
            });
        });
    </script>
</head>
<body>
<div>
    <label> basketball
        <input type="checkbox" value="basketball">
    </label>
    <label> volleyball
        <input type="checkbox" value="volleyball">
    </label>
    <label> tennis
        <input type="checkbox" value="tennis">
    </label>
</div>
<table id="data_table">
    <thead>
    <tr>
        <th>name</th>
        <th>hobby</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
</body>
</html>

上面使用交集的方法篩選，稍微改寫一下就可以變聯集了。

JsRender Sample

現在前端 framework 百家爭鳴，不過和後端 framework
遇到一樣的問題，版本更動超快寫法不相容，今日的當紅炸子機相隔一年後消失的無影無蹤時有所聞，後端比較沒有迅速隕落的問題，畢竟他的開發門檻還是稍高一些，也因此除了有玩一下 vuejs 以外對
front-end framework 真的沒有太高的興趣，即便我超愛寫 JavaScript，不過專案裡面還滿常用到 js render template 這件事情，所以我還是有使用一些 plugin
來實現這件事情，今天就來介紹 JsRender 這個 plugin

基礎功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JsRender</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.88/jsrender.min.js"></script>
    <script>
        $(function() {
            var data = {name: 'chan'};
            var html = $.templates('<strong>{{:name}}</strong>').render(data);
            $('#app').append(html);
        });
    </script>
</head>
<body>
<div id="app"></div>
</body>
</html>

JsRender 傳進去的資料為 JSON，上面的內容會得到：

<div id="app"><strong>chan</strong></div>

如果是複數的內容，JsRender 會自動幫你做 repeat。

script

$(function() {
    let data = [
        {name: 'chan'},
        {name: 'phoebe'}
    ];
    let html = $.templates('<strong>{{:name}}</strong>').render(data);
    $('#app').append(html);
});

output

<div id="app"><strong>chan</strong><strong>phoebe</strong></div>

樣板

如果將樣板寫在 script 裡面，往往會變得很難維護，字串也超長，所以 JsRender 有一個把樣板隔離出來的套用方式。

script

$(function() {
    let data = [
        {name: 'chan'},
        {name: 'phoebe'}
    ];
    let html = $.templates('#info').render(data);

    $('#app').append(html);
});

html

<script id="info" type="text/html">
    <strong>{{:name}}</strong>
</script>

output

<div id="app">
    <strong>chan</strong>
    <strong>phoebe</strong>
</div>

內建函式

{{> …}} (HTML-encode)

將輸出的部份加上 > 的話會將程式碼 encode。

script

$(function() {
    let data = {link: '<a href="http://www.google.com">google</a>'};
    let html = $.templates('#info').render(data);

    $('#app').append(html);
});

html

<script id="info" type="text/html">
    {{>link}}
</script>

output

<a href="http://www.google.com">google</a>

{{if …}}

判斷式。

script

$(function() {
    let data = [
        {name: 'chan', age: 37},
        {name: 'phoebe', age: 38},
        {name: 'lucas', age: 2}
    ];
    let html = $.templates('#info').render(data);

    $('#app').append(html);
});

html

<script id="info" type="text/html">
    {{:name}} is {{if age > 10}}adult{{else}}children{{/if}}<br>
</script>

output

<div id="app">
    chan is adult<br>
    phoebe is adult<br>
    lucas is children<br>
</div>

{{for …}}

迴圈。

script

$(function() {
    let data = [{
        name: 'chan',
        likes: [{
            name: 'music'
        }, {
            name: 'movie'
        }]
    }, {
        name: 'phoebe'
    }, {
        name: 'lucas',
        likes: [{
            name: 'cartoon'
        }]
    }];
    let html = $.templates('#info').render(data);

    $('#app').append(html);
});

html

<script id="info" type="text/html">
    <div>
        {{:#index}}: {{:name}}
        {{if likes}}
        <ul>
            {{for likes}}
            <li>{{:#index + 1}}: {{:name}}</li>
            {{/for}}
        </ul>
        {{else}}
        <div>no likes</div>
        {{/if}}
    </div>
</script>

output

<div id="app">
    <div>
        0: chan
        <ul>
            <li>1: music</li>
            <li>2: movie</li>
        </ul>
    </div>
    <div>
        1: phoebe
        <div>no likes</div>
    </div>
    <div>
        2: lucas
        <ul>
            <li>1: cartoon</li>
        </ul>
    </div>
</div>

{{include …}}

引入其他的樣板。

script

$(function() {
    let data = {
        name: 'test',
        data: [
            {
                name: 'chan',
                age: 42
            },
            {
                name: 'phoebe',
                age: 42
            }
        ]
    };

    console.log($('#main').render(data));
});

html

<script id="main" type="text/html">
    <h3>{{:name}}</h3>
    {{include tmpl="#sub"/}}
</script>
<script id="sub" type="text/html">
    <ol>
        {{for data}}
        <li>{{:name}}: {{:age}}</li>
        {{/for}}
    </ol>
</script>

output

<h3>test</h3>
<ol>
    <li>chan: 42</li>
    <li>phoebe: 42</li>
</ol>

{{props …}}

key value 式的迴圈。

script

$(function() {
    var data = [
        {
            name: 'Chan',
            likes: {
                name: 'a1',
                age: 33
            }
        },
        {
            name: 'Phoebe',
            likes: {
                food: 'steak',
                drink: 'juice'
            }
        }
    ]
    var html = $.templates('#info').render(data);

    $('#app').html(html);
});

html

<script id="info" type="text/html">
    <div>
        {{:name}}
        <ul>
            {{props likes}}
            <li>{{:key}}: {{:prop}}</li>
            {{/props}}
        </ul>
    </div>
</script>

output

<div id="app">
    <div>
        Chan
        <ul>
            <li>name: a1</li>
            <li>age: 33</li>
        </ul>
    </div>
    <div>
        Phoebe
        <ul>
            <li>food: steak</li>
            <li>drink: juice</li>
        </ul>
    </div>
</div>

helper

helper 也是一種 JSON 格式，可以是文字或者是 function。

script

$(function() {
    var helpers = {
        prefix: function(val) {
            return val + ' is cool';
        },
        version: '1.1'
    };
    var data = {
        name: 'chan'
    };
    var html = $.templates('#info').render(data, helpers);

    $('#app').append(html);
});

html

<script id="info" type="text/html">
    version: {{:~version}} name: {{:~prefix(name)}}
</script>

output

<div id="app">
    version: 1.1 name: chan is cool
</div>

helper 還有另一種 global 的傳入方式。

script

$(function() {
    let helpers = {
        prefix: function(val) {
            return val + ' is cool';
        },
        version: '1.1'
    };
    $.views.helpers(helpers);
    let data = {
        name: 'chan'
    };
    let html = $.templates('#info').render(data);

    $('#app').append(html);
});

以上是最基本的範例，不過應該可以應付大部分的情況了，若要使用其他更詳盡的功能可以前往他的官網 https://www.jsviews.com/

Imitate Jetbrains Moving Radial Gradient Effect

今天在逛 Jetbrains 新產品 fleet 的網頁時，看到一個圓形漸層會跟著滑鼠移動的特效，覺得很有意思。

手癢來刻一個類似的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Glow Cursor</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    var box = document.querySelector('.box');

    box.addEventListener('mousemove', function (e) {
        var rect = e.target.getBoundingClientRect();
        var x = e.clientX - rect.left;
        var y = e.clientY - rect.top;

        box.style.background = `radial-gradient(circle at ${x}px ${y}px, rgba(138, 189, 61, 1) 0%, rgba(255, 255, 255, 1) 150px`;
    });

    box.addEventListener('mouseleave', function () {
        box.style.background = null;
    });
</script>
</body>
</html>

效果大概是這樣 Demo

Compare two arrays is equal in JavaScript

在 PHP 中，可以簡單使用比較運算子比對兩個陣列。

$a = ['a', 'b', 'c'];
$b = ['a', 'b', 'c'];

var_dump($a === $b); // true

甚至排序不一樣透過 sort 也可以解決。

$a = ['a', 'b', 'c'];
$b = ['a', 'c', 'b'];

var_dump(sort($a) === sort($b)); // true

但在 js 的世界不行。

const a = [
    'a',
    'b',
    'c'
];
const b = [
    'a',
    'b',
    'c'
];

console.log(a == b); // false
console.log(a === b); // false

在網路上看到一個解法挺好的，記錄一下。

const a = [
    'a',
    'b',
    'c'
];
const b = [
    'a',
    'b',
    'c'
];
const result = a.sort().every((value, index) => {
    return value === b.sort()[index];
});

console.log(result); // true

寫成 prototype 就是。

const a = [
    'a',
    'b',
    'c'
];
const b = [
    'a',
    'b',
    'c'
];

Array.prototype.equals = function (array) {
    return this.sort().every((value, index) => {
        return value === array.sort()[index];
    });
}

console.log(a.equals(b)); // true