Datatables удалить строку из другой таблицы

Question

У меня есть две таблицы данных. Первая - это «Таблица выбора», в которой есть столбец с флажком. Когда этот флажок установлен, данные строки добавляются в «таблицу предварительного просмотра». Если флажок не установлен, он должен удалить строку из таблицы Preview.

Моя проблема в том, что снятие флажка из окна фактически избавляет от «всех» строк в таблице предварительного просмотра.

$('#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(); 
     } 
    }); 

Answer 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/

выше может, конечно, легко обобщить в одну функцию делают оба действия в зависимости от состояния щелчка.