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