DataTables从Ajax问题构建表,从文件中确定,参数丢失了吗?表中没有数据

时间:2015-08-12 07:26:14

标签: javascript jquery ajax datatables

Datatables从javascript填充数据时遇到问题。

如果我从文件中加载相同的javascript结果,则使用" ajax" Datatable参数定义中的属性。了解到我需要使用"数据"属性改为。

文件包含:{"数据":[{"米":"测试"," id":15,&#34 ; 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="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>

这有效但需要通过删除列名来格式化jSon javascript返回的数据。

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

更新: Docs

2 个答案:

答案 0 :(得分:2)

您的DataTables脚本已过期。旧脚本使用不同的语法来使用JavaScript中的数据加载数据表。

请参阅this JSfiddle以查看您的示例是否有效 - 您可以使用以下版本的DataTables脚本:

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

答案 1 :(得分:1)

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

由于我的jSon返回的对象包含列名信息, [{&#34; meter&#34;:&#34; test&#34;,&#34; id&#34;:15,&#34; desc&#34;:&#34; testDesc&#34;}] ,  我希望按原样使用这种格式,而不是必须删除内容,因为在返回对象的顺序被更改的情况下,该表的工作原理相同。

Haven尚未在jsFiddle中工作。 http://jsfiddle.net/j5a390d9/5/ 但在我的应用程序中工作正常。 jsFiddle的原因是我正在对未在互联网上公开的Web服务进行ajax调用。尝试从我网站上传的文件中获取响应,但由于跨站点脚本而无法获得响应。尝试了代理但仍然。

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

public void test(){
    String text = "# suppress inspection \"UnusedProperty\" for whole file\n" +
            "\n" +
            "# Notes\n" +
            "# I used the phrase \"Power Flower\" in English as it rhymes. They can be called something else in other languages.\n" +
            "# They're \"fleurs magiques\" (Magic Flowers) in French.\n" +
            "\n" +
            "# Tutorials\n" +
            "#-----------\n" +
            "Tutorial_1_1=Составляй слова, проводя пальцем по буквам.Сейчас попробуй создать слово  'СОТЫ'\n" +
            "Tutorial_1_2=Ты можешь складывать слова справа налево. Попробуй составить слово 'ЖАЛО' справа налево\n" +
            "Tutorial_1_3=Слова могут распологаться сверху вниз, снизу вверх, справа налево, слева направо, а также по диагонали.\n" +
            "Tutorial_1_4=Создавая слова, ты можешь изменять направление.Составь слово 'ВОСК'\n" +
            "Tutorial_1_5=Ты даже можешь пересекать свое собственное слово. Тем не менее, используй каждую букву только один раз. А сейчас, сложи слово 'УЛЕЙ'\n" +
            "Tutorial_1_6=Чем длиннее окажется твоё слово, тем больше у тебя шансов получить много очков и возможность заработать Чудо-Цветок. Составь слово 'ПЧЕЛА'\n" +
            "Tutorial_1_7=Получи Чудо-Цветы за каждое слово из пяти или более букв. Они могут быть использованы в качестве любой из букв.\n" +
            "Tutorial_1_8=Составь слово 'СТЕБЕЛЬ'\n" +
            "Tutorial_1_9=Из разных по длине и форме слов получаются разные Чудо-Цветы.\n" +
            "Tutorial_1_10=Теперь ты справишься сам. Составь еще четыре слова, чтобы уровень был пройден";

    // This defaults to the default charset, which in my instance, and most probably yours is UTF-8
    byte[] bytes = new byte[0];
    try {
        bytes = text.getBytes("UTF-8");
    } catch (UnsupportedEncodingException e) {
        e.printStackTrace();
    }

    String test = new String(bytes);
    // This is correct
    Gdx.app.log("File1", test);

    ByteArrayInputStream is = new ByteArrayInputStream(bytes);
    InputStreamReader reader = null;
    try {
        reader = new InputStreamReader(is, "UTF-8");
    } catch (UnsupportedEncodingException e) {
        e.printStackTrace();
    }

    BufferedReader br = new BufferedReader(reader);
    StringBuilder fileContents = new StringBuilder();
    String line;
    try {
        while ((line = br.readLine()) != null) {
            fileContents.append(line + "\r\n");
        }
    } catch (IOException e) {
        e.printStackTrace();
    }

    // This is incorrect
    Gdx.app.log("File2", fileContents.toString());
}