英文:
GridJs isn't sorting column when converting from HTML table
问题
我正在尝试使用GridJS来对现有的HTML表格进行排序和搜索。
但是排序功能不起作用。搜索栏正常。
有任何想法吗？我认为这应该很简单，但我卡在那里。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const table = new gridjs.Grid({
search: true,
pagination: true,
sort: true,
resizable: true,
from: document.getElementById('myTable'),
}).render(document.getElementById('destination'));
<!-- language: lang-html -->
<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>
<!-- end snippet -->
希望这有助于解决您的问题。如果还有其他问题，请随时提出。
英文:
I'm trying to use GridJS to sort/search an existing html table.
But sorting isn't working. The search bar is ok.
Any idea ? I think it should be easy but i stuck there
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const table = new gridjs.Grid({
search: true,
pagination: true,
sort: true,
resizable: true,
from: document.getElementById('myTable'),
}).render(document.getElementById('destination'));
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 0
我发现问题是范围。我刚刚把它移除了。
英文:
I found, the problem was the span. I just removed it.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
const table = new gridjs.Grid({
search: true,
pagination: true,
sort: true,
resizable: true,
from: document.getElementById('myTable'),
}).render(document.getElementById('destination'));
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论