Question

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

我的操作与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函数中声明变量表。您可能希望将其放在全局范围之外：

var表；

$（document）.ready（function（）{ table = $（'＃example'）。DataTable（{
... }）;

尝试在ajax之外访问dataTable变量给出未定义

2 个答案: