javascript - 在 xp :table control 上启动数据表

Question

在 XPage 上我有一个表组件:

<xp:table id="tblProposals">

我想通过脚本 block 组件在其上启动数据表插件:

<xp:scriptBlock id="scriptInitProposals">
                                <xp:this.value><![CDATA[$(document).ready(function() {

    var tableId = x$("#{id:tblProposals}");
    $("#" + tableId.get(0).id).DataTable();
initProposals("#" + tableId.get(0).id,"getProposals");
    $('table th:first').removeClass('sorting_asc');
});]]></xp:this.value>
                            </xp:scriptBlock>

我的 JS 函数开始如下:

function initProposals(id, method) {
alert(id)
var db = $(id).DataTable();
db.destroy();
localStorage.clear();

var table = $(id).DataTable({

    "pageLength": pageLength,
    "ajax": "api.xsp/reports?method=" + method,...

当我选择带有 id 的普通 html 表时(例如，运行脚本 block :

<xp:scriptBlock id="scriptInitProposals">
                                <xp:this.value><![CDATA[$(document).ready(function() {
    $('#tblProposals').DataTable();
    initProposals("#tblProposals","proposals");
    $('table th:first').removeClass('sorting_asc');
});]]></xp:this.value>
                            </xp:scriptBlock>

表格生成得很好。

数据表插件似乎对动态 ID 不太满意，还是我遗漏了什么？？

Answer 1

如果我没记错的话，x$("#{id:tblProposals}") 得到的不是 id，而是 DOM jQuery 包装的 DOM 对象。

然后，您重复 DataTable() 调用两次:在调用 initProposals 之前以及在其中。我想你可以删除一个。

此时您可能想要更改传递给 initProposals 的内容，id 或对象，或其中任何一个，然后在方法中处理它。 你可以这样做:

<xp:scriptBlock value="$(document).ready(function() {
        initProposals('#{id:tblProposals}', 'getProposals');
        $('table th:first').removeClass('sorting_asc');
    });"/>

然后稍微修改一下函数:

function initProposals(id, method) {
    var element = $(document.getElementById(id));
    var table = element.DataTable();
    table.destroy();
    localStorage.clear();

    element.DataTable({