javascript - ASPX URL 产生一个 JSON 字符串，使用 jQuery DataTable 使用

Question

为了练习，我尝试将 JSOn 数据显示到我的 aspx 网页中的数据表中，但该数据表中卡住了 processing 字样。结果当我检查控制台时，错误是 Cannot read property 'length' of undefined

这个错误是什么意思？我如何解决它？这个错误是因为我的方法不对吗？

我所做的是，首先我制作了一个 .aspx.cs 文件，每当它的 URL 被调用时，它就会生成 JSON 字符串:

[{"NickName":"Bob","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Bob","LogIN":"6/6/1846 12:00:00 AM","LogOUT":"6/6/1846 12:00:00 AM"},{"NickName":"Patrick","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/7/1846 12:00:00 AM","LogOUT":"6/7/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/6/1846 12:00:00 AM","LogOUT":"6/6/1846 12:00:00 AM"},{"NickName":"Ward","LogIN":"6/5/1846 12:00:00 AM","LogOUT":"6/5/1846 12:00:00 AM"},{"NickName":"Krabs","LogIN":"","LogOUT":""},{"NickName":"Sandy","LogIN":"","LogOUT":""},{"NickName":"Pearl","LogIN":"","LogOUT":""}]

然后在我应该显示数据表的 .aspx 文件中，我写了这个脚本，这是 dataTables site 上的建议:

 /*using the ajax function*/
       var tbl = $('#datatableJSONEx').DataTable({
           processing: true,
           serverSide: true,
           info: true,
           ajax: "DefaultJSONResult?THEstr=produceJSON",

           order: [[0, 'desc']],
           select: true,
           responsive: true,
           buttons: true,
           length: 10

       });

然后我添加了它在 HTML 中的表示:

        <div>

            <table id="datatableJSONEx" class="display" cellspacing="0" width="100%">                    
                 <thead>
                    <tr>
                        <th>NickName</th>
                        <th>LogIN</th>
                        <th>LogOUT</th> 
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>NickName</th>
                        <th>LogIN</th>
                        <th>LogOUT</th> 
                    </tr>
                </tfoot>
            </table>

        </div>

</div>

是什么导致了错误？解决错误后，如果我希望我的表在服务器发生更改时自动更新，这种方法是否正确？

编辑我在我的 dataTables jQuery 中更改了这个属性:ajax: "DefaultJSONResult?THEstr=produceJSON"进入ajax: $.ajax("DefaultJSONResult?THEstr=produceJSON")

但是，它仍然显示正在处理中。当我在谷歌浏览器中检查元素时，我在控制台上再也看不到任何东西。

更新我更改了我的 jQuery，让 $.ajax() 将我的 url 转换成一个对象，然后我将它传递到数据表的 ajax: 属性中:

var jqxhr = $.ajax("DefaultJSONResult?THEstr=ProduceJSON",
            {
            success: function (data, status, xhr) { //on success
                $('p').append(status);
             },
            error: function (jqXhr, textStatus, errorMessage) { //the action was a failure, know why.
                $('p').append('ERROR: ' + errorMessage);
            }
        });



        /*using the ajax function*/
       var tbl = $('#datatableJSONEx').DataTable({
           processing: true,
           serverSide: true,
           info: true,
           ajax: jqxhr,
           sAjaxDataProp : "",
           columns: [
               { data: 'NickName'},
               { data: 'TimeIN' },
               { data: 'TimeOUT' }
           ],

           order: [[0, 'desc']],
           select: true,
           responsive: true,
           buttons: true,
           length: 10

       });

元素 p 现在返回 SUCCESS 并且控制台上没有错误显示。但数据表仍然没有返回任何内容...JSON 字符串是返回原因的 .aspx url 吗？如何让 Jquery Datatables 接受我的格式？什么是正确的格式？

Answer 1

试试这个:

$(document).ready(function() {
var dataSet = [];
dataSet.push(
    [1,"Sasha","Brenna","0800 1111"],
    [2,"Sage","Mia","(01012) 405872"],
    [3,"Chelsea","Allistair","076 0578 0265"],
    [4,"Uta","Savannah","070 1247 5884"],
    [5,"Remedios","Berk","0995 181 0007"],
    [6,"Ruby","Wayne","0800 1111"],
    [7,"Faith","Fredericka","(01709) 099879"],
    [8,"Myra","Harrison","070 4241 9576"],
    [9,"Drake","Miriam","0800 733635"],
    [10,"Reed","Shannon","076 8597 5067"]
);

$('#data_table').DataTable( {
    data: dataSet,
});

在您的例子中，数据集从 ajax() 调用中获取其值。

Working Fiddle