HTML で書かれた静的な表やリストなどでも、絞り込み、並び替え、ページ送り機能が使えるように、JSDatabase オブジェクト（jsdb.js）から派生させた JSDB_Elements オブジェクト（jsdb.elem.js）を書いてみました。
19件（1/4）
1234›»
| 名前 ↑↓ | よみ ↑↓ | 出身地 ↑↓ | 生年月日 ↑↓ | 加入時期 ↑↓ |
|---|---|---|---|---|
| 松原ユリヤ | まつばら ゆりや | 東京都 | 2008.02.26 | 2017.12 |
| 小野田華凜 | おのだ かりん | 東京都 | 2008.01.23 | 2018.11 |
| 橋田歩果 | はしだ ほのか | 東京都 | 2005.10.17 | 2019.08 |
| 村越彩菜 | むらこし あやな | 千葉県 | 2008.02.11 | 2019.08 |
| 植村葉純 | うえむら はすみ | 大阪府 | 2008.02.25 | 2019.08 |
jQuery(function($) { const db = new JSDB_Elements('table#L1 > tbody > tr', 5); db.before_print = (cp, np, nr) => { /* 件数、ページ番号、総ページ数の表示 */ $('span#S2').html(`${nr}件（${cp+1}/${np}）`); /* ページャの表示 */ db.display_pager(5, 'span#S3'); }; db.reset(); /* 絞り込み */ $('button#B1').on('click', () => { db.easy_filter($('input#S1').val()); }); /* 並び替え */ const db_sort = (i, order) => { db.easy_sort(`td:nth-child(${i+1})`, order === 'DESC'); }; /* 並び替えボタンの設定 */ $('table#L1 > thead > tr > th').each(function(i) { const $span = $(this).children('span'); $span.eq(0).on('click', () => db_sort(i)); $span.eq(1).on('click', () => db_sort(i, 'DESC')); }); });