DataTables build table from Ajax issue, ok from fi

问题:

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/

回答1:

Your DataTables script is out of date. The old script used a different syntax for loading datatables with data from JavaScript.

Please refer to this JSfiddle to see your example working - you can use the following version of the DataTables script:

https://cdn.datatables.net/1.10.0/js/jquery.dataTables.js

回答2:

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();            
        });