Access Datatable content in jQuery with dynamically created button click

Question

I'm new to jQuery. I need to access the datatable contents when I press the erase button. I tried lot of method but it returns undefined.

$(document).ready(function() {
    loadData()
});

function loadData() {

    var table = $('#example').DataTable({

        "ajax" : {
            "method" : 'POST',
            "crossDomain" : true,
            "dataType" : 'json',
            "contentType" : 'application/x-www-form-urlencoded; charset=UTF-8',
            "dataSrc" : "",
            "url" : "http://localhost:8081/Lakshmi_Service/admin/full"
        },

        "columns" : [ {
            "data" : "adminName"
        }, {
            "data" : "address"
        }, {
            "data" : "emailId"
        }, {
            "data" : "otp"
        }, {
            "data" : "expiryDate"
        }, {
            "data" : "mobileNo"
        }, {
            "targets" : -1,
            "data" : null,
            "defaultContent" : '<button>Erase</button>'
        } ],

        "iDisplayLength" : 5,
        "bAutoWidth" : true,
        "bSort" : false,
        "aLengthMenu" : [ [ 10, 25, 50, -1 ], [ 10, 25, 50, "All" ] ],
        "bDestroy" : true,
        "bFilter" : false,
        "bLengthChange" : false
    });

    $('#example tbody').on('click', 'button', function(event) {
        var aData = table.fnGetPosition(this);
        var oTableData = table.fnGetData(aData[0]);
        var ids = oTableData[aData].adminName;
        alert(ids);
    });
}

I need this adminName value when I click erase button to call another service. My page looks like:

My html page is:

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.js"></script>
<script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript"
    src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script src="jquery-ui.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css">

<title>Guru Statistics</title>
</head>
<body>
    <table id="example" class="table table-striped table-bordered"
        cellspacing="0" width="60%">
        <thead>
            <tr title="Name">
                <th>Name</th>
                <th>address</th>
                <th>mailId</th>
                <th>otp</th>
                <th>Date</th>
                <th>Mobile No</th>
                <th>Erase</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript" src="home.js"></script>
</body>
</html>

Enjoyted · Accepted Answer · 2015-11-03 10:28:48Z

1

What you could do is add classes to your cells (adminName, address...) in the "columns" (I use aoColumns) dataTables object, and then use this piece of jQuery inside your click event

$(this).parents("tr").find(".adminName").text();

this way you should be able to get the value of the adminName of the row you clicked in

if you don't want to add classes (you should!) you could still get your data this way I guess :

$(this).parents("tr").find("td").first().text();

But I discourage you to do that, as if one day you decide to add a new column that's placed before adminName (say "Id" for exemple) your code will retrieve the Id and not the adminName, which will probably break your code.

edited Nov 3, 2015 at 10:28

answered Nov 3, 2015 at 10:17

Enjoyted

1,1516 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Access Datatable content in jQuery with dynamically created button click

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