数据表卡在无法读取未定义的属性长度答案

【问题标题】：datatable stuck in Cannot read property length of undefined数据表卡在无法读取未定义的属性长度
【发布时间】：2019-09-18 14:17:37
【问题描述】：

我一直在尝试使用 jquery Datatable 来显示来自 API 的响应。我已经对它进行了 HTML 表格测试，并且显示效果很好。但是页面太长了，所以我需要使用一个带有分页的表格。

我有 Datatable 插件。我已经实现了我所看到的，在 StackOverflow 上进行了很多谷歌搜索，但还没有取得成功。

我不知道我做错了什么

jQuery(document).ready(function() {
  var url = window.location.href;
  var Id = url.substring(url.lastIndexOf('=') + 1);

  debugger
    jQuery('#ppViewHistoryPage').DataTable( {
        "ajaxSource": 'https://api.premiumpension.com/multichannel/api/Prices/GetFundPriceByDateRange?fundId='+Id+'&startDate=2014-1-1&endDate=2050-1-1',
       "columns": [
            { "result": "FundName" },
            { "result": "ValueDate" },
            { "result": "UnitPrice" },
        ]


    } );
} );

【问题讨论】：

标签： jquery ajax datatable

【解决方案1】：

 $("#dataTables_show_list").dataTable({
        "bDestroy": true,
        "scrollCollapse": true,
        "lengthMenu": [
            [10, 25, 50, 100, 150, 200],
            [10, 25, 50, 100, 150, 200]
        ],
        "bFilter": false,
        "columns": columns,
        "order": [
            [0, "asc"]
        ],
        "columnDefs": [{
            "targets": [1, 2, 3, 4, 5],
            "orderable": false
        }],
        "ajax": {
            url: 'https://api.premiumpension.com/multichannel/api/Prices/GetFundPriceByDateRange?fundId='+Id+'&startDate=2014-1-1&endDate=2050-1-1',
            type: 'POST',
            data: {
                'info': dataInfo
            }

        },
        dom: 'Blfrtip',
        "searching": true,
        buttons: [
            'copy', 'excel', 'pdf'
        ]
    });

来自 ajax 的响应将类似于

[["Md. Belal Uddin","SSD-TECH Head Office","01717255982","active","2017-01-15 14:41:07","<span class=\"edit_contactnumber\"><a class=\"text-decor\" href=\"javascript:void(0)\" onclick=\"managerManager('edit',20)\">Edit<\/a><\/span>&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"edit_contactnumber\"><a class=\"text-decor\" href=\"javascript:void(0)\" onclick=\"getAllManagerAccount(20)\">List Customer<\/a><\/span>"],["Md. Rakibul Hasan Chowdhury","SSD-TECH","01799994853","active","2018-06-07 12:24:59","<span class=\"edit_contactnumber\"><a class=\"text-decor\" href=\"javascript:void(0)\" onclick=\"managerManager('edit',429)\">Edit<\/a><\/span>&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"edit_contactnumber\"><a class=\"text-decor\" href=\"javascript:void(0)\" onclick=\"getAllManagerAccount(429)\">List Customer<\/a><\/span>"],["Tarique Haider","SSD-TECH","453453534","active","2017-01-05 19:37:21","<span class=\"edit_contactnumber\"><a class=\"text-decor\" href=\"javascript:void(0)\" onclick=\"managerManager('edit',7)\">Edit<\/a><\/span>&nbsp;&nbsp;&nbsp;&nbsp;<span class=\"edit_contactnumber\"><a class=\"text-decor\" href=\"javascript:void(0)\" onclick=\"getAllManagerAccount(7)\">List Customer<\/a><\/span>"]]

【讨论】：

【解决方案2】：

我能够修复它对于那些可能有同样问题的人

dataSrc 是您的数组结果。传递 {"data": "nameofField"},

这里的数据是强制性的。直到我添加了表格开始显示的数据

jQuery(document).ready(function () {

  var url = window.location.href;
  var Id = url.substring(url.lastIndexOf('=') + 1);

    jQuery('#ppViewHistoryPage').DataTable( {
      ajax: {
          url: 'https://api.premiumpension.com/multichannel/api/Prices/GetFundPriceByDateRange?fundId='+Id+'&startDate=2014-1-1&endDate=2050-1-1',
          dataSrc: 'result'
      },
      "columns": [
    {"data": "FundName"},
    {"data": "ValueDate"},
    {"data": "UnitPrice"},
  ]
  });

  })

【讨论】：