DataTables从Ajax问题构建表，从文件确定，参数丢失？表中没有数据 [英] DataTables build table from Ajax issue, ok from file, parameter missing? No data available in table

问题描述

如果我从文件中加载相同的JavaScript结果，可以使用Datatable参数中的ajax属性完美工作定义。了解到，我需要使用数据属性。

文件包含：{data：[{meter：test，id ：15，desc：testDesc}]}

这是我的功能：

  $（document）.ready（function（）{
 dataset = {
data：[{
meter：test，
id：15，
desc：testDesc
}] 
}; 
 // var dataset = [['test'，'15' testDesc']]; 
 
 $（'＃MeterDataTable'）。DataTable（{
 //ajax：'DataTables-1.10.7 / examples / ajax / data / meterDataJsonDown.txt '，
data：dataset，
columns：[{
data：meter
}，{
data：id 
}，{
data：desc
}] 
}）; 
 // saveToFile（dataset）; 
 // alert （'dataset is'+ dataset）; 
}）; 
  

HTML

 < table id =MeterDataTableclass =displaycellspacing =0width =100％> 
< thead> 
< tr> 
< th> meter< / th> 
< th> id< / th> 
< th> desc< / th> 
< / tr> 
< / thead> 
< tfoot> 
< tr> 
< th> meter< / th> 
< th> id< / th> 
< th> desc< / th> 
< / tr> 
< / tfoot> 
< / table> 
  

这个工作，但需要通过删除列名来格式化jSon JavaScript返回的数据。

  $（document）.ready（function（）{
 var dataset = [
 ['test '，'15'，'testDesc'] 
]; 
 $（'＃MeterDataTable'）DataTable（{
data：dataset，
columns {
title：meter
}，{
title：id
}，{
title：desc
}] 
}）; 
}）; 
  

更新：
http://jsfiddle.net/j5a390d9/

解决方案

我终于有一个根据我的初始要求，工作功能

由于我的jSon返回对象包含列名信息，
[{meter：test，id ：15，desc：testDesc}]，
我想使用这种格式，而不是必须剥离内容，因为返回对象的顺序被更改，表的工作原理是一样的。

还没有在jsFiddle中工作。 http://jsfiddle.net/j5a390d9/5/
但在我的应用程序中工作正常。 jsFiddle的原因是我正在对不在互联网上暴露的Web服务进行ajax调用。已尝试从我的网站上传的文件获取响应，但不能由于跨站点脚本。尝试一个代理，但仍然。

无论如何，这是我的工作代码。

  var数据集; 
 
 function meterData（）{
 $ .ajax（{
 type：POST，
 url：jSonServices.asmx / getAllMeters，
 contentType：application / json; charset = utf-8，
 dataType：json，
 async：false，
 cache：false，
 timeout：10000，
 success：function（msg）{
 if（（msg）.length< 5）
 alert（No data Found！）; 
 else {
 // dataset = [{meter：test，id：15，desc：testDesc}]; 
 //！important！将msg.d字符串解析成对象
 var obj = JSON.parse（msg.d）; 
 $（'＃MeterDataTable'）。DataTable（
 {
aaData：obj，
aoColumns：[
 {mData：meter}，
 {mData：id}，
 {mData：desc} 
] 
} 
）; 
} 
}，
错误：function（e）{
 alert（not ok+ e.responseText）; 
} 
}）; 
 
} 
 
 $（document）.ready（function（）{
 meterData（）; 
}）; 
  

I have an issue with Datatables populating data from javascript.

If I load the same javascript result from file it works perfectly using the "ajax" attribute in Datatable parameter definition. Have learned that I need to use the "data" attribute instead.

File contains: { "data": [{ "meter": "test", "id": 15, "desc": "testDesc"}] }

This is my function:

$(document).ready(function () {
    dataset = {
        "data": [{
            "meter": "test",
            "id": 15,
            "desc": "testDesc"
        }]
    };
    //var dataset = [  ['test','15','testDesc'] ];            

    $('#MeterDataTable').DataTable({
        //"ajax": 'DataTables-1.10.7/examples/ajax/data/meterDataJsonDown.txt',
        "data": dataset,
            "columns": [{
            "data": "meter"
        }, {
            "data": "id"
        }, {
            "data": "desc"
        }]
    });
    //saveToFile(dataset);
    //  alert('dataset is '+ dataset);
});  

HTML

<table id="MeterDataTable" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>meter</th>
            <th>id</th>
            <th>desc</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>meter</th>
            <th>id</th>
            <th>desc</th>
        </tr>
    </tfoot>
</table>

This works but need to format the jSon javascript returned data by removing the column names.

$(document).ready(function () {
    var dataset = [
        ['test', '15', 'testDesc']
    ];
    $('#MeterDataTable').DataTable({
        "data": dataset,
            "columns": [{
            "title": "meter"
        }, {
            "title": "id"
        }, {
            "title": "desc"
        }]
    });
});

Updated: http://jsfiddle.net/j5a390d9/

解决方案

I have finally a working function as per my initial requirements.

As my jSon returned object contained column name information, [{ "meter": "test", "id": 15, "desc": "testDesc"}], I wanted to use this format as is instead of having to strip down the content as in case order of returned object is altered, the table works just the same.

Haven't got it working in jsFiddle yet. http://jsfiddle.net/j5a390d9/5/ but works ok in my application. Reason for jsFiddle is that I am doing an ajax call to a web service not exposed on internet. Have tried get response from an uploaded file on my website but cannot due to cross site scripting. Tried a proxy but still.

Anyways, this is my working code.

var dataset ;

        function meterData() {
            $.ajax({
                type: "POST",
                url: "jSonServices.asmx/getAllMeters",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                cache: false,
                timeout: 10000,
                success: function (msg) {
                    if ((msg).length < 5)
                        alert("No data Found!");
                    else {
                        //dataset =  [{ "meter": "test", "id": 15, "desc": "testDesc"}];
                        // !important! Parse msg.d string into object                  
                        var obj = JSON.parse(msg.d);                                       
                 $('#MeterDataTable').DataTable(
            {
                "aaData": obj,
                "aoColumns": [
                            { "mData": "meter" },
                            { "mData": "id" },
                            { "mData": "desc" }
                           ]
            }
            );
                    }
                },
                error: function (e) {
                    alert("not ok" + e.responseText);
                }
            });    

        }              

        $(document).ready(function () {
            meterData();            
        });

这篇关于DataTables从Ajax问题构建表，从文件确定，参数丢失？表中没有数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！