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文件和datatable的功能：

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 download Datatable manual installation

如何在电子应用中创建数据表

1 个答案: