Question

我正在使用数据表列出我的.net mvc应用程序上的数据。目前我正在尝试在每行上创建一个选择列表，并从db中为selectlist提取数据。我的代码如下

    {
                  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;
                  }

              }

使用console.log方法我能够看到创建的html代码但代码不会在页面上显示任何内容。代码有问题，或者无法在该阶段填充选择列表。

谢谢。

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方法重绘表。

数据表为每一行创建下拉列表

1 个答案: