locked
Add Empty Blank Row To JQuery DataTables RRS feed

  • 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;
    });
    



    Wednesday, October 23, 2019 12:56 AM

Answers

  • 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;
            });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 23, 2019 8:15 PM

All replies

  • 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

    Wednesday, October 23, 2019 3:35 AM
  • 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;
            });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 23, 2019 8:15 PM