2013-10-29 37 views
1

我想从ASP.NET Web Api控制器返回的JSON结果构建Jquery DataTables。

我得到的初始页面加载结果,但当我点击排序列,分页等...没有结果。这就好像我的DataTable无法加载JSON。

这里是我的代码,在此先感谢提供任何帮助:

var apiUrl = 'api/dockets?beginning_date=10/28/2013'; 

$(document).ready(function() { 
    $('#results-list').dataTable({ 

     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": "/api/dockets" 

    }); 
    // Send an AJAX request 
    $.getJSON(apiUrl) 
     .done(function (data) { 

      $.each(data, function (key, item) { 

       $('<tr><td>' + item.LastName + ', ' + item.FirstName + '</td><td>' + item.CaseNumber + '</td><td>' + item.CaseStatus + '</td><td>' + item.CourtSessionDate + '</td><td>' + item.CourtSessionStartTime + '</td><td>' + item.AppearanceReason + '</td><td>' + item.CourtRoom + '</td><td>' + item.OffenseDescription + '</tr>').appendTo("#results-list tbody"); 
      }); 
     }); 
}); 

回答

2

好,我知道这个工作。比我想象的要容易得多。 。

显然,如果您正在使用“sAjaxSource =” MYSOURCE /”,那么你不需要额外的jQuery的JSON调用

而且,加入VAR oTable包装我dataTable的电话,并与MDATA定义我的专栏:

$(document).ready(function() { 
    var oTable = $('#results-list').dataTable({ 
     "bFilter": false, 
     "bProcessing": true, 
     "sAjaxDataProp": "", 
     "aoColumns": [ 
     { "mData": "LastName" }, 
     { "mData": "CaseNumber" }, 
     { "mData": "CaseStatus" }, 
     { "mData": "CourtSessionDate" }, 
     { "mData": "CourtSessionStartTime" }, 
     { "mData": "AppearanceReason" }, 
     { "mData": "CourtRoom" }, 
     { "mData": "OffenseDescription" } 
     ], 
     "sAjaxSource": "api/dockets?beginning_date=10/30/2013", 
     "bInfo": false 
    }); 
});