Get data from JSON and "put into" button code

ryanswj

Hi guys,

I am new to DataTables and am implementing it into an in-house application, running on MySQL and PHP.

I need a button to be created on each row to allow the user to delete or edit the record. I've managed to create those buttons, but I need help with getting the data from the JSON file and "putting it" into the button, so that the Javascript on the page can "get" those values for further processing.

For now, I am able to create buttons that look like this:

<button action="delete">Delete!</button>

but I need the id of the object to be present in the button, for example:

<button action="delete" recordid="3">Delete!</button>

Here is my JS code:

$(document).ready(function() {
    var t = $('#example').DataTable({
        "order": [[ 1, 'asc' ]],
        ajax: {
            url: 'includes/dt_ss.php',
            dataSrc: ''
        },
        columns: [
        {data: null},
        {data: 'name'},
        {data: 'job_title'},
        {data: 'tel'},
        {data: 'email'},
        {data: 'remarks'},
        {data: null,
        defaultContent: "<button>Edit</button>"
    }
        ],
    });
    
     t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
});

Here is the important bit of my HTML code:

<table id="example" class="table table-hover">
        <thead>
          <tr>
            <th>s/n</th>
            <th>name</th>
            <th>job_title</th>
            <th>tel</th>
            <th>email</th>
            <th>remarks</th>
            <th>actn</th>
          </tr>
        </thead>
</table>

Here is some sample data from the JSON file:

{"id":"3",
"linked_company":"15",
"name":"John Doe",
"job_title":"Manager",
"tel":"61234567",
"email":"testuser@1234.com",
"remarks":"n\/a"}

Notice that "id" is not anywhere in the table view.

Thank you!

Tom (DataTables)

You can access the row's data object using row().data() and this is an example event handler of how you might do it.

$( "#example" ).on('click','tr button', function() {
      var tr = $(this).closest('tr');
      var data = t.row(tr).data();
      console.log(data.id);
});

This is possibly a better alternative to assigning attributes to the button itself as you suggested since it isn't required as you are storing the id in the table row object.
However if this is something that you require you would use columns.render instead which would allow you to create dynamic HTML.

Thanks

Tom

ryanswj

Tom, thanks! It seems that what you just linked me (specifically, columns.render) will solve my problem. I'll report back if it works. Thank you!!

ryanswj

Hi Tom,

That worked, thank you!

As an extension to my earlier question - say if I'd like to cross-reference a certain 'id' in one json file with another json file (perhaps to find the company name that the id is associated with), is this possible in datatables? Nothing in the manual allows me to put in any more ajax urls for json files, if you get what I mean.

Thank you!

Tom (DataTables)

Hi Ryan

It isn't currently possible for Datatables to handle the data merge itself. You can either manage the merge server side or request the two files using AJAX, do the merge yourself and then add the data you want using the API.

Thanks

Tom

ryanswj

Thanks Tom. I ended up doing the merge myself.