添加编辑一行到表

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

的问题是添加行的功能被加入空值，并且没有足够的列，以符合您定义（日期col缺失）。

与此更换你的addrow功能，你会看到它的工作原理...

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

或者：随着columns.defaultContentOption集，任何null或undefined值将用指定的值替换。在这种情况下不会有任何警告。

这里是一个工作的jsfiddle：http://jsfiddle.net/mgugjkrh/

然而，你将需要解决以下问题妥善解决问题：

1：jQuery选择没有得到任何数据。

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