ASPX URL生成一个JSON字符串，与jQuery DataTable一起使用 [英] ASPX URL produces a JSON string, Consume with jQuery DataTable

问题描述

为了练习，我试图将JSOn数据显示到我的aspx网页中的数据表中，但是该数据表被单词 processing 所卡住.原来，当我检查控制台时，错误是无法读取未定义的属性'length'

For practice, I am trying to display JSOn data into a datatable in my aspx webpage, but the datatable is stuck with the word processing. Turns out when I inspect the console, the error is Cannot read property 'length' of undefined

此错误是什么意思?我如何解决它?是因为我使用错误的方法导致的错误?

What does this error mean? how do I fix it? is this error because of my wrong approach?

我所做的是，首先我创建了一个.aspx.cs文件，该文件会在每次调用URL时生成JSON字符串:

What I did is, first I made a .aspx.cs file that produces the JSON string whenever it's URL is called:

[{"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网站上建议的:

Then on my .aspx file where I am supposed to display the datatable, I wrote this script which is the suggested on the 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表示形式:

Then I added it's representation in 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>

是什么原因导致错误?解决错误后，如果我希望在服务器发生更改时自动更新表，此方法是否正确?

What is causing the error? When the error has been addressed, is this approach correct if I want my tables to automatically update when there are changes to the server?

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

EDIT I changed this property in my dataTables jQuery : ajax: "DefaultJSONResult?THEstr=produceJSON" into ajax: $.ajax("DefaultJSONResult?THEstr=produceJSON")

但是，它仍然显示处理中..当我检查google chrome中的元素时，控制台上再也看不到任何东西.

however, it still displays processing.. and I can't see anything on the console anymore when I inspect element in google chrome.

更新 我将jQuery更改为将$.ajax()的url转换为对象，然后将其传递到数据表的ajax:属性:

UPDATE I changed my jQuery to have $.ajax() convert my url into an object, then I pass it into the ajax: property of the datatable:

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，并且在显示的控制台上没有错误.但是，数据表仍然不返回任何内容.... aspx url的JSON字符串返回原因吗?如何使Jquery Datatables接受我的格式?正确的格式是什么?

the element p now returns SUCCESS and there are no errors on the console showing. BUT STILL the datatable returns nothing... is the JSON string the .aspx url returning the cause? how can I make Jquery Datatables acccept my format? What is the correct format?

推荐答案

尝试一下:

$(document).ready(function() {
var dataSet = [];
dataSet.push(
    [1,"Sasha","Brenna","0800 1111"],
    [2,"Sage","Mia","[phone]"],
    [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","[phone]"],
    [8,"Myra","Harrison","070 4241 9576"],
    [9,"Drake","Miriam","0800 733635"],
    [10,"Reed","Shannon","076 8597 5067"]
);

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

在您的情况下，dataSet从ajax()调用中获取其值.

工作小提琴

这篇关于ASPX URL生成一个JSON字符串，与jQuery DataTable一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！