jquery datatableサーバーサイドページネーションmvc with Dynamic Columns

Question

以下のリンクコードを使用して、データテーブルのサーバーサイドページングに使用しました。

http://www.dotnetawesome.com/2015/11/jquery-datatable-server-side-pagination-sorting.html

が、私のシナリオで

。列は動的であり、データベースからフェッチします。

$("#myTable").DataTable({ 
       "processing": true, // for show progress bar 
       "serverSide": true, // for process server side 
       "filter": false, // this is for disable filter (search box) 
       "orderMulti": false, // for disable multiple column at once 
       "ajax": { 
        "url": "/home/LoadData", 
        "type": "POST", 
        "datatype": "json" 
       }, 
       "columns": [ 
         { "data": "ContactName", "name": "ContactName", "autoWidth": true }, 
         { "data": "CompanyName", "name": "CompanyName", "autoWidth": true }, 
         { "data": "Phone", "name": "Phone", "autoWidth": true }, 
         { "data": "Country", "name": "Country", "autoWidth": true }, 
         { "data": "City", "name": "City", "autoWidth": true }, 
         { "data": "PostalCode", "name": "PostalCode", "autoWidth": true } 
       ] 
      }); 

このコードで動的な列を指定する方法を教えてください。

Answer 1

私の提案は以下の通りです：

• は/ホーム/のgetColumnsと呼ばれる第二のWebサービスを準備します。サービスは、JSON、以下を返します：

{ 
    "columns": [ 
         { "data": "ContactName", "name": "ContactName", "autoWidth": true }, 
         { "data": "CompanyName", "name": "CompanyName", "autoWidth": true }, 
         { "data": "Phone", "name": "Phone", "autoWidth": true }, 
         { "data": "Country", "name": "Country", "autoWidth": true }, 
         { "data": "City", "name": "City", "autoWidth": true }, 
         { "data": "PostalCode", "name": "PostalCode", "autoWidth": true } 
       ] 

}

• Ajaxリクエストを作成し、これらの列を取得します。
• 操作が成功した場合は、列情報を変数としてスニペットに提供します。

例コード：

$.ajax({url: "home/GetColumns", dataType: "json", success: function(result){ 
     $("#myTable").DataTable({ 
       "processing": true, // for show progress bar 
       "serverSide": true, // for process server side 
       "filter": false, // this is for disable filter (search box) 
       "orderMulti": false, // for disable multiple column at once 
       "ajax": { 
        "url": "/home/LoadData", 
        "type": "POST", 
        "datatype": "json" 
       }, 
       "columns": result.columns 
      }); 
}}); 

注：静的な情報を返すモックサービスを開始し、フロントエンドの作品を​​確保するときに、実際のロジックを実装することができます。

Answer 2

Ajaxリクエストを作成し、これらの列を取得します。 操作が成功した場合は、列情報を変数としてスニペットに提供します。 例コード：

$.ajax({url: "home/GetColumns", dataType: "json", success: function(result){ 
     $("#myTable").DataTable({ 
       "processing": true, // for show progress bar 
       "serverSide": true, // for process server side 
       "filter": false, // this is for disable filter (search box) 
       "orderMulti": false, // for disable multiple column at once 
       "ajax": { 
        "url": "/home/LoadData", 
        "type": "POST", 
        "datatype": "json" 
       }, 
       "columns": result.columns 
      }); 
}}); 

注：静的な情報を返すモックサービスを開始し、フロントエンドの作品を​​確保するときに、実際のロジックを実装することができます。