如何在 Bootstrap 5 表格中使用排序、搜索和每页显示

Question

我有一个非常简单的表：

我还包括 Bootstrap 5：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

我想了解如何实现按值搜索（在特定列中查找值）、选择当前显示的行数并按列排序

我知道过去可以使用 来完成此操作$('#Table').bootstrapTable，但我没有在版本 5 中找到如何执行此操作的示例

Answer 1

我意识到现成的解决方案需要一系列的导入（包括 jquery）。编写自己的代码要容易得多，这就是我所做的

这是一个基本示例。为了简单起见，我删除了所有类属性。我还value为<td>标签添加了 a ，但如果您没有复杂的嵌套结构（即只有 a <td>value</td>） ，则不必这样做

<form>
    <input placeholder="Search" id="search-in-table" onkeypress="return event.keyCode != 13;">
</form>

<p>Show per page:</p>
<select id="form-select-coins">
    <option value="10" selected>10</option>
    <option value="20">20</option>
    <option value="30">30</option>
</select>

<table id="coins-table">

    <thead>

        <tr>
            <th>Name</th>
            <th>Holdings</th>
            <th>Price</th>
            <th>Avg. Buy Price</th>
            <th>Wallet Balance</th>
            <th>Profit/Loss</th>
        </tr>

    </thead>

    <tbody>

        <tr coin="COIN">
            <td value="COIN">COIN</td>
            <td value="TOTAL_COINS">TOTAL_COINS</td>
            <td value="CURRENT_PRICE">CURRENT_PRICE</td>
            <td value="AVG_BUY_PRICE">AVG_BUY_PRICE</td>
            <td value="WALLET_BALANCE">WALLET_BALANCE</td>
            <td value="PROFIT_LOSS">PROFIT_LOSS</td>
        </tr>

    </tbody>

</table>

function hide_table_elements(table_id, visible) {
    // Shows only the first `visible` table elements
    table_elements = document.getElementById(table_id).children[1].children

    for (const element of table_elements) {
        if (visible == 0) {
            element.style.display = 'none'
        }
        else {
            element.style.display = 'table-row'
            visible -= 1
        }
    }
}

// Use below solution for <td> without `value` attribute
// const getCellValue = (tr, idx) => tr.children[idx].innerText.replace('$', '') || tr.children[idx].textContent.replace('$', '');
const getCellValue = (tr, idx) => tr.children[idx].getAttribute('value')

const comparer = (idx, asc) => (a, b) =>
    ((v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2))
    (getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx))

const reload_table = () => hide_table_elements('coins-table', document.getElementById('form-select-coins').value)

window.addEventListener('load', function () {   
    reload_table()

    // Show per page
    document.getElementById('form-select-coins').addEventListener('change', function() {
        counter = this.value
        hide_table_elements('coins-table', this.value)
    });

    // Search in table
    document.getElementById('search-in-table').addEventListener('input', function() {   
        rows = document.getElementById('coins-table').children[1].querySelectorAll('tr:nth-child(n)')
        value = this.value.toLowerCase()

        if (value == '')
            return reload_table()

        for (const row of rows) {
            if (row.getAttribute('coin').toLowerCase().includes(value)) {
                row.style.display = 'table-row'
            } else {
                row.style.display = 'none'
            }
        }       
    });

    // Sort table
    document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
        const table = document.getElementById('coins-table').children[1]

        Array.from(table.querySelectorAll('tr:nth-child(n)'))
            .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
            .forEach(tr => table.appendChild(tr));
        
        reload_table()
    })));
});

它便宜且快速，但如果您想使用现成的解决方案，请看这里