Blazor和DataTables：像列一样传递参数

我已经在我的

Blazor WebAssembly

a

DataTables

中进行了集成。在

index.html

中，我添加了以下javascript代码

<script>
    function DataTablesAdd(table) {
        $(document).ready(function () {
            $(table).DataTable();
        });
    }

    function DataTablesRemove(table) {
        $(document).ready(function () {
            $(table).DataTable().destroy();
            // Removes the datatable wrapper from the dom.
            var elem = document.querySelector(table + '_wrapper');
            elem.parentNode.removeChild(elem);
        });
    }
</script>

在页面中，我添加了这个C代码

AfterRenderAsync（bool firstRender）上受保护的异步重写任务 { 字符串cols=“[{name=\“Username\”，orderable=\“true\”}，”+ {name=\'Gap analysis\'，orderable=\'false\'}+ {name=\'publicationplan\'，orderable=\'false\'}+ {name=\“Last update\”，orderable=\“true\”}]； wait JSRuntime.InvokeAsync（“DataTablesAdd”，新字符串[]{“#tableData”}，cols）； 等待base.OnAfterRenderAsync（firstRender）； } 不幸的是，它不起作用，而且DataTables也没有应用到表中，以产生

jQuery

错误

---

如何将相同的参数传递给javascript函数并在

DataTables

定义中使用它们？

您可以将参数作为对象数组传递给javascript函数

protected async override Task OnAfterRenderAsync(bool firstRender)
{
  string cols = "[{ name = \"Username\", orderable = \"true\" }, " +
              "{ name = \"Gap analysis\", orderable = \"false\" }," +
              "{ name = \"Publication plan\", orderable = \"false\" }," +
              "{ name = \"Last update\", orderable = \"true\" }]";

  await JSRuntime.InvokeAsync<string>("DataTablesAdd", new object[] { "#tableData", cols });
  await base.OnAfterRenderAsync(firstRender);
}

---

免责声明：我尚未测试代码。

目前，我找到了一种非常简单的方法来解决此问题。我更改了添加

DataTables

的函数，如下代码所示

function DataTablesAdd(table) {
    $(document).ready(function () {
        $(table).DataTable({
            "order": [],
            "columnDefs": [{
                "targets": 'no-sort',
                "orderable": false,
            }]
        });
    });
}

然后，在我定义表的地方，我添加了

类

，其值为

无排序

<table class="table table-hover" id="tableData">
    <thead>
        <tr>
            <th>Last update</th>
            <th>Username</th>
            <th class="no-sort">Gap analysis</th>
            <th class="no-sort">Publication plan</th>
        </tr>
     </thead>
</table>

最后更新
用户名
差距分析
出版计划

因此，DataTables呈现不允许使用

class=“no sort”

对标题进行排序

---

我仍然需要弄清楚如何将数据从函数参数传递到数据表。

谢谢您的评论，但它不起作用。

protected async override Task OnAfterRenderAsync(bool firstRender)
{
  string cols = "[{ name = \"Username\", orderable = \"true\" }, " +
              "{ name = \"Gap analysis\", orderable = \"false\" }," +
              "{ name = \"Publication plan\", orderable = \"false\" }," +
              "{ name = \"Last update\", orderable = \"true\" }]";

  await JSRuntime.InvokeAsync<string>("DataTablesAdd", new object[] { "#tableData", cols });
  await base.OnAfterRenderAsync(firstRender);
}

function DataTablesAdd(table, columns) {
   $(document).ready(function () {
     $(table).DataTable({
        "columns": JSON.parse(columns)
     });
   });
}

function DataTablesAdd(table) {
    $(document).ready(function () {
        $(table).DataTable({
            "order": [],
            "columnDefs": [{
                "targets": 'no-sort',
                "orderable": false,
            }]
        });
    });
}

<table class="table table-hover" id="tableData">
    <thead>
        <tr>
            <th>Last update</th>
            <th>Username</th>
            <th class="no-sort">Gap analysis</th>
            <th class="no-sort">Publication plan</th>
        </tr>
     </thead>
</table>