使用循环创建多个表的 Tabledit

Posted 2023-05-08

【中文标题】使用循环创建多个表的 Tabledit

【英文标题】：Tabledit for multiple tables create with loop

【发布时间】：2021-04-07 01:46:16

【问题描述】：

我正在使用循环创建带有 dataTable 和 Tabledit 的 X 表，主要示例来自 https://www.webslesson.info/2020/05/make-editable-datatable-using-jquery-tabledit-plugin-with-php-ajax.html

情况是每个循环，Tabledit 正在添加来自最新列 + 按钮（图像）的信息

img with situation

并且对于每个循环，数据数量较少（循环大小） 如何解决这个问题？

这是代码：（其他phps与链接相同） 另外，如何为每个表格添加行按钮？

main.js:

$(document).ready(function()
html ="";
    for(x = 0; x < 5; x++) 

        html += '<table id="" class="tabla table table-bordered table-striped">';
        html += '<thead>';
        html += ' <tr>';
        html += '  <th>ID</th>';
        html += ' <th>First Name</th>';
        html += ' <th>Last Name</th>';
        html += '  <th>Gender</th>';
        html += ' </tr>';
        html += '</thead>';
        html += '<tbody></tbody>';
        html += '</table>';
    

    $('#tab').append(html);

    //TRAE LOS DATOS DE LA BD
    var dataTable = $('.tabla').DataTable(
     "processing" : true,
     "serverSide" : true,
     "order" : [],
     "ajax" : 
      url:"fetch.php",
      type:"POST"
     

    );

// i did this, but doest work:
      $addRowButton.on('click', function() 
        console.log('clicked');
        $dataTable.row.add([
            counter +'.1',
            counter +'.2',
            counter +'.3',
            counter +'.4',
            counter +'.5'
        ] ).draw( false );
 
        counter++;
      );

   // AGREGA Y EJECUTA BOTONES DE EDITAR, BORRAR
    $('.tabla').on('draw.dt', function()
     $('.tabla').Tabledit(
      url:'action.php',
      dataType:'json',
      columns:
       identifier : [0, 'id'],
       editable:[[1, 'first_name'], [2, 'last_name'], [3, 'gender', '"1":"Male","2":"Female"']]
      ,
      restoreButton:false,
      onSuccess:function(data, textStatus, jqXHR)
      
       if(data.action == 'delete')
       
        $('#' + data.id).remove();
        $('.tabla').DataTable().ajax.reload();
       
      
     );
    );    
   ); 

index.php:

<div id="tab" class="table-responsive">
</div>

【参考方案1】：

您可以使用each 遍历表并分别初始化每个表。

类似：

$(document).ready(function() 
  html = "";
  for (x = 0; x < 5; x++) 
    html += '<table id="" class="tabla table table-bordered table-striped">';
    html += '<thead>';
    html += ' <tr>';
    html += '  <th>ID</th>';
    html += ' <th>First Name</th>';
    html += ' <th>Last Name</th>';
    html += '  <th>Gender</th>';
    html += ' </tr>';
    html += '</thead>';
    html += '<tbody></tbody>';
    html += '</table>';
    html += '<button>Add row</button>';
  

  $('#tab').append(html);

  //TRAE LOS DATOS DE LA BD
  $('.tabla').each(function() 
    var $table = $(this);
    var $addRowButton = $table.next();
    var dataTable = $table.DataTable(
      "processing": true,
      "serverSide": true,
      "order": [],
      "ajax": 
        url: "fetch.php",
        type: "POST"
      
    );

    $addRowButton.on('click', function() 
      $table.row.add([/*add_new_data_here*/]);
    );

    // AGREGA Y EJECUTA BOTONES DE EDITAR, BORRAR
    $table.on('draw.dt', function() 
      $table.Tabledit(
        url: 'action.php',
        dataType: 'json',
        columns: 
          identifier: [0, 'id'],
          editable: [
            [1, 'first_name'],
            [2, 'last_name'],
            [3, 'gender', '"1":"Male","2":"Female"']
          ]
        ,
        restoreButton: false,
        onSuccess: function(data, textStatus, jqXHR) 
          if (data.action == 'delete') 
            $('#' + data.id).remove();
            $('.tabla').DataTable().ajax.reload();
          
        
      );
    );
  );
);

【讨论】：

谢谢 Mosh Feu，解决了，我要做一些测试，但我想我解决了！！！！

你如何为每个表添加一个添加行按钮？ @moshfeu

当然 :) 你的意思是datatables.net/examples/api/add_row.html?

是的，但是我使用的是类而不是 ID，那么当我按下 de 按钮时，我该如何识别我正在调用的表？并将该行添加到该表中

您可以将按钮附加到表格旁边，目标为$table.next()，然后像示例中一样绑定click 事件。我已经更新了答案。