Jquery Datatable添加从一个表到另一个行

Question

我想添加表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> 

的JavaScript：

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