JQuery Datatables add new row from text box

Question

I'm creating a page that lists the stats of players in a jQuery Datatable. So far I've been able to display the data that is in the actual database, but I have not been able to add any new players. I created an add button and from for inputing the new player, but I get this error "Datatables warning: table id=test - Requested unknown parameter 'id' for row 3, column 0. For more information about this error please see, https://datatables.net/manual/tech-notes/4 " and a blank row is added to the table after I click ok. Here is my jQuery code:

$(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();
            });

And the HTML for the input text boxes and table:

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

I just need to be able to make the data I put in the text boxes show up in the datatable.

@davidkonrad I tried moving it outside the document ready and now I don't get any kind of reaction so I don't think that was the problem. — hereswilson

annoyingmouse annoyingmouse · Accepted Answer · 2016-07-09T14:27:48

The issue is that you're adding an array whereas in your code you're specifying the source should be an object. You can either alter the way you initialize the DataTable or populate the row with an object like this:

  $('#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();
  });

Hope that helps. I guess seeing as you're already getting existing data that would be the best approach. Also, I'd be reticent about adding the row until after it's been uploaded to your backend as a server error might prevent it's insertion whilst it'll be in your UI. Working example here.

JQuery Datatables add new row from text box

1 Answers