Add Empty Blank Row To JQuery DataTables

Question

User974100899 posted

i'm trying to add an 'Add' button that will add a row to my JQuery Datatable. This is the code i'm using and this is the error I'm getting. storeNumber is a valid column in my JSON dataset, so I'm confused.

DataTables warning: table id=tblARS - Requested unknown parameter 'storeNumber' for row 211, column 0. For more information about this error, please see http://datatables.net/tn/4

$('#AddRow').click(function () {
var AddCount = -1;
AddCount = AddCount + 1;
tblARS.row.add(['<input type="text" id="storeNumber' + AddCount + '" name="storeNumber' + AddCount + '" value="">', '<input type="text" id="storeName' + AddCount + '"name="storeName="' + AddCount + '" value="">', '<input type="text" id="activeStore' + AddCount + '"name="activeStore="' + AddCount + '" value="">']).draw(false);
return false;
});

Answer 1

User288213138 posted

Hi LiarLiarPantsOnFire,

DataTables warning: table id=tblARS - Requested unknown parameter 'storeNumber' for row 211, column 0. For more information about this error, please see <a href="http://datatables.net/tn/4

">http://datatables.net/tn/4

Please check your data source. 

This warning will be caused when your data itself has more column than the "<input>" in the add new row.

This is my test code, If the number of <td> is more than the number of <input>, there will be this warning.

<script>
        $(document).ready(function () {
            $('#AddRow').click(function () {
                //var storeNumber = 1;
                var AddCount = -1;
                AddCount = AddCount + 1;
              
                $('#example').DataTable().row.add(['<input type="text" id="storeNumber' + AddCount + '" name="storeNumber' + AddCount + '" value="">', '<input type="text" id="storeName' + AddCount + '"name="storeName="' + AddCount + '" value="">', '<input type="text" id="activeStore' + AddCount + '"name="activeStore="' + AddCount + '" value="">']).draw(false);
                return false;
            });
        });
    </script>


<form id="form1" runat="server">
        <div>
            <table id="example" style="width: 100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <%--<th>Age</th>--%>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <%--<td>61</td>--%>
                     
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <%--<td>61</td>--%>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                        <%--<td>61</td>--%>
                    </tr>
                </tbody>

            </table>
            <input id="AddRow" type="button" value="button" />
        </div>
    </form>

Best regard,

Sam

Answer 2

User974100899 posted

Hi @samwu - I was able to resolve my issues by aliasing the fields like the below code illustrates.

        $('#AddRow').click(function () {
            var AddCount = -1;
            AddCount = AddCount + 1;
			tblARS.row.add( {
				"storeNumber":  '<input type="text" id="storeNumber' + AddCount + '" name="storeNumber' + AddCount + '" value="">',
				"storeName":    '<input type="text" id="storeName' + AddCount + '"name="storeName="' + AddCount + '" value="">',
				"activeStore":   '<input type="text" id="activeStore' + AddCount + '"name="activeStore="' + AddCount + '" value="">',
            }).draw();
            return false;
        });