サーバー側のDatatable

Question

私は.netに新しいです。私はDataTableの例を作成したいと思います。私のテーブルは "SQL"管理スタジオにあります。私はDataTableにそのテーブルをロードしたいです。これどうやってするの？私は接続文字列を使用してテーブルを得ることができますが、それを修正する方法DataTable？

ご希望の場合は、私にコードを表示してください。私は初心者であることを忘れないでください。明確に説明してください。

は、私はこのようないくつかのコードを持っている：

は

<script type="text/javascript" > 
    $(document).ready(function() { 
     $('#example').dataTable({ 
      "bProcessing": true, 
      "bServerSide": true, 
      "sAjaxSource": "somefile" 
     }); 
    }); 
</script> 

私にそれを説明してください。

ありがとうございます。

Answer 1

あなたにいくつかの励ましを与えるために、私は、.NET に非常に新しかったと javascriptの約9ヶ月前（と間違いなく、まだ午前）私はまだ非常に良い、機能的なデータテーブルを作成するdatatables.net上のリソースを使用することができましたASP.netとSQLサーバーを使用します。提案のカップル：

まず：examples page、API reference、およびdatatables.net上forumsはあなたの最高のリソースであることを行っています。私は、テーブルに参照ページを見つけるだけで比較的シンプルなやり方をさせるために、簡単で洗練されたネイティブなやり方があることを実際に複雑なやり方でコーディングしました。

第二：あなたはMVCを使用していて、それが（下記参照されていない場合）、サーバー側の処理を行うために本当に必要なら、datatables.netでこれを設定するのです方法については、コードプロジェクトに大きなtutorialあります。

第3の：サーバーサイド処理では、テーブルのデータのレンダリング方法が大幅に制御されますが、ソート機能とページ設定機能を手作業でコーディングする必要があります。私が使用している代替方法はbServerSideが設定されていないテーブルのsAjaxSource初期化オプションです。これは外部（AJAX）ソースからデータを動的に読み込みますが、データテーブルプラグインはすべて重い持ち上げる。ここに私が持っている設定だ（これは単純すぎる場合、私は謝罪）：

1. 私は指定された各列のヘッダだけで、私のHTMLに空のテーブルを持っています。 theadとtbodyのタグがあることを確認してください。

2. .NETプロジェクトで、新しい「汎用ハンドラ」（拡張子は.ashxである必要があります）を作成します。このハンドラは、メインページからデータのリクエストを処理します（下記参照）。ここでは、私は次のようにします：

   a。私は自分のSQLデータベースに接続します

   b。テーブルのビューを取得します。

   c。各行をオブジェクトに解析します（これに対して新しいクラスを作成しました）

   d。 JSONオブジェクトに自分の「行オブジェクト」の配列をシリアル化します（これは、データテーブルでデータを操作するための最も簡単な方法です）。

   e。応答をページに書き戻してください

   私はこれを行うために私のコードを分かち合いたいと思いますが、私はすでにこの投稿が長すぎると感じることができます。

3. 私は$(document).ready機能の中で、ページのjavasciptで自分のデータテーブルをセットアップしました。私は私のAJAXソースとして.ashxファイルを使用して、私は私のJSONオブジェクトの列ごとにキーとして使用する名前を指定する - mDataPropオプションを使用して：

   oTable = $("#production_table").dataTable({    
       "sAjaxSource": 'Data.ashx', 
        //^Change this ashx filename based on 
        // the file you created above in #2 
       "aoColumns": [ 
        { "mDataProp": "column1" }, 
        { "mDataProp": "column2" }, 
        { "mDataProp": "column3" } ] 
   }); 
   

幸運を！