8

I'm using DataTables (datatables.net) to display data from an Ajax source and having trouble customizing it. One thing I would like to do is add a column so I can have for example an 'edit' button for each row.

The closest thing to that in the examples is here but I can't get that to work with an ajax source.

Currently, I'm using the following code to display my table:

fnServerObjectToArray = function ( aElements ){
    return function ( sSource, aoData, fnCallback ) {
        $.ajax( {
            "dataType": 'json', 
            "type": "POST", 
            "url": sSource, 
            "data": aoData, 
            "success": function (json) {
                var a = [];
                for ( var i=0, iLen=json.aaData.length ; i<iLen ; i++ ) {
                    var inner = [];
                    for ( var j=0, jLen=aElements.length ; j<jLen ; j++ ) {

                        inner.push( json.aaData[i][aElements[j]] );
                    }
                    a.push( inner );
                }
                json.aaData = a;
                fnCallback(json);
            }
        } );
    }
}

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "sAjaxSource": 'get_data.php',
        "fnServerData": fnServerObjectToArray( [ 'username', 'email' ] )
    } );
}); 

4 Answers 4

11

Why don't you use fnRenderFunction in the aoColumns? As an example:

aoColumns: [ { "bVisible": false} , null, null, null, null,
  { "sName": "ID",
    "bSearchable": false,
    "bSortable": false,
    "fnRender": function (oObj) {
       return "<a href='EditData.php?id=" + oObj.aData[0] + "'>Edit</a>";
     }
  }
]

You can use it to format the value from the server side.

See similar example on the http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html (ignore specific settings for the editable plugin)

1
  • Massive thanks for this mate. I'm using this in the context of requiring an 'action' column for my ajax sourced data table.
    – user1017882
    Jul 22, 2013 at 18:37
1

I've created columns with edit button and links and so on, but usually i do everything server side by custominzg the data i return and then show/hide them with the aoColumns option. I don't really understand what you are tring to achieve: display server side data as a link?

2
  • What I'm trying to achieve is to have the ability to add a column (with edit buttons, links etc.) as you said to ANY table regardless of data source. Of course each field in that column should be able to access the data in it's corresponding row. So as per my example I should be able to display both username and email in the column.
    – Chad
    Jun 1, 2011 at 19:40
  • If you have only the server-side solution, please send it to me I could still use it, but I wish there was a solution that is data-source independent.
    – Chad
    Jun 1, 2011 at 19:41
0

Had the same problem a few months back. This is what I did.
By no means an elegant slution, but this worked.

As you might already know, DataTables do have an overload to accept Javascript Arrays.

So I made by $.ajax call. got my json, parsed it to a javascript array and then while parsing I created an extra element (an anchor tag) with href="edit.php?email=passed_email" Then on the column headers and added a column called Edit. Those values were fed to "aaData" and "aoColumns". And then the table was populated.

And BTW, if you looking for inline editing, check the following link.
DataTables editing example - with jEditableplugin

4
  • i dont have it with me. just take the json request and make it a 2d array asper the example. then assign it to aaData as per the example. Jun 1, 2011 at 7:57
  • I meant the part where you added the column and link. please note I'm new to JS and even newer to jQuery.
    – Chad
    Jun 1, 2011 at 8:01
  • please post your sample json response. i will try to give something. Jun 1, 2011 at 8:03
  • like this currently: {"aaData":[{"username":"johndoe","email":"[email protected]"},{"username":"janedoe","email":"[email protected]"}]}
    – Chad
    Jun 1, 2011 at 8:18
0

i have some RND on this problem and get this hope this will help you out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.