DataTables

DataTables Examples

HTML

<script src="https://akilijs.com/js/libs/akili.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
<script src="http://kingkode.com/datatables.editor.lite/js/altEditor/dataTables.altEditor.free.js"></script>
<app>
  <span>app data length: ${ this.arr.length }</span>
  <button on-click="${ this.arr.shift() }">shift</button>
  <div>
     <data-table 
       data="${ this.arr }" 
       on-data="${ this.arr = event.detail }"
     ></data-table>
  </div> 
</app>

CSS

table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
  background-color: #A2D3F6;
}

JavaScript

class App extends Akili.Component {
	static define() {
  	Akili.component('app', this);
  }
  
	created() {
  	this.scope.arr = [];
    
    for(let i = 1; i <= 9; i++) {
    	this.scope.arr.push(['item' + i]);
    } 
  }
}

class DataTable extends Akili.Component { 
	static define() {
  	Akili.component('data-table', this);
  }
  
	static get template() {
  	return `
    	<span>data-table data length: \${ this.data.length}</span>
    	<div class="container">
      	<table class="dataTable table table-striped"></table>
    	</div>
    `
  }
  
  created() {
  	this.scope.data = [];
  	this.dataTable = null;
  	this.options = {
      bPaginate: false,
      bFilter: false,
      bInfo: false,
      ordering: false,
      processing: true,
      columns: [       
        { title: "Name" }        
      ],
      dom: 'Bfrtip',
        select: 'single',
        responsive: true,
        altEditor: true,
        buttons: [{
          text: 'Add',
          name: 'add'
        }]
    };
  }
  
	compiled() {   
  	this.attr('data', 'data');
  
    this.attr('data', val => {
    	this.scope.data = val;
      
    	if(this.dataTable) {
      	this.dataTable.clear();
        this.dataTable.rows.add(this.scope.data);
        this.dataTable.draw();
        return;
      }
      
      let options = Object.assign({data: this.scope.data}, this.options);
      this.dataTable = $('.dataTable').DataTable(options);  
      
      this.dataTable.on( 'draw', () => {
      	let data = this.dataTable.data();
        let clearData = [];
        
      	for(let i = 0, l = data.length; i < l; i++) {
        	clearData.push(data[i]);
        }
      	
      	this.scope.data = clearData;   
      });
    });
  }
} 
  
App.define();
DataTable.define();
Akili.init();