JQuery Datatables从文本框中添加新行答案

【问题标题】：JQuery Datatables add new row from text boxJQuery Datatables从文本框中添加新行
【发布时间】：2016-07-06 20:43:08
【问题描述】：

我正在创建一个在 jQuery 数据表中列出玩家统计数据的页面。到目前为止，我已经能够显示实际数据库中的数据，但我无法添加任何新玩家。我创建了一个添加按钮和 from 用于输入新播放器，但我收到此错误“数据表警告：表 id=test - 请求第 3 行第 0 列的未知参数 'id'。有关此错误的更多信息，请参阅，@ 987654321@" 并在我单击确定后将一个空白行添加到表中。这是我的 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>

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

【问题讨论】：

为什么要准备好文件？ -> modernweb.com/2013/05/06/…
@davidkonrad 我尝试将它移到准备好的文档之外，现在我没有得到任何反应，所以我认为这不是问题。

标签： jquery html datatables row

【解决方案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。

【讨论】：