Add a button to show additional data in data tables

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

What have you tried already? Perhaps give a link to a JSFiddle where we can look? — annoyingmouse
– annoyingmouse, Commented Aug 30, 2016 at 7:15
ok here it is.this is a sample only.i need to add a button to a row and when click that only show a model box. jsfiddle.net/sf8s6ub8/1 — Rosh_LK
– Rosh_LK, Commented Aug 30, 2016 at 7:54
i found this guide but better if i can load them inside a model.Can i achieve that easily or what are the things i should concern? — Rosh_LK
– Rosh_LK, Commented Aug 30, 2016 at 8:16
Your data is different between the use case above and the JSFiddle... I've done this which should give you a starting point from the data above: jsfiddle.net/annoyingmouse/sf8s6ub8/6 — annoyingmouse
– annoyingmouse, Commented Aug 30, 2016 at 9:21
@annoyingmouse hey thank you for your kind help.I managed to get something like this but gets an error alert can i do like this? jsfiddle.net/creativeRosh/gy64x03v — Rosh_LK
– Rosh_LK, Commented Aug 30, 2016 at 11:38

annoyingmouse · Accepted Answer · 2016-08-30 12:59:52Z

You were nearly there but the alert was due to reinitialising the child DataTable. If you initialise it on page load and then interact with it when the button is clicked it's much better as you'll then not have to check to see if it's been initialised already:

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

Then, when your button is clicked you can clear the table, add the rows (might be better to have members being an array here, then you could add them all in one go using rows.add() which accepts an array rather than an object) and finally draw it again. As things stand this works:

$('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();
});

Working JSFiddle, hope that helps.

Collectives™ on Stack Overflow

Add a button to show additional data in data tables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related