Question

我正在创建一个列出jQuery Datatable中玩家统计信息的页面。到目前为止，我已经能够显示实际数据库中的数据，但我无法添加任何新的播放器。我创建了一个添加按钮，用于输入新播放器，但是我收到此错误“Datatables warning：table id = test - 第3行第0列请求的未知参数'id'。有关此错误的详细信息，请参阅，{ {3}}“并在单击确定后向表中添加一个空行。这是我的jQuery代码：

$(document).ready(function () {

    $('#test').DataTable({
                "ajax":{
                    "url": "players.json",
                    "dataSrc":""
                },
                "columns": [
                    {"data": "id"},
                    { "data": "playername" },
                    { "data": "points" },
                    { "data": "steals" },
                    { "data": "blocks" },
                    { "data": "assists" },
                    { "data": "mpg" },
                    { "data": "shootingpercentage" },
                    { "data": "threepointpercentage" }
                ]


            });
            var dTable = $('#test').DataTable();
            $('#addbtn').on('click', function(){
                dTable.row.add([

                    $('#id').val(),
                   $('#player').val(),
                    $('#points').val(),
                    $('#steals').val(),
                   $('#blocks').val(),
                    $('#assists').val(),
                    $('#mpg').val(),
                    $('#shotpct').val(),
                    $('#3pct').val()

                    ]).draw();
            });

输入文本框和表格的HTML：

<body>
 <div id="main" class="container">
     <input type="text" name="id" id="id" placeholder="Id" /> 
     <input type="text"  name="player" id="player" placeholder="Player"/> 
     <input type="text" name="points" id="points" placeholder="Points" />
     <input type="text" name="steals" id="steals" placeholder="Steals" />
     <input type="text" name="blocks" id="blocks" placeholder="Blocks" /> 
     <input type="text" name="assists" id="assists" placeholder="Assists" />
     <input type="text" name="mpg" id="mpg" placeholder="MPG" /> 
     <input type="text" name="shotpct" id="shotpct" placeholder="Shot %" />
     <input type="text" name="3pct" id="3pct" placeholder="3 %" /> 




     <input type="button" value="add player" id="addbtn" />
    <br />
     <br />



     <input type="button" value="Delete selected row" id="dltbtn" />
    <div id="table">
        <table id="test" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Points</th>
                    <th>Steals</th>
                    <th>Blocks</th>
                    <th>Assists</th>
                    <th>MPG</th>
                    <th>Shot %</th>
                    <th>3 %</th>

                </tr>
            </thead>
           <tfoot>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Points</th>
                <th>Steals</th>
                <th>Blocks</th>
                <th>Assists</th>
                <th>MPG</th>
                <th>Shot %</th>
                <th>3 %</th>

            </tr>
            </tfoot>


        </table>
    </div>
 </div>
</body>

我只需要能够将放在文本框中的数据显示在数据表中。

Answer 1

问题是你要添加一个数组，而在你的代码中，你指定的源应该是一个对象。您可以更改初始化DataTable的方式，也可以使用如下对象填充行：

  $('#addbtn').on('click', function() {
    dTable.row.add({
      "id": $('#id').val(),
      "playername": $('#player').val(),
      "points": $('#points').val(),
      "steals": $('#steals').val(),
      "blocks": $('#blocks').val(),
      "assists": $('#assists').val(),
      "mpg": $('#mpg').val(),
      "shootingpercentage": $('#shotpct').val(),
      "threepointpercentage": $('#3pct').val()
    }).draw();
  });

希望有所帮助。我想看到你已经获得了现有数据，这将是最好的方法。此外，我会保持沉默，直到它被上传到你的后端，因为服务器错误可能会阻止它插入，而它将在你的UI中。工作示例here。

Answer 2

请检查您的players.json文件的路径。弹出错误消息，因为对json文件的网络调用有问题。

如需进一步阅读，请点击以下链接：dataTables - Warning: Ajax error

JQuery数据表从文本框

2 个答案: