Jquery Datatable 한 테이블에서 다른 테이블에 행 추가

Question

표 1의 테이블 2에서 행을 추가하려고합니다. 내가 체크 박스 열에서 행을 선택하고 사용자를 추가 누르면

표에이 행을 추가합니다 1

내가 입력을 클릭하면 옆에 내가 모든 선택 또는 없음에 대한 옵션이 사용자 버튼을 추가 모두 선택

버튼 추가 사용자를 누른 후 표 2의 모든 행이 표 1에 추가됩니다.

나는 아무도 모든 확인란을 해제

을 선택하면 내가 클릭하면 모두 선택 모든 체크 박스

jsfiddle : http://jsfiddle.net/f7debwj2/11/

HTML :

<br> 
<br> 
<h1> 
table1 
</h1><br> 
<br> 
<table id="example" class="display" width="100%" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>First name</th> 
     <th>Place</th> 
     <th>Order</th> 
    </tr> 
    </thead> 
</table> 

<br> 
<br> 
<h1> 
table 2 
</h1><br> 
<br> 
<table id="example2" class="display" width="100%" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>First name</th> 
     <th>Place</th> 
     <th>checkbox</th> 
    </tr> 
    </thead> 
</table> 


<div class="col-md-12"> 
    <div class="col-md-6"> 
    <button type="button" class="btn btn-success">Add a user</button> 
    </div> 
    <div class="col-md-6">select all or none 
    <div class="btn-group"> 
     <div class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     <input type="checkbox" name="vehicle1" value="Bike"> 
     <i class="fa fa-caret-down" aria-hidden="true"></i> 
     </div> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">All</a></li> 
     <li><a href="#">None</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

JQuery와

$(document).ready(function() { 
    var dt = $('#example').dataTable(); 
    dt.fnDestroy(); 
}); 

$(document).ready(function() { 
    var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2'; 
    var table = $('#example').DataTable({ 
    ajax: url, 
    createdRow: function(row, data, dataIndex) { 
     $(row).attr('id', 'row-' + dataIndex); 
    }, 
    rowReorder: { 
     dataSrc: 'order', 
    }, 
    columns: [{ 
     data: 'order' 
    }, { 
     data: 'name' 
    }, { 
     data: 'place' 
    }] 
    }); 
    table.rowReordering(); 

}); 


$(document).ready(function() { 
    var dt = $('#example2').dataTable(); 
    dt.fnDestroy(); 
}); 

$(document).ready(function() { 
    var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2'; 
    var table = $('#example2').DataTable({ 
    ajax: url, 
    createdRow: function(row, data, dataIndex) { 
     $(row).attr('id', 'row-' + dataIndex); 
    }, 
    rowReorder: { 
     dataSrc: 'order', 
    }, 
    columns: [{ 
     data: 'order' 
    }, { 
     data: 'name' 
    }, { 
     data: 'checkbox' 
    }] 
    }); 
    table.rowReordering(); 

}); 

$(document).ready(function() { 
    $('body').on('mouseenter', 'input', function() { 
    $('.btn').prop('disabled', true); 
    }); 
    $('body').on('mouseout', 'input', function() { 
    $('.btn').prop('disabled', false); 
    }); 
}); 

Answer 1

코드를 약간 변경했습니다. 이 샘플은 작업 및 요구 사항에 적합하게 나타납니다. 다행히도, 그것은 당신을 도울 것입니다.

HTML :

<br> 
<br> 
<h1> 
    table1 
</h1> 
<br> 
<br> 
<table id="example" class="display" width="100%" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>First name</th> 
     <th>Place</th> 
     <th>Order</th> 
    </tr> 
    </thead> 
</table> 

<br> 
<br> 
<h1> 
    table 2 
</h1> 
<br> 
<br> 
<table id="example2" class="display" width="100%" cellspacing="0"> 
    <thead> 
    <tr> 
     <th>First name</th> 
     <th>Place</th> 
     <th>checkbox</th> 
    </tr> 
    </thead> 
</table> 


<div class="col-md-12"> 
    <div class="col-md-6"> 
    <button type="button" class="btn btn-success" id="btnAddUser">Add a user</button> 
    </div> 
    <div class="col-md-6">select all or none 
    <div class="btn-group"> 
     <div class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     <input type="checkbox" name="vehicle1" value="Bike"> 
     <i class="fa fa-caret-down" aria-hidden="true"></i> 
     </div> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a id="checkAll">All</a></li> 
     <li><a id="uncheckAll">None</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

자바 스크립트 :

function addUser() 
{    
    var $source = $("#example2").DataTable();   
    var names = $($source.rows().nodes()) 
     .filter(':has(:checked)') 
     .map(function() { 
      return $(this).children().first().text();     
     }).toArray(); 

    var $rows = $source.rows(function (i, data) { 
     return names.indexOf('' + data.order) != -1; 
    }); 

    var data = $rows.data(); 

    if (data.length > 0) 
     $("#example").DataTable().rows.add(data.toArray()).draw(); 
} 

function checkAll(check) 
{  
    var $source = $("#example2").DataTable();   
    var names = $($source.rows().nodes()) 
     .find('input[type="checkbox"]') 
     .each(function (i, el) { 
      el.checked = check == 1; 
     }); 

     return false; 
} 

$(document).ready(function() { 
    var dt = $('#example').dataTable(); 
    dt.fnDestroy(); 
}); 

$(document).ready(function() { 
    var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2'; 
    var table = $('#example').DataTable({ 
     ajax: url, 
     createdRow: function(row, data, dataIndex) { 
      $(row).attr('id', 'row-' + dataIndex); 
     }, 
     rowReorder: { 
      dataSrc: 'order', 
     }, 
     columns: [{ 
      data: 'order' 
     }, { 
      data: 'name' 
     }, { 
      data: 'place' 
     }] 
    }); 
    table.rowReordering(); 
}); 


$(document).ready(function() { 
    var dt = $('#example2').dataTable(); 
    dt.fnDestroy(); 
}); 

$(document).ready(function() { 
    var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2'; 
    var table = $('#example2').DataTable({ 
     ajax: url, 
     createdRow: function(row, data, dataIndex) { 
      $(row).attr('id', 'row-' + dataIndex); 
     }, 
     rowReorder: { 
      dataSrc: 'order', 
     }, 
     columns: [{ 
      data: 'order' 
     }, { 
      data: 'name' 
     }, { 
      data: 'checkbox' 
     }] 
     }); 
     table.rowReordering(); 
}); 

$(document).ready(function() { 
    $('body').on('mouseenter', 'input', function() { 
     $('.btn').prop('disabled', true); 
    }); 
    $('body').on('mouseout', 'input', function() { 
     $('.btn').prop('disabled', false); 
    }); 

    $('#checkAll').click(function() { checkAll(1);}); 
    $('#uncheckAll').click(function() { checkAll(0);}); 
    $('#btnAddUser').click(function() { addUser(); }); 
});  

JSFiddle : http://jsfiddle.net/jahn08/f7debwj2/26/?