各行のドロップダウンリストを作成するデータテーブル

Question

私はdatテーブルを使って自分の.net mvcアプリケーションのデータを表示しています。 現在、私は選択リストのためにdbからデータを取り出してすべての行に選択リストを作成しようとしています。私のコードは、メソッドにconsole.logのi'amで作成したHTMLコードを見ることができ

{ 
        data: "State", 
        render: function (data, type, row) { 
         var resultHtml = ''; 

         if (type == "display") { 

          $.post("/SystemDefinitions/JsonGetDeviceStatusByCompany", {}, function (data, status) { 
           resultHtml += '<select id="jsonStatusList">'; 
           $.each(data, function (i, item) { 
            if (item.DeviceStatusID == row.State) { 
             resultHtml += '<option id="' + item.DeviceStatusID + '" selected="selected">' + item.StatusName + '<option>'; 
            } 
            else { 
             resultHtml += '<option id="' + item.DeviceStatusID + '">' + item.StatusName + '<option>'; 

            } 
            resultHtml += '</select>;'; 
           }); 

          }); 
          return resultHtml; 
         } 

         return data; 
        } 

       } 

に従いますが、コードは、ページ上の何も表示されません。コードに何か問題がありますか、そのステージで選択リストに値を設定することはできません。

ありがとうございます。

Answer 1

Ajax POSTリクエストが完了する前にコードがresultHtmlを返すため、そのような状況が発生している理由が考えられます。

テーブルを初期化する前に、$.postを実行する必要があります。

たとえば、コールバックでテーブルを$.postに初期化することができます。

$.post("/SystemDefinitions/JsonGetDeviceStatusByCompany", {}, function (dataDeviceStatus, status) { 
    $('#example').DataTable({ 
     // ... skipped ... 
     columns: [ 
     // ... skipped ... 
     { 
      data: "State", 
      render: function (data, type, row) { 
       if (type == "display") { 
        data = '<select id="jsonStatusList">'; 

        $.each(dataDeviceStatus, function (i, item) { 
        if (item.DeviceStatusID == row.State) { 
         data += '<option id="' + item.DeviceStatusID + '" selected="selected">' + item.StatusName + '<option>'; 
        } else { 
         data += '<option id="' + item.DeviceStatusID + '">' + item.StatusName + '<option>'; 

        } 
        }); 

        data += '</select>;'; 
       } 

       return data; 
      }  
     } 
     } 
    ] 
}); 

別の方法としては、$.post前にテーブルを初期化することができますが、Ajaxリクエストが完了した後、テーブルを再描画するdraw(false) APIメソッドを呼び出す必要があります。