Question

在XPage上我有一个表组件：

<xp:table id="tblProposals">

我想通过scriptblock组件启动datatables插件：

<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表时（例如，运行scriptblock：

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

表格生成得很好。

似乎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({

在桌子上

<xp:table styleClass="table dtb">

在xp：table控件上启动数据表

2 个答案: