bind tables on datatables when click button

Question

Please help me, i want to bind table on datatables when user click a button, but the coding is not working. My code is looks like below :

<script src="jquery.js"></script>
<link href="css/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').dataTable({
    "ajax": 'data.json',
    "paging":   false,
    "searching": false,
    "order": [[ 0, "asc" ]]
});
var t = $('#example').DataTable();
$('#addRow').on( 'click', function () {
    t.row.add([
        "1",
        "2",
        "3",
    ]).draw();
});
$("#button").click(function(e){
    $(".wrapper").html('<div><div id="addRow">add</div><table id="example" class="row-border hover" cellspacing="0" width="100%"><thead><tr><th align="left">title 1</th><th align="left">title 2</th><th align="left">title 3</th></tr></thead></table></div>');
});
});
</script>
<body>
<div class="wrapper"></div>
<div class="button"><input name="tbSubmit" type="button" value="click this button" id="button"></div>

My data.json is looks like below :

{
    "data": [
        [
            "1.1",
            "1.2",
            "1.3"
        ],
        [
            "2.1",
            "2.2",
            "2.3"
        ],
        [
            "3.1",
            "3.2",
            "3.3"
        ]
    ]
}

The code will run if this code is not in html click but in class wrapper like below :

$("#button").click(function(e){
    $(".wrapper").html('');
});

<div class="wrapper"><div><div id="addRow">add</div><table id="example" class="row-border hover" cellspacing="0" width="100%"><thead><tr><th align="left">title 1</th><th align="left">title 2</th><th align="left">title 3</th></tr></thead></table></div></div>

Thank you for any helps :)

Greg Pettit · Accepted Answer · 2015-06-23 05:09:52Z

1

You are trying to bind an event to #addRow before it exists. Only after you click #button does it get added to .wrapper.

For the event binding to work, the #addRow needs to already be on the DOM. OR... you could bind to an ancestor as the listener, like this:

$('.wrapper').on('click', '#addRow', function() { /*etc*/ });

answered Jun 23, 2015 at 5:09

Greg Pettit

10.8k5 gold badges57 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gus Hendra · Accepted Answer · 2015-06-23 05:12:01Z

0

It solved, i just change the position like this :

$(".wrapper").html('<div><div id="addRow">add</div><table id="example" class="row-border hover" cellspacing="0" width="100%"><thead><tr><th align="left">title 1</th><th align="left">title 2</th><th align="left">title 3</th></tr></thead></table></div>');
        var table = $('#example').dataTable({
            "ajax": 'data.json',
            "paging":   false,
            "searching": false,
            "order": [[ 0, "asc" ]]
        });
        var t = $('#example').DataTable();
        $('#addRow').on( 'click', function () {
            t.row.add([
                "1",
                "2",
                "3",
            ]).draw();
        });

answered Jun 23, 2015 at 5:12

Gus Hendra

112 bronze badges

2 Comments

Greg Pettit Over a year ago

This seems to be accomplishing a slightly different job than the original question, but it still takes my answer into account (the element wasn't in the DOM). One practice you may have overlooked is just hiding HTML elements that you want in the DOM but not visible. On click, you can reveal them instead of injecting them.

Gus Hendra Over a year ago

Yes Greg, i am wrong to put the coding before click :) Thank you for your help :)

Collectives™ on Stack Overflow

bind tables on datatables when click button

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related