Question

i am not much familiar with Data Tables but by following the examples provide i manged to load the data set to my table via an json. now my problem is i have some additional data to show when a button in a row clicked.lets say i view club details when i click on show members button which is in each raw i need to show members details from the json file.How can i achieve this.Sorry if i am repeating a question but couldn't find one here.if you can provide me certain resources which address a slimier problem i'll appreciate. Thanks! my json seems like.

    {
      "data": [
        {
          "club": [
            "xxxxx",
            "xxxxx"
          ],
          "members":[{"a":{"fname":"AAA","lname":"BBB"},"b":{"fname":"AAA","lname":"BBB"},"c":{"fname":"AAA","lname":"BBB"}}],
          "address": [
            "xxxx",
            "xxxxx",
            "xxxxxx"
          ],
          "district": "xxxxx",
          "established": "xxxx"
        },
        {
          "club": [
            "xxxxx",
            "xxxxx"
          ],
          "members":[{"a":{"fname":"AAA","lname":"BBB"},"b":{"fname":"AAA","lname":"BBB"},"c":{"fname":"AAA","lname":"BBB"}}],
          "address": [
            "xxxx",
            "xxxxx",
            "xxxxxx"
          ],
          "district": "xxxxx",
          "established": "xxxx"
        }
]}

my script to load data as follows.

<script>
        $(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "spellData.json",
        "columns": [
            { "data": "club[, ]" },
            { "data": "address.0" },
            { "data": "members[, ]" },
            { "data": "district" },
            { "data": "established" },
            { "data": "address.2" },
            { "data": "address.1" }
        ]
    } );
} );
    </script>

my table is as follows.

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Club Name</th>
                <th>Area</th>
                 <th>Members</th>
                <th>District</th>
                <th>Estb.</th>
                <th>Address</th>
                <th>Town</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Club Name</th>
                <th>Area</th>
                 <th>Members</th>
                <th>District</th>
                <th>Estb.</th>
                <th>Address</th>
                <th>Town</th>
            </tr>
        </tfoot>
    </table>

here if i can use a dialog to load member data its easy because i may need to add some columns too.How i can achieve something like this?HEre is a jsfiddle if you need..

Answer 1

你几乎就在那里，但警报是由于重新初始化了孩子DataTable。如果你在页面加载时初始化它，然后在单击按钮时与它进行交互，它会更好，因为你不必检查它是否已经初始化：

var e = $('#sub_table').DataTable({
    "columns": [{
        "data": "fname",
        "title": "First Name"
    }, {
        "data": "lname",
        "title": "Last Name"
    }]
});

然后，当你点击你的按钮时，你可以清除表格，添加行（可能更好的是让成员在这里成为一个数组，然后你可以使用接受数组的rows.add()一次性添加它们而不是一个对象），最后再绘制它。事情就是这样：

$('table.table').on('click', '.mybutton', function() {
    e.clear();
    $.each(example.row($(this).parents('tr')).data().members, function(k, v) {
        e.row.add(v);
    });
    e.draw();
});

工作JSFiddle，希望有所帮助。

Add a button to show additional data in data tables

1 个答案: