Question

我试图显示来自主数据表源的嵌套静态表，但是当我重新绑定该表时，则展开折叠事件不起作用。在调试时可以正常工作，但不将详细信息附加到行中。

我创建了不起作用的js小提琴。如果有人发现这是什么问题，那就太好了。

http://jsfiddle.net/yogesh078/j5a390d9/41/

顺序检查什么不起作用。

1。单击顶部的“搜索”按钮，它将填充数据表中的数据 2.现在单击单击表的第一个td，它将显示行的嵌套详细信息 3.现在再次单击顶部的搜索链接，它将绑定结果（在我的情况下，这是具有不同参数的搜索） 4.现在单击单击，它是第一个td，现在它没有扩展和折叠，这是我面临的问题。

我尝试了以下方法：删除销毁和销毁的数据表仍然没有运气调试器将进入最后一个事件，但数据未追加到tr

<a style="background-color:blue; color:white" onclick="reaload();">Search</a>

<table id="MeterDataTable" class="display dataTable table table-striped no-footer dtr-inline collapsed" cellspacing="0" width="100%">
    <thead>
        <tr>
         <th></th>
            <th>meter</th>
            <th>id</th>
            <th>desc</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>meter</th>
            <th>id</th>
            <th>desc</th>
        </tr>
    </tfoot>
</table>

<script>


var lstTable;
function reaload() {
    var dataset = [
        ['test', '15', 'testDesc'],
    ];  

lstTable =  $('#MeterDataTable').DataTable(
    {
        //"ajax": 'DataTables-1.10.7/examples/ajax/data/meterDataJsonDown.txt',
        "data": dataset,
       destroy: true,
        "columns": [
       {
                                "className": 'text-center table-cell fa fa-plus',
                                "orderable": false,
                                "width": "15px",
                                "data": null,
                                "defaultContent": ''
                            },
                      { "title": "meter" },
                      { "title": "id" }
                   ]
    });


 //Below function will expand details on click of plus
    $('#MeterDataTable tbody').on('click', 'td.fa.fa-plus', function () {
        var tr = $(this).closest('tr');
        var row = lstTable.row(tr);
        if (row.child.isShown()) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            var td = row.child(GetChildTable(row.data()), "left-space").show();
            tr.addClass('shown');
        }
    });


}

    function GetChildTable(d) {
    var html = '<table  class="child-lst no-margin table table-bordered">' +
        '<thead><tr><td>Code/Package</td><td>Description</td><td>Q</td><td> Code</td><td>Description</td></tr></thead> <tbody>';

    html = html + " </tbody></table>";
    return html;
}

</script>

数据表重新绑定问题与展开折叠点击

0 个答案: