CODEWITHSUNDEEP
javascriptjqueryjsondatatables
raduken
raduken

Reputation: 2129

Jquery Datatable add a row from one table to another

I am trying add the rows from table 2 in table one.

if I select the row in the checkbox column and press add user, will add this row in the table 1

beside add user button I have a option for select all or none, if I click in the input select all

all rows from table 2 will be added in table 1 after button add user been pressed.

if I select none clear all check boxes

if I click all select all check-boxes

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);
  });
});

Upvotes: 1

Views: 3570

Answers (1)

Oleg Safarov
Oleg Safarov

Reputation: 2345

I've altered your code slightly. This sample appears appropriate for your task and requirements. Hopefully, it will help you.

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

Upvotes: 2

Related Questions