GridJs 在从 HTML 表格转换时没有对列进行排序。

huangapple
go评论113阅读模式
英文:

GridJs isn't sorting column when converting from HTML table

问题

我正在尝试使用GridJS来对现有的HTML表格进行排序和搜索。
但是排序功能不起作用。搜索栏正常。

有任何想法吗？我认为这应该很简单，但我卡在那里。

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  5. const table = new gridjs.Grid({
  6.   search: true,
  7.   pagination: true,
  8.   sort: true,
  9.   resizable: true,
  10.   from: document.getElementById('myTable'),
  11. }).render(document.getElementById('destination'));
  13. <!-- language: lang-html -->
  15. <script src="https://cdnjs.cloudflare.com/ajax/libs/gridjs/6.0.6/gridjs.production.min.js"></script>
  16. <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet"/>
  18. <div id='destination'></div>
  19. <table id="myTable">
  20.   <thead class="align-bottom">
  21.     <tr>
  22.       <th>Prénom</th>
  23.     </tr>
  24.   </thead>
  25.   <tbody>
  26.     <tr>
  27.       <td>
  28.         <span>aaaa</span>
  29.       </td>
  30.     </tr>
  31.     <tr>
  32.       <td>
  33.         <span>bbbb</span>
  34.       </td>
  35.     </tr>
  36.     <tr>
  37.       <td>
  38.         <span>cccc</span>
  39.       </td>
  40.     </tr>
  41.   </tbody>
  42. </table>
  44. <!-- 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 -->

  1.           const table = new gridjs.Grid({
  2.             search: true,
  3.             pagination: true,
  4.             sort: true,
  5.             resizable: true,
  6.             from: document.getElementById(&#39;myTable&#39;),
  7.           }).render(document.getElementById(&#39;destination&#39;));

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/gridjs/6.0.6/gridjs.production.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;link href=&quot;https://unpkg.com/gridjs/dist/theme/mermaid.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  4. &lt;div id=&#39;destination&#39;&gt;&lt;/div&gt;
  5.     &lt;table id=&quot;myTable&quot;&gt;
  6.         &lt;thead class=&quot;align-bottom&quot;&gt;
  7.             &lt;tr&gt;
  8.             
  9.             &lt;th&gt;Pr&#233;nom&lt;/th&gt;
  10.             
  11.             &lt;/tr&gt;
  12.         &lt;/thead&gt;
  13.         &lt;tbody&gt;
  14.             &lt;tr&gt;
  15.                 &lt;td&gt;
  16.                     &lt;span&gt;aaaa&lt;/span&gt;
  17.                 &lt;/td&gt;
  18.             &lt;/tr&gt;
  19.             &lt;tr&gt;
  20.                 &lt;td&gt;
  21.                     &lt;span&gt;bbbb&lt;/span&gt;
  22.                 &lt;/td&gt;
  23.             &lt;/tr&gt;
  24.           &lt;tr&gt;
  25.                 &lt;td&gt;
  26.                     &lt;span&gt;cccc&lt;/span&gt;
  27.                 &lt;/td&gt;
  28.             &lt;/tr&gt;
  29.         &lt;/tbody&gt;
  30.         &lt;/table&gt;

<!-- 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 -->

  1.           const table = new gridjs.Grid({
  2.             search: true,
  3.             pagination: true,
  4.             sort: true,
  5.             resizable: true,
  6.             from: document.getElementById(&#39;myTable&#39;),
  7.           }).render(document.getElementById(&#39;destination&#39;));

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/gridjs/6.0.6/gridjs.production.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;link href=&quot;https://unpkg.com/gridjs/dist/theme/mermaid.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  4. &lt;div id=&#39;destination&#39;&gt;&lt;/div&gt;
  5.     &lt;table id=&quot;myTable&quot;&gt;
  6.         &lt;thead class=&quot;align-bottom&quot;&gt;
  7.             &lt;tr&gt;
  8.             
  9.             &lt;th&gt;Pr&#233;nom&lt;/th&gt;
  10.             
  11.             &lt;/tr&gt;
  12.         &lt;/thead&gt;
  13.         &lt;tbody&gt;
  14.             &lt;tr&gt;
  15.                 &lt;td&gt;
  16.                     aaaa
  17.                 &lt;/td&gt;
  18.             &lt;/tr&gt;
  19.             &lt;tr&gt;
  20.                 &lt;td&gt;
  21.                     bbbb
  22.                 &lt;/td&gt;
  23.             &lt;/tr&gt;
  24.           &lt;tr&gt;
  25.                 &lt;td&gt;
  26.                     cccc
  27.                 &lt;/td&gt;
  28.             &lt;/tr&gt;
  29.         &lt;/tbody&gt;
  30.         &lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月29日 19:51:26
  • 转载请务必保留本文链接：https://go.coder-hub.com/76580772.html
  • css
  • gridjs
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定