jquery.dataTables.areaselect

Extension of jquery.dataTables plugin for area selection.

Documentation & demo

For code sample check out the index.html file or go to live demo.

Minimal browser compatibility

Web browser	Version
Chrome	Ok
Firefox	v3.5
IE	v9
Opera	v10
Safari	v4

Dependencies

jQuery v1.11.3 at least. Works perfectly on higher versions.
jquery.dataTables v1.10.8 or higher version. jquery.dataTables.select extension

Features

• Drag & drop onto table row to select a range of rows.
• Hold Ctrl to add item to an existing selection.

Usages

	<!-- reference both css and js files -->
    <script src="js/jquery.dataTables.areaselect.js"></script>
    
	<!-- Add a table to your page -->
	<table id="myTable"></table>

	// initializes dataTable as usual
	$("#myTable").dataTable({
		data: ...,
		columns: [ ... ],
		select: true, // Activates Select extension
		initComplete: function () {
			// enables area selection extension
			$("#myTable").AreaSelect();
		}
	});

	// Select events callback
	$("#myTable").DataTable()
		.on("select", function (e, dt, type, indexes) {
			if (type === "row") {
		        	var data = $("#myTable").DataTable().rows(indexes).data()[0];
		        	console.info("select", data);
		    	}
		})
		.on("deselect", function (e, dt, type, indexes) {
			if (type === "row") {
				var data = $("#myTable").DataTable().rows(indexes).data();
				console.info("deselect", data);
			}
		});

License

Released under the MIT license.