DataTables logo DataTables

Column definition via JSON array (ajax)
  • Hello, Allan

    Just wondered, whether it's possible to get the column definitions in the same JSON array with aaData

    something like:
    <table id="sp_table" class="display">
      <tbody>
      </tbody>
    </table>
    
    <script>
          var oTable = $('#sp_table').dataTable( {
              "bProcessing": true,
              "sAjaxSource": './api/handler.e',
              "fnServerData": function ( sSource, aoData, fnCallback ) {
                $.ajax( {
                    "dataType": 'json', 
                    "type": "POST", 
                    "url": sSource, 
                    "data": ( { "action": "exec", "script" : "get_all_my_records.e" } ), 
                    "success": fnCallback
                } );
            }         
          } );
    
    </script>
    <html>
    

    /api/handler.e result:
    { 
    
    "aaData": [
    [ "2010-07-27 10:43:08", "..."], [ "2010-06-28 17:54:33", "..."], 
    [ "2010-06-28 16:09:06", "..."], [ "2010-06-09 19:15:00", "..."]
    ] , 
    
    "aaSorting": [
     [ 1, "desc" ]
    ], 
    
    "aoColumns": [ 
      { "sTitle": "Title1" }, 
      { "sTitle": "Title2" } 
    ] 
    
    }
    

    or is here any other way to initialize table within a single AJAX request and without full server side processing?
  • What you can do is something like this:

    				$.ajax( {
    					"url": 'whatever.php',
    					"success": function ( json ) {
    						$('#example').dataTable( json );
    					},
    					"dataType": "json"
    				} );
    
    So you just make the Ajax call "manually" and then use the return to initialise DataTables.

    Allan
  • Alan, thanks a lot for the reply. I was thinking in this way but didn't see a way to update the data without destroying/recreating the table (fnAjaxReload, fnDraw won't work, will they?)
  • It depends what you want to do. If you just want to update the data, then yes, fnReloadAjax etc will work great. However, if you want to completely re-initialise the table, then you can use bDestroy:true ( http://datatables.net/usage/options#bDestroy ).

    Allan
  • Sorry, but I didn't quite catch what you meant :(

    if I use the code like:
    $.ajax( {
    	"url": 'whatever.php',
    	"success": function ( json ) {
    		$('#example').dataTable( json );
    	},
    	"dataType": "json"
    } );
    

    and I want to update the data from the server (using the AJAX request) what function should I call?
    $('#example').dataTable.fnDraw - seems doesn't work
    $('#example').dataTable.oApi._fnAjaxUpdate - doesn't work either
    fnReloadAjax function - doesn't even exist

    or just calling initial AJAX request one more time is enough?
  • Try this:

    
    $.ajax( {
    	"url": 'whatever.php',
    	"success": function ( json ) {
    		json.bDestroy = true;
    		$('#example').dataTable( json );
    	},
    	"dataType": "json"
    } );
    
    That will cause DataTables destroy the old table and then initialise it with the new information from the server.

    The other option is fnReloadAjax (which is a plug-in: http://datatables.net/plug-ins/api#fnReloadAjax ).

    Allan
This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Support

Get useful and friendly help straight from the source.