Question

当用户提交表单时，通过ajax动态添加TableA行。 Ajax返回一个对象每次调用ajax时都会清除TableA行，并用不同的数据替换，但TableB行仍然保持不变。

我想要完成的是：
- 单击TableA上的行，选中行并将其推送到TableB
- 单击TableB上的选定行，取消选择行并从TableB中删除 - 单击TableB上的行，删除行并在TableA上取消选择 - 支持TableA的移位点击（多行）

以下是一个示例：http://live.datatables.net/tiruyode/6/edit

Answer 1

使用以下代码：

var tablea = $('#tablea').DataTable({
    select: {
        style: 'multi+shift'
    },
    order: []
});

var tableb = $('#tableb').DataTable({
    select: {
        style: 'multi+shift'
    },
    order: []
});


tablea.on('select.dt deselect.dt', function (e, dt, type, indexes) {
  // Add extra data element containing table A row index
  var tableData=[];     
  tablea.rows({ selected: true }).every(function(rowIdx){
    var rowData = this.data();
    rowData.push(rowIdx);
    tableData.push(rowData);
  });

  // Add all selected rows to table B 
  tableb
    .clear()
    .rows.add(tableData)
    .draw();
});

tableb.on('select.dt', function (e, dt, type, indexes) {
  tableb.rows({ selected: true }).every(function(rowIdx){
    // Retrieve table A row index
    var tableARowIdx = this.data().pop();

    // Deselect row in table A
    tablea.row(tableARowIdx).deselect();
  });
});

请参阅this example以获取代码和演示。

如果您的数据源是通过Ajax检索的对象，您可以看到this example代码和演示。

利用行表单点击多个表格

1 个答案: