JQuery Datatables從文本框中添加新行

我創建了一個列出jQuery Datatable中玩家統計數據的頁面。到目前爲止，我已經能夠顯示實際數據庫中的數據，但我無法添加任何新玩家。我創建了一個添加按鈕，並從輸入新玩家開始，但是我收到此錯誤「Datatables warning：table id = test - 請求未知參數'id'，用於第3行第0列。有關此錯誤的更多信息，請參見https://datatables.net/manual/tech-notes/4 「並點擊確定後，空白行被添加到表中。這裏是我的jQuery代碼：JQuery Datatables從文本框中添加新行

$(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>

我只需要能夠讓我把文本框中的數據顯示在數據表。

來源

2016-07-06 hereswilson

爲什麼文件準備好了？ - > ** http：//modernweb.com/2013/05/06/5-things-you-should-stop-doing-with-jquery/** – davidkonrad

@davidkonrad我試着把它移到文檔之外準備好了，現在我不要有任何反應，所以我不認爲這是問題所在。 – hereswilson

-1

請檢查您的players.json文件的路徑。該錯誤消息會彈出，因爲網絡對您的json文件的調用有問題。

如要進一步瞭解，請點擊此鏈接：dataTables - Warning: Ajax error

來源

2016-07-06 21:18:05

我不認爲這是問題所在。在錯誤消息中，它還包含一個[link]（https://datatables.net/manual/tech-notes/4）到一個不同的錯誤消息，但我不知道爲什麼我得到錯誤。 – hereswilson

的問題是，您要添加的陣列，而在你的代碼你指定的來源應該是一個對象。你可以改變你初始化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(); 
    });

希望有所幫助。我想你已經得到了現有的數據，這將是最好的方法。另外，如果服務器錯誤可能會阻止它的插入，而它將在您的用戶界面中，那麼我會默認添加該行直到它被上傳到後端。工作示例here。

來源

2016-07-09 14:27:48 annoyingmouse

JQuery Datatables從文本框中添加新行

回答

相關問題