Adding an editable row to a table

Question

I get an error when adding a row to the data table:

Error DataTable

I want to add a row to the beginning of the table, and then each column in a new row will have an editable text field to enter new information. I looked online through a couple of different links, and nothing came close to what I'm looking for. I am also pretty new to coding, so I might be missing out on something really obvious!

Here is my code:

HTML:

<!--tab start-->
<div class="container-fluid full-width-container data-tables">
        <!-- Title -->
        <h1 class="section-title" id="services">
            <span>Data Table</span>
        </h1><!-- End Title -->

        <!--breadcrum start-->
        <ol class="breadcrumb text-left">
          <li><a href="index.html">Dashboard</a></li>
          <li class="active">Data Table</li>
        </ol><!--breadcrum end-->

        <!-- table card -->
        <section class="row component-section">
            <!-- table card code and example -->
            <div class="col-md-12">
                <div class="component-box">
                    <!-- table card example -->
                    <div  class="pmd-card pmd-z-depth pmd-card-custom-view">
                        <div class="table-responsive">
                        <table id="example-checkbox" class="table pmd-table table-hover table-striped display responsive nowrap" cellspacing="0" width="100%">
                        <thead>
                            <input type="button" value="Add Link" id="addbtn" />
                            <tr>
                                <th></th>
                                <th>First name</th>`enter code here`
                                <th>Last name</th>
                                <th>Position</th>
                                <th>Office</th>
                                <th>Age</th>
                                <th>Start date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td></td>
                                <td>Tiger</td>
                                <td>Nixon</td>
                                <td>System Architect</td>
                                <td>Edinburgh</td>
                                <td>61</td>
                                <td>2011/04/25</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>Garrett</td>
                                <td>Winters</td>
                                <td>Accountant</td>
                                <td>Tokyo</td>
                                <td>63</td>
                                <td>2011/07/25</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>Ashton</td>
                                <td>Cox</td>
                                <td>Junior Technical Author</td>
                                <td>San Francisco</td>
                                <td>66</td>
                                <td>2009/01/12</td>
                            </tr>
                        </tbody>
                    </table>
                        </div>
                    </div> <!-- table card example end -->

                </div>
            </div> <!-- table card code and example end -->
        </section> <!-- table card end -->
</div>
<!--tab start-->

JS:

$(document).ready(function() {
    $('#example-checkbox').DataTable({
        responsive: false,
        columnDefs: [ {
            orderable: false,
            targets:0,
        } ],
        select: {
            style: 'multi',
            selector: 'td:first-child'
        },
        order: [ 1, 'asc' ],
        bFilter: true,
        bLengthChange: true,
        pagingType: "simple",
        "paging": true,
        "searching": true,
        "language": {
            "info": " _START_ - _END_ of _TOTAL_ ",
            "sLengthMenu": "<span class='custom-select-title'>Rows per page:</span> <span class='custom-select'> _MENU_ </span>",
            "sSearch": "",
            "sSearchPlaceholder": "Search",
            "paginate": {
                "sNext": " ",
                "sPrevious": " "
            },
        },
        dom:
            "<'pmd-card-title'<'data-table-title'><'search-paper pmd-textfield'f>>" +
            "<'custom-select-info'<'custom-select-item'><'custom-select-action'>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'pmd-card-footer' <'pmd-datatable-pagination' l i p>>",
    });

    $('#addbtn').click(addrow);

    // addrow
    function addrow() {
        $('#example-checkbox').dataTable().fnAddData( [
            $('#fname').val(),
            $('#lname').val(),
            $('#position').val(),
            $('#office').val(),
            $('#age').val(),
            $('#start').val(),  
        ] );
    }
    // end addrow

    /// Select value

    $("div.data-table-title").html('<h2 class="pmd-card-title-text">Data table</h2>');

} );

Answer 1

The problem is that the add row function adds zeros and does not have enough columns to match your definition (date not specified).

replace your addrow function with this and you will see that it works ...

function addrow() {
    $('#example-checkbox').dataTable().fnAddData( [
        'x',
        'c',
        'p',
        'l',
        'a',
        'z',
        'xyz'
    ] );
}

ALTERNATIVELY: columns.defaultContentOption null undefined . .

jsfiddle: http://jsfiddle.net/mgugjkrh/

, :

1: Jquery .

2: add row , td.