如何使用AJAX與Web方法使用asp.net將JSON對象發送到jQuery DataTable？

所以我有jQuery數據表使用AJAX調用這種格式的JSON。如何使用AJAX與Web方法使用asp.net將JSON對象發送到jQuery DataTable？

$(document).ready(function() { 

      $('#test').DataTable({ 
       ajax:{ 
        url:"players.json", 
        dataSrc:"" 
        }, 
       columns: [ 
        {data: "id"}, 
        { data: "player" }, 
        { data: "points" }, 
        { data: "steals" }, 
        { data: "blocks" }, 
        { data: "assists" }, 
        { data: "MPG" }, 
        { data: "shot %" }, 
        { data: "3 %" } 
       ] 


      }); 
     });

我的aspx.cs文件有一個方法來創建工作的JSON文件。

[System.Web.Services.WebMethod] 
     public static void loadTable() 
     { 
      NBAPlayerRepository players = new NBAPlayerRepository(); 
      DataTable dt = players.GetAll(); 
      var json = dt.ToJson(); 
      System.IO.File.WriteAllText(@"C:\Users\wheres\Downloads\nbaStats\nbaStats\nbaStats\players.json", json); 
     }

而且JSON看起來是這樣的：

[{"id" : "67926aa7-46b7-4418-96db-fc7e5216aac4","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "33.3429985046387"} 
,{"id" : "6dc42e0b-8750-463d-a9ef-5a025a27154b","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "343.334014892578"} 
,{"id" : "f727130c-5b94-4730-a653-cfb603c73b8a","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "343.334014892578"} 
]

但現在我得到這個錯誤「jquery.dataTables.min.js：48遺漏的類型錯誤：無法讀取的未定義的屬性‘長’」

編輯：現在所有的作品。只是不得不添加DATASRC：「」

來源

2016-07-05 hereswilson

你是什麼意思「變黑屏」？實際上什麼都沒有顯示（全白頁面），還是僅僅是你的數據顯示不正確？此外，一個直接的問題是，您必須在

內有和標籤。 –

@ChrisH。是的，甚至根本沒有出現。不知道爲什麼會發生。他們不這樣做[這裏]（http://stackoverflow.com/questions/9669812/how-can-i-use-a-local-json-object-as-a-data-source-for-jquery-datatables ），它的工作原理。檢查jsfiddle的例子。 – hereswilson

關於這個例子需要注意的一件事是它基於舊版本的DataTables（因此aaData而不是數據等）。如果您使用的是1.10.x，則只需使用'data'和'columns'標記，而不使用匈牙利符號。至於那個鏈接的例子，他們根本不顯示HTML，這就是爲什麼你沒有看到

和標籤。你絕對需要他們的HTML：[鏈接]（https://datatables.net/forums/discussion/comment/71334/#Comment_71334） –

回答

清理後的數據表初始化的版本

$(document).ready(function() { 

     $('#test').DataTable({ 
      ajax: { 
       url: "players.aspx/loadTable" 
      }, 
      columns: [ 
       { data: "id" }, 
       { data: "player" }, 
       { data: "points" }, 
       { data: "steals" }, 
       { data: "blocks" }, 
       { data: "assists" }, 
       { data: "MPG" }, 
       { data: "Shot %" }, 
       { data: "3 %" }, 
      ] 

    }); 
});

這看起來好像很多東西從你的代碼被刪除，所以讓我做一些解釋/關於改變的假設。

假設

首先，假設：數據表會一直嘗試使用GET請求，而不是一個POST首先從表中獲取數據的時候，所以請確保您的數據處理代碼預期。
我還假設你沒有強烈的願望讓你的Ajax與你的初始化分開，這就是你決定如何做第一次嘗試。如果是這樣的話，讓我知道，我會更新代碼來匹配。

說明

您的格式是在一些地區和對數據表中的其他標準不正確，所以這個版本應該做的大部分是你所想的更簡單的形式來做。很多Ajax選項都是不必要的，因爲它們已經是默認值（例如數據類型的JSON），這就是它們被刪除的原因。

DataTables的一個好處是，您可以在初始化中使用Ajax選項，這是我在這裏完成的。你確實失去了成功和失敗的回調，但我認爲出於調試的目的，它們並不是真正必要的，並且有任何額外的代碼增加了調試的東西數量（我甚至沒有在我的最終代碼中使用這些回調）。

大多數其他的變化，主要是不正確的命名（例如titledata而不是在列定義。

免責聲明

雖然我建議一般這些改變只是爲了提高你的代碼，我將確保查看發送到服務器和從服務器發送的JSON格式如果您不知道如何執行此操作，我建議您下載Fiddler以'偵聽'發送的JSON數據。

如果您的JSON不正確，頁面的任何更改都不會使該表出現。

最後，請確保頁面上沒有JS錯誤。使用瀏覽器的開發者控制檯（F12）來檢查。

如果您發現任何JS錯誤，請將它們發佈到您的問題中。我還建議發佈發送給問題的JSON數據，以便我們確保格式正確。

來源

2016-07-05 20:53:48

是的，我的JSON搞砸了，但你的修復實際上是試圖讓一個現在，所以至少我現在有一個較少的問題。謝謝你的幫助。 – hereswilson

以及網絡方法的作品創建JSON對象，但jQuery不叫它。所以我需要使loadTable方法創建一個文件，以便DataTable可以接觸到它？ – hereswilson

好吧，所以我得到的數據加載到一個文件和jQuery要求。我將更新與如何格式化JSON的問題。 – hereswilson

相關問題