Geek Answers Handbook

Data tables dynamically add a column to the table

I use DataTables ( datatables.net ) to display data from an Ajax source and problems setting it up. One thing I would like to do is add a column so that I can have, for example, a “Change” button for each row.

Closest to what is in the examples here , but I can't get this to work with the ajax source.

I am currently 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' ] ) } ); });
+8
javascript jquery gridview datatables
source share
4 answers

Why aren't you using fnRenderFunction in 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 on the server side.

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

+10
source share

I created columns with a button and links for editing, etc., but usually I do everything on the server side, setting up the returned data, and then show / hide them using the aoColumns option. I don’t quite understand what you are trying to do: display data on the server side as a link?

+1
source share

There was the same problem a few months ago. This is what I did.
By no means an elegant bend, but it worked.

As you may already know, DataTables has an overload for receiving Javascript arrays .

So, I made a call to $ .ajax. got my json, parsed it into a javascript array, and then during parsing I created an additional element ( anchor tag) using href="edit.php?email=passed_email" Then in the column headers and added the Edit column. These values ​​were passed to "aaData" and "aoColumns". And then the table was filled.

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

0
source share

I have some RND on this issue and get this , hope this helps you.

0
source share

More articles:


All Articles