添加編輯一行到表

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。