Componente ligero de tabla de datos Vanilla

Vista prévia

Descripción

Un componente de tabla de datos ligero y sin dependencia para el manejo de grandes datasets con soporte para paginación, filtrado, ordenación, edición y más. Totalmente compatible con bootstrap.

Funcionamiento

Cargue la hoja de estilos y los archivos JavaScript del componente Vanilla Data Table en su documento HTML.

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

Cargue los plugins opcionales:

<!-- cell edit plugin -->
<link href="plugins/editCells/editCells.css" rel="stylesheet">
<script src="plugins/editCells/editCells.js"></script>

<!-- highlight matched items -->
<script src="plugins/highlightMatches/highlightMatches.js"></script>

Adjunte la función DataTable en la tabla HTML existente y done.

var table = document.getElementById('table');
var options = {


// options here
};
var dataTable = new DataTable(table, options);

Todas las opciones de configuración posibles con valores predeterminados.

{


// how many rows per page

perPage: 10,

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


fixedColumns: true,

fixedHeight: false,


// Pagination

nextPrev: true,

firstLast: false,

prevText: "‹",

nextText: "›",

firstText: "«",

lastText: "»",

ellipsisText: "…",

ascText: "â–´",

descText: "â–¾",

truncatePager: true,

pagerDelta: 2,


// enables sorting

sortable: false,


// enables live search

searchable: false,


header: true,

footer: false,


// Customise the display text

labels: {


placeholder: "Search...", // The search input placeholder


perPage: "{select} entries per page", // per-page dropdown label


noRows: "No entries found", // Message shown when there are no search results


info: "Showing {start} to {end} of {rows} entries" //

},


// Customise the layout

layout: {


top: "{select}{search}",


bottom: "{info}{pager}"

}


};

Eventos.

dataTable.on('datatable.sort', function (table) {

// fires when the data table is sorted
});

dataTable.on('datatable.change', function (table) {

// fires on page change
});

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

// fires when the perPage option is changed with the dropdown
});

dataTable.on('datatable.search', function (table) {

// fires on keyup during a search
});

Registro de cambios

09/25/2018

• v1.6.16