Question

对于练习，我试图将JSOn数据显示在我的aspx网页中的数据表中，但是数据表仍然存在 processing 这个词。当我检查控制台时，错误是无法读取属性＆＃39;长度＆＃39;未定义的

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

我做的是，首先我制作了一个.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并且控制台显示没有错误。但仍然数据表没有返回任何内容...是返回原因的.aspx url的JSON字符串？如何使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,
});

在您的情况下，dataSet从ajax（）调用中获取其值。

Working Fiddle

Answer 2

如果您使用dataset，则需要向datatable发送适当的server side datatable。以下是使用server side datatable

的asp.net的工作示例

[WebMethod]
[System.Web.Script.Services.ScriptMethod(UseHttpGet = true)]
public static DataTableData GetData()
{

   List<string[]> list = new List<string[]>();
   DataTableData data = new DataTableData();
   data.data = new List<string[]>();

   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "1" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "2" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "3" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "4" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "5" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "6" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "7" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "8" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "9" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "10" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "11" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "12" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "13" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "14" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "15" });
   list.Add(new string[] { "Mairaj", "Ahmad", "Minhas", "16" });

   int start = 0;
   int length = 0;
   int draw = 0;
   int.TryParse(HttpContext.Current.Request.QueryString["start"].ToString(), out start);
   int.TryParse(HttpContext.Current.Request.QueryString["length"].ToString(), out length);
            int.TryParse(HttpContext.Current.Request.QueryString["draw"].ToString(), out draw);

   data.draw = draw;
   var filter = list.Skip(start).Take(length).ToList();
   data.data = filter;

   data.recordsFiltered = list.Count;
   data.recordsTotal = list.Count;
   return data;
}

public class DataTableData
{
  public int draw { get; set; }
  public int recordsTotal { get; set; }
  public int recordsFiltered { get; set; }
  public List<string[]> data { get; set; }

 }

这是数据表定义

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>

                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>ID</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>ID</th>
            </tr>
        </tfoot>
    </table>

Answer 3

我能够使用Datatables的ajax属性输出表格。我只是按照此处的说明获取我的特定JSON字符串的格式。

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":""}]

HTML

 <div class="col-md-4">
        <h2>JQUERY Datagrid</h2>
        <p>Free Datatables via Jquery. Data is produced via JSON data source. </p>
            <div>

                <table id="datatableJSONEx" class="display">                    
                     <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>

..和JS

       var tbl = $('#datatableJSONEx').DataTable({

           ajax: {
               dataSrc: "",
               url: "DefaultJSONResult?THEstr=produceJSON"
           },

           columns: [
               { data: 'NickName' },
               { data: 'LogIN' },
               { data: 'LogOUT' }
           ],
           order: [[0, 'desc']],
           select: true,
           responsive: true,
           buttons: true,
           length: 10
       });

        //we set an interval so that grid automatically reloads every afer 10 secs.
       setInterval(function () {
       tbl.ajax.reload( null, false ); // ( null, false) so user paging is not reset on reload
            }, 10000 ); //10 seconds!

（感谢Mayank在正确的方向上刺激我。我或多或少更清楚地知道ajax works的方式。我也能通过JSON.ajax() success返回值，但我最终决定上面的代码，因为我可以通过.ajax.reload()）

使网页生效

ASPX URL生成一个JSON字符串，Consume with jQuery DataTable

3 个答案: