2016-07-05 9 views
0

私はこの形式でJSONを呼び出すためにAJAXを使用してjQueryデータテーブルを持っています。asp.netを使用してJSONオブジェクトをjQuery DataTableに送信するために、WebメソッドでAJAXを使用するにはどうすればよいですか?

$(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 %" } 
       ] 


      }); 
     }); 

My 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キャッチされない例外TypeError:未定義のプロパティ '長さ' を読み込めません"

編集:これですべて機能します。ただ、dataSrcのを追加する必要がありました:「」あなたのDataTableの初期化の

+0

「空白の画面を表示する」とはどういう意味ですか?実際には何も表示されません(完全な白いページ)か、データが正しく表示されていないだけですか?また、直面する問題の1つは、

内にとのタグが必要です。 –

+0

@ChrisH。はい、何も表示されません。それがなぜ起こるのかわからない。彼らはそれをしない[ここ](http://stackoverflow.com/questions/9669812/how-can-i-use-a-local-json-object-as-a-data-source-for-jquery-datatables )それは動作します。 jsfiddleの例を確認してください。 – hereswilson

+0

その例について注意するべき点は、それが古いバージョンのDataTables(つまり、データの代わりにaaDataなど)に基づいていることです。 1.10.xを使用している場合、ハンガリー表記なしで 'data'と' columns'タグだけを使いたいとします。リンクされた例では、HTMLを表示しないため、

タグとタグが表示されません。あなたは間違いなくHTMLでそれらを必要とします:[リンク](https://datatables.net/forums/discussion/comment/71334/#Comment_71334) –

答えて

0

クリーンアップバージョンが

$(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 %" }, 
      ] 

    }); 
}); 

これはあなたのコードから削除された多くのもののように見えるので、私はいくつかの説明をしてみましょうこと/変更されたものについての前提。

仮定

  • まず、前提:DataTableのは、常に最初のテーブルからデータを取得するときPOSTGET要求を使用しないようにしてくださいので、あなたのデータ処理コードがあることを期待することを確認します。
  • 私はあなたの初期化とは別のAjaxを持つことを強く望んでおらず、それが最初の試みとしてどうやってやったのかと思っています。そのような場合は教えてください。それに合わせてコードを更新します。

説明

あなたの書式設定は一部の地域では、他では標準のDataTableに対して間違っているので、このバージョンはあなたがはるかに簡単な形でやろうとしていたものの大半を行う必要があります。 Ajaxの多くのオプションは、既にデフォルト(データ型のJSONなど)であるため不要です。これが削除された理由です。

DataTablesについての素晴らしい点の1つは、ここで行ったことである初期化でAjaxオプションを使用できることです。あなたは成功と失敗のコールバックを失うことがありますが、私は、デバッグの目的でそれらが本当に必要ではないと思っていますし、余分なコードを持っているとデバッグするものが増えています(私の最終コードのほとんどでコールバックを使用していません)。

他の変更のほとんどは、主に間違った命名法(例えばdata代わりの列定義でtitleた。

免責

私は、ちょうどあなたのコードを改善するために、一般的にこれらの変更をお勧めだろうがどのようにするのかわからない場合は、送られてくるJSONデータを「聴く」ためにFiddlerをダウンロードすることをお勧めします。

JSONが間違っている場合は、ページを変更しても表が表示されません。

最後に、ページにJSエラーがないことを確認してください。ブラウザのデベロッパーコンソール(F12)を使用して確認します。

JSエラーが見つかった場合は、質問に投稿してください。また、JSONデータを投稿して質問に送って、形式が正しいことを確認することをおすすめします。

+0

ええ、私のJSONはうんざりしていますが、あなたの修正は実際には今すぐ取得しようとしています。ご協力いただきありがとうございます。 – hereswilson

+0

WebメソッドはJSONオブジェクトの作成にはうまくいきますが、jqueryはJSONオブジェクトを呼び出すことはありません。それで、私は、DataTableがそれに手を差し伸べることができるようにファイルを作成するloadTableメソッドを作成する必要がありますか? – hereswilson

+0

okだから、ファイルとjQueryにロードするデータを取得する必要があります。私は、JSONの書式をどのようにして質問を更新します。 – hereswilson

関連する問題