tabulator-selectRows

Select and deselect rows by clicking on column

by KarmaProd

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.1/css/tabulator.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.1/js/tabulator.min.js"></script>
<div id="example-table"></div>

<p>
  Number of selected rows = <span id="rowCount"></span>
</p>

CSS

.tabulator{
  background-color:#f88;
}

JavaScript

var selectedCount = function() {
  var selectedRows = $("#example-table").tabulator("getSelectedRows").length;
  $('#rowCount').text(selectedRows);
}

$("#example-table").tabulator({
  //height: 205,
  layout: "fitColumns", //fit columns to width of table (optional)
  columns: [ {title: 'Name', field: 'name'},
            {title: 'Surname', field: 'surname'}
  ],
});

var tabledata = [
            {name: 'John', surname: 'Miller'},
            {name: 'Mike', surname: 'Tyson'},                        
        ];

//load sample data into the table
$("#example-table").tabulator("setData", tabledata);


selectedCount();