css 从HTML表转换时GridJs不对列排序

xytpbqjk  于 2023-07-01  发布在  其他
关注(0)|答案(1)|浏览(81)

我正在尝试使用GridJS来排序/搜索现有的HTML表。但是分类不起作用。搜索栏没问题。
有什么想法吗?我想这应该很容易,但我坚持在那里

const table = new gridjs.Grid({
            search: true,
            pagination: true,
            sort: true,
            resizable: true,
            from: document.getElementById('myTable'),
          }).render(document.getElementById('destination'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridjs/6.0.6/gridjs.production.min.js"></script>
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet"/>

<div id='destination'></div>
    <table id="myTable">
        <thead class="align-bottom">
            <tr>
            
            <th>Prénom</th>
            
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <span>aaaa</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span>bbbb</span>
                </td>
            </tr>
          <tr>
                <td>
                    <span>cccc</span>
                </td>
            </tr>
        </tbody>
        </table>
2eafrhcq

2eafrhcq1#

我发现,问题在于跨度。我刚把它取下来。

const table = new gridjs.Grid({
            search: true,
            pagination: true,
            sort: true,
            resizable: true,
            from: document.getElementById('myTable'),
          }).render(document.getElementById('destination'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridjs/6.0.6/gridjs.production.min.js"></script>
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet"/>

<div id='destination'></div>
    <table id="myTable">
        <thead class="align-bottom">
            <tr>
            
            <th>Prénom</th>
            
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    aaaa
                </td>
            </tr>
            <tr>
                <td>
                    bbbb
                </td>
            </tr>
          <tr>
                <td>
                    cccc
                </td>
            </tr>
        </tbody>
        </table>

相关问题