Question

我正在使用PHP创建一些动态内容标签，标签上的一个对象是数据表。我通过PHP定义ID，如下所示：

PHP：

echo '<table class="table table-striped table-bordered table-hover" id="'.$nospaces.'">';

该表完美地加载数据但是我在初始化数据表以进行排序和过滤时遇到了问题。通常在静态表上我只是使用静态ID初始化它，但在这种情况下我不能这样做。

我以为我可以做一些jquery来监听tab click事件，然后获取表ID并将其加载到jquery数据表初始化中，但这也不起作用。我只是得到一个未定义的警报：

JQuery的：

<script>
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var row = $(this).closest('table').attr('id');
    alert(row);

    $(document).ready(function() {
    oTable = $('row').dataTable( {
       "sDom": '<"top"lf>rt<"bottom"ip><"clear">'

    });

    });
    });
</script>

任何帮助将不胜感激！感谢。

Answer 1

你还有什么理由不能使用静态ID吗？

var staticID = '<?php echo $nospaces; ?>';

$('#' + staticID).dataTable();

Answer 2

我想使用变量row可以解决问题，而不是使用字符串'row'：）

var row = $(this).closest('table').attr('id');
alert(row);

$(document).ready(function() {
oTable = $(row).dataTable( { //<--- here
  "sDom": '<"top"lf>rt<"bottom"ip><"clear">'
});

Answer 3

我最后做了一些额外步骤的混合物。不是最干净但它的工作。

首先在动态标签/表格中我为新ID创建了一个变量，因为我的标签和表格ID相同：

PHP：

$tableid = $nospaces .'table';
echo '<table class="table table-striped table-bordered table-hover" id="'.$tableid.'">';

然后我在选项卡上初始化（并销毁）数据表点击如下：

JQuery的：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
tab = e.target.hash // newly activated tab
tabtable = tab + 'table'

$(document).ready(function() {
    oTable = $(tabtable).dataTable( {
        "sDom": '<"top"lf>rt<"bottom"ip><"clear">'
    });
});
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    oldtab = e.relatedTarget.hash
    oldtable = oldtab + 'table'
    $(oldtable).dataTable().fnDestroy();
    });
});

通过JQuery获取动态内容的ID

3 个答案: