Test Table - Forked2

Select and remove contacts

by M Greene

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<label class="myLabel">Select contacts to remove</label>
<div class="container">
  <div class="rg-formHeader">
    Contact List
  </div>

  <table id="myTable" class="stripe hover">
    <thead><tr>
      <th class="head-label">Last Name</th>
      <th class="head-label">First Name</th>
      <th class="head-label">Email Address</th>
      <th class="head-label">ID</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>Bridges</td>
        <td>Jeff</td>
        <td>[email protected]</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Buscemi</td>
        <td>Steve</td>
        <td>[email protected]</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Moore</td>
        <td>Julianne</td>
        <td>[email protected]</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Turturro</td>
        <td>John</td>
        <td>[email protected]</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Goodman</td>
        <td>John</td>
        <td>[email protected]</td>
        <td>5</td>
      </tr>
      <tr>
        <td>Gilmore</td>
        <td>Jimmie</td>
        <td>[email protected]</td>
        <td>6</td>
      </tr>
      <tr>
        <td>Elliott</td>
        <td>Sam</td>
        <td>[email protected]</td>
        <td>7</td>
      </tr>
    </tbody>
  </table>
</div>

<button class="submitBtn" >
  Remove contact(s)
</button>

CSS

.container {
  width: 550px;
  /* border: 1px solid black; */
}

.head-label {
  text-align: left;
}

.myLabel {
  text-weight: bold;
}

.rg-formHeader {
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  background: #003b71;
  text-decoration: none;
  font-variant: normal;
  font-weight: bold;
  text-align: left;
  font-size: 16px;
  padding-left: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.xx {
  background-color: #003b71;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 15px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px;
  text-decoration: none;
  outline: none;
}

.removeBtn, .submitBtn {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #003a71), color-stop(1, #003a71));
	background:-moz-linear-gradient(top, #003a71 5%, #003a71 100%);
	background:-webkit-linear-gradient(top, #003a71 5%, #003a71 100%);
	background:-o-linear-gradient(top, #003a71 5%, #003a71 100%);
	background:-ms-linear-gradient(top, #003a71 5%, #003a71 100%);
	background:linear-gradient(to bottom, #003a71 5%, #003a71 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#003a71', endColorstr='#003a71',GradientType=0);
	background-color:#003a71;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:7px 25px;
	text-decoration:none;
	text-shadow:0px 1px 0px #e1e2ed;
}
.removeBtn:hover, , .submitBtn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #003a71), color-stop(1, #003a71));
	background:-moz-linear-gradient(top, #003a71 5%, #003a71 100%);
	background:-webkit-linear-gradient(top, #003a71 5%, #003a71 100%);
	background:-o-linear-gradient(top, #003a71 5%, #003a71 100%);
	background:-ms-linear-gradient(top, #003a71 5%, #003a71 100%);
	background:linear-gradient(to bottom, #003a71 5%, #003a71...

JavaScript

var recipIds = [];

$(document).ready(function() {
  var table = $("#myTable").DataTable({
    dom: "lfrtpB",
    scrollY: "200px",
    scrollCollapse: true,
    paging: false,
    searching: false,
    select: {
      style: "multi",
      item: "rows"
    },
    columnDefs: [{
      targets: [3],
      visible: false,
      searchable: false
    }],
		buttons: [{
			extend: "selected", 
			className: "removeBtn",
			text: "Remove contact(s)",
			action: function ( e, dt, node, config ) {
				var selectedRows = dt.rows(".selected");
				alert(selectedRows.data().length + " rows selected");
				
				selectedRows.remove().draw();
			}
		}]
  });

  generateEventListeners(table);
});

function generateEventListeners(table) {
  $(".submitBtn").on("click", function() {
    var selectedIds = [];
		$.each(table.rows(".selected").data(), function(key, data) {
			selectedIds.push(data[3]);
		});

    alert("Selected Ids: " + selectedIds.join());
    table.rows(".selected").remove().draw();
  });
}