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>

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

Jquery Datatable在一个表中添加一行到另一个表

1 个答案: