Tabla de datos dinámicos en Vanilla JavaScript

Vista prévia

Descripción

Un componente de tabla de datos basado en JavaScript puro de Vanilla que cuenta con datos tabulares dinámicos, filtrado de tablas, ordenación, paginación y muchos más.

Install the Vanilla-DataTables:

# NPM
$ npm install vanilla-datatables

# Bower
$ bower install vanilla-datatables

¿Cómo funciona?

Importe los archivos CSS y JavaScript de Vanilla-DataTables en el proyecto.

<link href="vanilla-dataTables.css" rel="stylesheet">
<script src="vanilla-dataTables.js"></script>

Cree una tabla vacía en la Página Web.

<table class="table" id="basic">

<thead>


<tr>



<th>Name</th>



<th>Position</th>



<th>Office</th>



<th>Ext.</th>



<th>Start date</th>



<th>Salary</th>

</thead>

<tbody></tbody>
</table>

Defina matrices de datos tabulares en JavaScript de la siguiente manera:

var data = {


"headings": [



"Name",



"Company",



"Ext.",



"Start Date",



"Email",



"Phone No."


],


"rows": [



[




"Hedwig F. Nguyen",




"Arcu Vel Foundation",




"9875",




"03/27/2017",




"[email protected]",




"070 8206 9605"



],


...


]
}

Inicialice la vainilla-DataTables y done.

var myTable = document.getElementById('basic');
var dataTable = new DataTable(myTable, {data: data});

Todas las opciones posibles.

var dataTable = new DataTable(myTable, {





// the maximum number of rows to display on each page


perPage: 10,



// the per page options in the dropdown


perPageSelect: [5, 10, 15, 20, 25],



// navigation options


nextPrev: true,


firstLast: false,


prevText: '‹',


nextText: '›',


firstText: '«',


lastText: '»',



// enable sortable


sortable: true,



// enable searchable


searchable: true,



// fix the width of the columns.


fixedColumns: true,



// fix the height of the table.


 fixedHeight: false,



// truncate the page links to prevent overflow with large datasets.


truncatePager: true

});

API methods.

// Updates the number of pages, rows, etc.
 datatable.refresh();

// Updates the number of pages, rows, etc.
 dataTable.page(6);

// Adds new rows to the table.
dataTable.addRows(newData);

// Sorts the data by column and direction.
 dataTable.sortItems(3, 'desc');

Eventos.

dataTable.on('datatable.init', function() {


// Do something
});

dataTable.on('datatable.refresh', function() {


// Do something
});

dataTable.on('datatable.update', function() {


// Do something
});

dataTable.on('datatable.page', function(page) {


// Do something
});

dataTable.on('datatable.sort', function(column, direction) {


// Do something
});

dataTable.on('datatable.perpage', function() {


// Do something
});

dataTable.on('datatable.search', function(query, matched) {


// Do something
});

Registro de cambios

v1.6.14 (07/14/2018)

• corregir la exportación a CSV