Can not Add Rows datatable.js - sAjaxSource Ajax call

Html Code: I'm using plain table with few column headers

<table id="gvAssgin" class="table table-striped table-bordered table-hover">
      <thead>
           <tr>
             <th>ModemName</th>
             <th>AssignedTo</th>
             <th>AssignDate</th>
             <th>ReturnedDate</th>
             <th>CreatedName</th> 
           </tr>
      </thead> 
 </table> 

Js Code: Here is js method which im using,

var oTable = $('#gvAssgin').dataTable
           ({
               "bProcessing": true,
               "bServerSide": true,
               "sAjaxSource": "AssignHistory.aspx/getAllModemAssign",
               "fnServerData": function(sSource, aoData, fnCallback) {
                   $.ajax({
                       type: "POST",
                       url: "AssignHistory.aspx/getAllModemAssign",
                       contentType: "application/json; charset=utf-8",
                       dataType: "json",
                       data: "{}",
                       success: function (json) {
                           fnCallback(json)
                       },
                       error: function (xhr, textStatus, errorThrown) {
                           alert(xhr.responseText);
                       }
                   });
               },
               "columns": [
                   { data: "ModemName" },
                   { data: "AssignedTo" },
                   { data: "AssignDate" },
                   { data: "ReturnedDate" },
                   { data: "CreatedName" } 
               ]
           });

In browser debugging i can see result in json.d, But, No data visible on page. I don't know what is the issue in this code.

Here is the screen shot on browser console screen,