DT Version

Using newest version of DataTable

by M Greene

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/t/dt/dt-1.10.11,af-2.1.1,b-1.1.2,cr-1.3.1,fc-3.2.1,fh-3.1.1,kt-2.1.1,se-1.1.2/datatables.min.css">
<script src="https://cdn.datatables.net/t/dt/dt-1.10.11,af-2.1.1,b-1.1.2,cr-1.3.1,fc-3.2.1,fh-3.1.1,kt-2.1.1,se-1.1.2/datatables.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" >
  Reset form
</button>

<button class="something">
Select rows
</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, .something {
	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, .something: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 = [1,6];

$(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);
	
	$(".submitBtn").on("click", function() {
		table.rows(".selected").deselect();
	});
	
	$(".something").on("click", function() {
		$.each(recipIds, function(key, id) {
			table.rows().eq(0).each(function(idx) {
				var row = table.row(idx);
				if (row.data()[3] == id) {
					row.select();
				}
			});
		});
	});
	
});

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

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

function run() {
	var isDataTable = $.fn.DataTable.fnIsDataTable($("#myTablexx"));
	alert("Is datatable: " + isDataTable);
}