Tabla de datos dinámicos de JavaScript puro-presentado. js

Vista prévia

Descripción

presentado. js es una biblioteca de JavaScript simple y pequeña que le ayuda a representar una tabla de datos de datos JSON de formulario, con paginación y filtrado.

Funcionamiento

Coloque la biblioteca JavaScript de presentado. js en la parte inferior de la Página Web.

<script src="dist/tabled.min.js"></script>

Cree una tabla HTML con encabezados de tabla en la Página Web.

<table class="table table-bordered table-striped">

<thead>


<th>First Name</th>


<th>Last Name</th>


<th>Age</th>

</thead>
</table>

Prepare los datos y genere una tabla de datos básica en la Página Web.

var table = tabled.create(document.getElementsByTagName("table")[0], {


data: [



{ firstName: "John", lastName: "Doe", age: "28" },



{ firstName: "Jane", lastName: "Doe", age: "21" },



{ firstName: "David", lastName: "Doe", age: "58" },



{ firstName: "Mike", lastName: "Doe", age: "42" },



{ firstName: "Paul", lastName: "Doe", age: "63" },



{ firstName: "Jason", lastName: "Doe", age: "35" },



{ firstName: "Jose", lastName: "Doe", age: "37" },



{ firstName: "Alex", lastName: "Doe", age: "24" },



{ firstName: "Matt", lastName: "Doe", age: "12" },



{ firstName: "Chad", lastName: "Doe", age: "75" },



{ firstName: "Ernest", lastName: "Doe", age: "23" }


]

});


function filter(event) {


table.filter(event.target.value)

}