Datatables Right Click Menu

by rathore_gee

HTML

<div class="container">
      <table id="example" class="display" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$3,600</td>
          </tr>
          <tr>
            <td>Jenna Elliott</td>
            <td>Financial Controller</td>
            <td>Edinburgh</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$4,525</td>
          </tr>
          <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San...

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

div.container {
  min-width: 980px;
  margin: 0 auto;
  padding: 10px;
}

/* An ugly trick to use a filter icon */
.ui-icon-volume-off.ui-icon-filter {
	-ms-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
}

JavaScript

$(document).ready( function () {
  var table = $('#example').DataTable({
    "jQueryUI": true,
    "dom": 'l<"H"Rf>t<"F"ip>'
  });
  $(document).contextmenu({
    delegate: ".dataTable td",
    menu: [
      {title: "Filter", cmd: "filter", uiIcon: "ui-icon-volume-off ui-icon-filter"},
      {title: "Remove filter", cmd: "nofilter", uiIcon: "ui-icon-volume-off ui-icon-filter"}
	],
	select: function(event, ui) {
		var celltext = ui.target.text();
		var colvindex = ui.target.parent().children().index(ui.target);
		var colindex = $('table thead tr th:eq('+colvindex+')').data('column-index');
		switch(ui.cmd){
			case "filter":
                table
					.column( colindex )
					.search( '^' + celltext + '$', true )
					.draw();
				break;
			case "nofilter":
				table
					.search('')
					.columns().search('')
					.draw();
				break;
		}
	},
	beforeOpen: function(event, ui) {
		var $menu = ui.menu,
			$target = ui.target,
			extraData = ui.extraData;
		ui.menu.zIndex(9999);
    }
  });
} );