2017-02-24 7 views
1

テーブル1のテーブル2の行を追加しようとしています。私は、チェックボックス列の行を選択し、ユーザを追加押すとJqueryデータテーブルはあるテーブルから別のテーブルに行を追加します

は、テーブルにこの行を追加します1

私は入力してクリックした場合の横に、私は、すべての選択またはnoneのためのオプションを持っているユーザーボタンを追加すべて選択する

ボタンを追加したユーザーが押された後、表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); 
    }); 
}); 
+3

ここに質問はありません。質問を編集して質問に関連するコードのみを入力してください。 – Nicolas

+1

質問なし??? – NDFA

答えて

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/

+1

テーブル2からテーブル1にユーザーを追加した後、テーブル2からユーザーがいなくなっても、ちょっとだけありがとうございます。今すぐ別のテーブルに追加した後にまだそこにいるユーザーは理解できますか?別のものがあります:これもあなたも手伝ってもらえますか?私も解決策を見つけるために100ポイントを与えています:http://stackoverflow.com/questions/42444617/jquery-datatable-drag-and-drop-a-row-from-one-table-to-anotherありがとう – Raduken

+1

あなた'大歓迎!確かに、私は後でこの問題を見ていきます。最初の問題については、このリンクを試してください:http://jsfiddle.net/jahn08/f7debwj2/27/ –

+2

クール私はあなたの答えを受け入れましたが、私は4時間で恩恵を与えることができます:)あなたはあなたが助けることができると思いますか?他の質問で?あまりにも多くの私の週を保存していただきありがとうございます – Raduken

関連する問題