javascript - 将可编辑行添加到表中

Question

我在向我的数据表中添加一行时遇到错误:

DataTable Error

我想在表格顶部添加一行，然后新行中的每一列都会有一个可编辑的文本框来输入新信息。我已经通过几个不同的链接在线查看，但没有什么能真正接近我正在寻找的东西。我在编码方面也很新，所以我可能会遗漏一些非常明显的东西!

这是我的代码:

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

问题是添加行函数正在添加空值并且没有足够的列来匹配您的定义(缺少日期列)。

用这个替换你的 addrow 函数，你会看到它有效......

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

替代:设置 columns.defaultContentOption 后，任何 null 或未定义的值都将替换为指定的值。在这种情况下不会显示警告。

这是一个有效的 jsfiddle:http://jsfiddle.net/mgugjkrh/

但是，您需要解决以下问题才能正确更正问题:

1:Jquery 选择器未获取任何数据。

2:添加行函数需要一个空字符串作为第一个值，以防止行选择器 td 被填充。