如何在電子應用程序中創建數據表

Question

我正在用電子創建一個應用程序，我正在嘗試使用 jquery 處理數據表。

但是當我在 html 文件中執行此操作以及當我想對其進行測試時：

1 -> 網頁：它在我的瀏覽器中工作 2 -> 電子應用程序：它不起作用，它只顯示表格而不顯示數據表功能，如搜索或其他

我應該如何解決這個問題？

Answer 1

您需要使用 NPM 安裝數據表：

npm install --save datatables.net-dt

PS：如果沒有，請確保 jquery 也安裝在您的節點模塊中，請使用npm install --save jquery並將此代碼添加到您的 html 頁面中：

<script> window.jQuery = window.$ = require('jquery'); </script>

為了能夠使用包中選定的軟件，請使用以下代碼：

require( 'datatables.net-dt' )();

現在將 HTML 表格代碼放入 html 頁面並使用 jquery 調用 css 文件和數據表的功能：

HTML

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

css

<link rel="stylesheet" href="node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css">

Javascript

<script src="node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready( function () {
      $('#table_id').DataTable();
  } );
</script>

源碼Datatable下載Datatable手動安裝