2015-05-04 94 views
0

我有两个数据表。一个是“选择表”,它有一个带有复选框的列。选中此复选框后,行数据将添加到“预览表”中。当该复选框未被选中时,它应该从预览表中删除该行。Datatables从另一个表中删除行

我的问题是,从框中取消选中实际上摆脱了预览表中的“所有”行。

$('#selectNodesTable tbody').on('click', 'tr #nodeToAdd', function() { 
     var row = ($(this)).closest('tr'); 
     var rowObj = nodeTable.row(row).data(); 
     console.log(rowObj); 

     if (($(this)).is(':checked')) { 
      nodePreviewTable.row.add(rowObj); 
      nodePreviewTable.draw(); 
     } else { 
      // THE BELOW STATEMENT DELETES ALL ROWS FROM THE PREVIEW TABLE 
      nodePreviewTable.row().remove(rowObj); 
      nodePreviewTable.draw(); 
     } 
    }); 
+0

看到一个ID作为点击事件的目标选择器是非常可疑的,因为ID不能在页面中重复。也非常怀疑这两个对象在两个表中都是相互引用的。建议您在jsfiddle.net或plnkr.co中创建演示。可以将cdn资源用于数据表js和css – charlietfl

回答

1

这并不完全清楚你想要什么。但是我假设你想根据复选框的点击来回移动两行jQuery dataTables实例。如果你有两个表,#selectNodesTable#previewNodesTable,你可以当一个复选框被选中#selectNodesTable#previewNodesTable这样移动行:

$('#selectNodesTable').on('click', 'input[type=checkbox]', function() { 
    if ($(this).is(':checked')) { 
     $(this).attr('checked', 'checked'); 
     tr = $(this).closest('tr'); 
     row = selectNodesTable.row(tr); 
     rowData = []; 
     tr.find('td').each(function(i, td) { 
      rowData.push($(td).html()); 
     });  
     row.remove().draw(); 
     previewNodesTable.row.add(rowData).draw(); 
    } 
}); 

通知rowData再生。这是为了确保你通过一个复选框,实际上检查。 row.data()将仅返回缓存的行内容,即未选中的复选框。如果你也想做opposit,因为我认为:

$('#previewNodesTable').on('click', 'input[type=checkbox]', function() { 
    if ($(this).not(':checked')) { 
     $(this).removeAttr('checked', 'checked'); 
     tr = $(this).closest('tr'); 
     row = previewNodesTable.row(tr); 
     rowData = []; 
     tr.find('td').each(function(i, td) { 
      rowData.push($(td).html()); 
     });  
     row.remove().draw(); 
     selectNodesTable.row.add(rowData).draw(); 
    } 
}); 

看到演示 - >http://jsfiddle.net/zwLm043e/

以上当然可以很容易地概括成一个单一的功能做取决于国家都行动点击复选框。

相关问题