使用带有按钮单击的json数据重绘数据表

时间:2016-12-21 11:47:43

标签: javascript jquery json ajax datatables

如果按加号按钮,我想重绘我的数据表。但是我得到的错误消息是JSON没有很好地形成,即使它是一个有效的JSON。我甚至可以通过调试看到JSON数据中的两个对象。有人可以帮忙吗?

<table class="table display sticky-header" id="tabelle_benutzerHead" cellspacing="0" width="100%">
    <thead >
        <tr>
            <th>Uhrzeit</th>
            <th>SpNr</th>
            <th>Platz</th>
            <th>Heimmannschaft</th>
            <th>Gastmannschaft</th>
            <th>Freispiele</th>
        </tr>
    </thead>
    <tbody>
            <tr id="Row1">
                <td>08:00</td>
                <td>134</td>
                <td>Platz 1</td>
                <td>Team 5</td>
                <td>Team 3</td>
                <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
            </tr>
            <tr id="Row2">
                <td>09:00</td>
                <td>76</td>
                <td>Platz 3</td>
                <td>Team 7</td>
                <td>Team 1</td>
                <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
            </tr>
            <tr id="Row3">
                <td>17:30</td>
                <td>45</td>
                <td>Platz 11</td>
                <td>Team 2</td>
                <td>Team 9</td>
                <td><button class="btn btn-default AddDaten" type="button"><i class="glyphicon glyphicon-plus-sign"></i></button></td>
            </tr>
    </tbody>
</table>



var oTable = $('#tabelle_benutzerHead').DataTable({
    responsive: true,
    "bAutoWidth": false,
    "bFilter": false,
    "info": false,
    "scrollCollapse": true,
    "paging": false,
    rowReorder: true
});

$('#tabelle_benutzerHead').delegate('button.AddDaten', 'click', function() {
        var row = $(this).closest('tr'); // get the parent row of the clicked button                    
        var rowId = $(row).attr('id'); // clicked RowId

        var response = $.ajax({
            type: "POST",
            url: "api.json",
            dataType: "json",
            data: { 
                'rowId': rowId
            }).done(function (result) {

            oTable.clear().draw();
            oTable.rows.add(result);
            oTable.draw();
         });    
    });

我的JSON看起来像这样:

{
   "data": [
       ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
       ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"]
   ]
}

0 个答案:

没有答案