easyTable Demo

Its a simple plugin for Tables using jQuery

by Сергей Тарасевич

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<br>
<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">easyTable Demo</h3>
    </div>
    <div class="panel-body">
      <table id="table">
        <thead>
          <th>Id</th>
          <th>Nome</th>
          <th>Valor</th>
        </thead>
        <tbody>
        </tbody>
      </table>

      <br>
      <br>
      <button class="btn btn-primary" id="getSelected">Get Selected</button>
    </div>
  </div>
</div>

CSS

/*
 Table plugin for jQuery
 Copyright (c) 20016 Gabriel Rodrigues e Gabriel Leite (http://gabrielr47.github.io/)
 Licensed under the MIT license
 Version: 0.1
*/

.easyTable {
  outline: none;
}

.easyTable tbody tr {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#easyMenuTable button {
  margin: 5px;
  border-radius: 25px;
  outline: none;
}

.easyTable thead {
  cursor: pointer;
  display: block;
  margin: 0px;
  cell-spacing: 0px;
  left: 0px;
}

.easyTable tbody {
  display: block;
  overflow: auto;
}

.easyTable th {
  height: 20px;
  width: 500px;
}

.easyTable td {
  height: 20px;
  width: 500px;
  margin: 0px;
  cell-spacing: 0px;
}

JavaScript

// Preenchendo tabela.
var foo = '';
var people = ["Sophia", "Alice", "Julia", "Isabella", "Manuela", "Laura", "Luiza", "Valentina", "Giovanna", "Maria Eduarda", "Helena", "Beatriz", "Maria Luiza", "Lara"];
for (var i = 0; i < people.length; i++) {
  foo += '<tr><td>' + i + '</td><td>' + people[i] + '</td><td>' + (i + 66.6) + '</td></tr>';
}

$("#table").find('tbody').append(foo);

/*
 Table plugin for jQuery
 Copyright (c) 2016 Gabriel Rodrigues e Gabriel Leite (http://gabrielr47.github.io/)
 Licensed under the MIT license
 Version: 0.2
 */

$.fn.easyTable = function(options) {
  var trIndex = 'all';
  this.options = {
    tableStyle: 'table easyTable',
    hover: 'btn-success',
    buttons: true,
    select: true,
    sortable: true,
    scroll: {
      active: false,
      height: '400px'
    }
  };
  this.message = {
    all: 'Marcar todos registros.',
    clear: 'Desmarcar todos registos.',
    search: 'Pesquisar em'
  };
  this.select = function() {
    var table = this;
    var options = this.options;
    var posCurrentTr = 0;
    var pressCrl = false;
    var pressShift = false;
    var pressDir = '';
    var posIniShift = 0;
    var maxLength = table.find('tbody tr').length - 1;
    table.find('tbody').on('click', 'tr', function() {
      if (pressCrl) {
        $(this).toggleClass(options.hover);
        posCurrentTr = $(this).index();
        posIniShift = posCurrentTr;
      } else if (pressShift) {
        $(this).toggleClass(options.hover);
      } else {
        table.find('tbody tr').removeClass(options.hover);
        $(this).addClass(options.hover);
        posCurrentTr = $(this).index();
        posIniShift = posCurrentTr;
      }
    });

    table.on('keydown', function(e) {

      if ((e.shiftKey) && (e.which === 40)) {
        if (posCurrentTr < (maxLength)) {
          if (pressDir === '') {
            pressDir = 'Down';
          }
          if (pressDir === 'Up' && (posCurrentTr < posIniShift)) {
            table.find('tbody...