datatables server side population

Question

i have spend several hours trying to find how to populate the datatables with a json that comes from the backend, here is my code:

Answer 1

1) Create your datatable on document.ready.

2) Send a ajax request to get json data.

3) Inside the loop, instead of creating elements use datatables fnAddData(); function. like -

$('#dataTables-example').dataTable().fnAddData([first-columnval, second-columnval, etc]);

I have created a sample

HTML

Add Data


            

                
                
                    
Id
                    
Title
                    
Summary
                
            
            

            
        

JS

 $(document).ready(function() {
 //creating a temp json. you will get this from server side after ajax call 
 var jsonString = '[{"Id": 1,"Title": "Title1","Summary": "Summary1"  },{"Id": 2,"Title": "Title2","Summary": "Summary2"}]';

 $("#addData").click(function(){
        var data = JSON.parse(jsonString);
        for(i=0; i<<",
                "sLast": ">>",
                "sNext": ">",
                "sPrevious": "<"
            }
        }
    });
}

createDatatable();

});

Please check this Fiddle