在 xp:table 控件上初始化数据表

Question

在 XPage 上我有一个 table 组件：

<xp:table id="tblProposals">

我想通过脚本块组件启动数据table插件：

<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 table 时（例如和运行脚本块：

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

table 生成得很好。

datatables 插件似乎对动态 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({

Answer 2

我们正在使用 styleClass 属性来初始化 DataTable 插件。您可以尝试将此作为替代方法。

客户端 javascript:

 $(".dtb").dataTable({

于 table

<xp:table styleClass="table dtb">

在 xp:table 控件上初始化数据表

initiate datatables on xp:table control

javascript

datatables

xpages