试图访问 ajax 之外的 dataTable 变量是未定义的

Question

我有一个 jquery 自动完成功能，一旦选择了一个值，它就会从 ajax 调用中加载一个带有复选框的数据表。然后在提交表单时，我需要访问数据表变量以迭代每一行以获取选定的行，但数据表变量显示为未定义。

我的做法与 this 示例中的相同，唯一的区别是数据来自 Ajax 请求。

你能帮我理解为什么会这样吗？

$(document).ready(function() {
  var campId;
  var t_OmnitureCode;

  // Campaign input autocomplete
  $("#campaign").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "promotion",
        type: "GET",
        data: {
          term: request.term,
          action: "searchCampaign"
        },
        dataType: "json",
        success: function(data) {
          if (!data.length) {
            var result = [{
              label: "no match found",
              value: "-1"
            }];
            response(result);
          } else {
            response($.map(data, function(item) {
              return {
                label: item.name,
                value: item.campaignId
              }
            }));
          }
        }
      });
    },
    select: function(event, ui) {
      event.preventDefault();
      campId = ui.item.value;
      if (campId != "-1") {
        this.value = ui.item.label;

        // This will apply datatables getting the content from an Ajax call
        t_OmnitureCode = applyDataTableOmnitureCode(campId);
      }
    },
    focus: function(event, ui) {
      event.preventDefault();
      this.value = ui.item.label;
    }
  });

  // Handling form submission
  $("#frm_promotion").on("submit", function(e) {
    var form = this;
    // Variable for datatable "t_OmnitureCode" is undefined below
    var rows_selected = t_OmnitureCode.column(0).checkboxes.selected();

编辑： 刚刚意识到，即使在分配变量 (t_OmnitureCode = applyDataTableOmnitureCode(campId);) 时，它也是未定义的，不知道为什么。

这里是 applyDataTableOmnitureCode 代码：

function applyDataTableOmnitureCode(campId) {
    $("#tbl_omnitureCode").DataTable({
        destroy: true, 
        scrollX: true,                                      
        fixedColumns: {
            leftColumns: 1
        },
        "ajax": {
            "url": "promotion",
            "type": "GET",
            "data": {
                action: "searchOmnitureCodesByCampaignId",
                campaignId: campId
            },
            "dataSrc": ""
        },                  
        "columns": [                        
            { "data": "key" },
            { "data": "omnitureCode" },
            { "data": "urlAppName" },
            { "data": "language" },
            { "data": "channel" },
            { "data": "createDateTime", "defaultContent": "" },
            { "data": "updateDateTime", "defaultContent": "" }
        ],
        "columnDefs": [                     
            { "targets": 0, "checkboxes": { "selectRow": true } }
        ],
        "select": {
            "style": "multi"
        },
        "order": [[1, "asc"]],
        "fnInitComplete": function() {
            $("#omnitureCodeSection").show();
        }
    });
};

Answer 1

在使用之前，您可能需要将 DataTables 对象抓取到一个变量中：

var t_OmnitureCode = $("#tbl_omnitureCode").DataTable();
var rows_selected = t_OmnitureCode.column(0).checkboxes.selected();

顺便说一下，您使用外部 ajax 调用填充 DataTable 的方法不是最理想的。有一个 ajax 选项可用于此目的，您可以在其中指定所有必要的参数并更好地与 DataTables API 集成并获得更好的性能（因为您实际上不需要在每次刷新时销毁和创建 DataTable）。

您只需在需要刷新表数据时触发.ajax.reload()。

Answer 2

这是范围问题：您在 $(document).ready 函数中声明变量表。 你可能想把它放在全局范围之外：

变量表；

$(document).ready(function() { 表 = $('#example').DataTable({
... });