DataTabless Add rows

DataTables动态添加行

最新推荐文章于 2023-03-05 22:30:25 发布

转载最新推荐文章于 2023-03-05 22:30:25 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sdream/p/5368267.html

文章标签：

#javascript #ViewUI

本文介绍如何使用DataTables插件为表格动态添加行。通过jQuery选择器和DataTables API，可以轻松实现添加新行的功能，并提供了完整的代码示例。

参考官网案例：https://datatables.net/examples/api/add_row.html
JS:
$(document).ready(function() {
 
  var  
  t = $( 
  '#example' 
  ).DataTable(); 
 
  var  
  counter = 1; 
 
  $( 
  '#addRow' 
  ).on(  
  'click' 
  ,  
  function  
  () { 
 
  t.row.add( [ 
 
  counter + 
  '.1' 
  , 
 
  counter + 
  '.2' 
  , 
 
  counter + 
  '.3' 
  , 
 
  counter + 
  '.4' 
  , 
 
  counter + 
  '.5' 
 
  ] ).draw(  
  false  
  ); 
 
  counter++; 
 
  } ); 
 
  // Automatically add a first row of data 
 
  $( 
  '#addRow' 
  ).click(); 
 
   HTML: 
 
<tableid="example"class="display"cellspacing="0"width="100%"> 
            
   < 
   thead 
   > 
  
   < 
   tr 
   > 
  
   < 
   th 
   >Column 1</ 
   th 
   > 
  
   < 
   th 
   >Column 2</ 
   th 
   > 
  
   < 
   th 
   >Column 3</ 
   th 
   > 
  
   < 
   th 
   >Column 4</ 
   th 
   > 
  
   < 
   th 
   >Column 5</ 
   th 
   > 
  
   </ 
   tr 
   > 
  
   </ 
   thead 
   > 
  
   < 
   tfoot 
   > 
  
   < 
   tr 
   > 
  
   < 
   th 
   >Column 1</ 
   th 
   > 
  
   < 
   th 
   >Column 2</ 
   th 
   > 
  
   < 
   th 
   >Column 3</ 
   th 
   > 
  
   < 
   th 
   >Column 4</ 
   th 
   > 
  
   < 
   th 
   >Column 5</ 
   th 
   > 
  
   </ 
   tr 
   > 
  
   </ 
   tfoot 
   > 
  
   </ 
   table 
   > 
  
    CSS: 
  
   https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css

转载于:https://www.cnblogs.com/sdream/p/5368267.html