jQuery DataTables Ajax 调用不起作用答案

【问题标题】：jQuery DataTables Ajax call is not workingjQuery DataTables Ajax 调用不起作用
【发布时间】：2019-09-18 16:46:14
【问题描述】：

我有多个数据表，它们都有自己的 ID。现在这根本没问题，我遇到的问题是我的代码似乎能够完美地输出我的console.log() 调用，但是在我的 Network 选项卡中我看不到我的 ajax 调用?

我正在使用以下 jQuery 代码：

function DtAjax(type) {
    console.log("Type: "+type);
    if($('#data-table_' + type + '_wrapper').children().length == 0){
        console.log("True");
        $('#data-table_' + type).DataTable({
            "ajax": "<?php echo base_url('admin/emails/ajax/get'); ?>" + "/" + type
        });
        console.log("End function");
    }
}

$(document).ready(function(){
    DtAjax(1);
    $("li .changeContent").on('click', function (event) {
        event.preventDefault(); // Prevents going to a different URL

        // Content change
        $(".mailContent").hide('drop', 500).removeClass("active_div");
        $("." + $(this).attr('data-open')).delay(500).show('drop', 500).addClass("active_div");

        // button set new active
        $("#icon_nav_h > li.active").removeClass('active');
        $(this).parent().addClass('active');
    });
});

它记录了 DtAjax 函数中的所有内容，有什么（明显的）原因导致我在我的 Network 选项卡中找不到 Ajax 调用？

【问题讨论】：

标签： jquery ajax datatables

【解决方案1】：

我强烈怀疑这是cache 问题：

$('#data-table_' + type).DataTable({
  ajax: {
    url: "<?php echo base_url('admin/emails/ajax/get'); ?>" + "/" + type,
    cache: false
  }
});

cache 默认为true。

【讨论】：

1 个最佳答案

【解决方案2】：

$(document).ready(function(){
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/apiRequest/api/get',
        success:function(data){
            var result = JSON.parse(data);
            var len = Object.keys(result).length;
            var newLen = len - 1;
            for(i = 0; i <= newLen; i++){

            $( "#alldata" ).append( "<tr><td>"+result[i].fullname +"</td><td>"+result[i].email +"</td> <td>"+result[i].phone +"</td><td>"+result[i].service_type +"</td><td>"+result[i].vehicle_type +"</td> <td>"+result[i].date_time +"</td><td>"+result[i].pick_location +"</td> <td>"+result[i].drop_location +"</td> </tr>" );
        }
          $('#example').DataTable();
        }
    });
});

【讨论】：

【解决方案3】：

我的 ajax 不能正常工作，我遇到了一个控制台错误 Uncaught TypeError: Cannot read property 'length' of undefined。

所以我添加了 success 函数来确保响应数据被接收并且有效。跟踪错误位置，我不知道为什么，但他们出于某种原因添加了 dataSrc 选项的检查

我解决了这个问题，只需将 dataSrc 选项添加到 ajax 配置：

      ajax: {
        url: '/admin/api/modelType',

        // added onSuccess func to make sure the response data is valid
        success: (data) => {
          console.log('success', data)
        return data
        },

        dataSrc: ''
      }
}

更新我发现 dataSrc 是元素位于响应数据中的键，例如，如果响应数据直接包含元素数组 [{element: '1'}] 所以保留空白 dataSrc:''

但是如果响应正文带有： {content: [{element: '1'}]} 就这样吧

      ajax: {
        url: '/admin/api/modelType',
        dataSrc: 'content'
        }
      }

【讨论】：