Afisarea tabelelor într-o pagină web folosind tabulator

Afisarea tabelelor într-o pagină web folosind tabulator

Azi printre altele m-am jucat cu un framework javascript care te ajută să afișezi tabele faine , paginate și cu multe alte utilități. Acest framework se numește tabulator.info și l-am folosit pentru tabelul de mai jos. Nu cred că a durat mai mult de 10min de când am intrat pe site și până am avut un exemplu funcțional la mine pe blog, deci este ușor de instalat și de folosit. În secțiunea de exemple am găsit o grămadă de posibile utilizări, se poate face chiar o editare online,sotare sau încărcarea datelor progresiv. Recomand!

Mai jos am detaliat pașii pentru a putea afișa un tabel paginat:
Pas 1. Adauga referințele la fisierele javascript si css de mai jos:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> 
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js"></script> 
<link href="https://unpkg.com/tabulator-tables@4.9.1/dist/css/tabulator.min.css" rel="stylesheet"> 
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.1/dist/js/tabulator.min.js"></script> 

Pas 2. Adauga containerul div unde se produce magia:

<div id="example-table"></div>

Pas 3. Adaugă datele si formatarea tabelului folosit de tabulator:

<script> 
//define some sample data
 var tabledata = [
 	{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
 	{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
 	{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
 	{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
 	{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Lobowski Christine ", age:"42", col:"green", dob:"22/05/1982"},
 	{id:7, name:"Philips Brendon ", age:"125", col:"orange", dob:"01/08/1980"},
 	{id:8, name:"Marmajuke Margret ", age:"16", col:"yellow", dob:"31/01/1999"},
 ];
//Build Tabulator
//create Tabulator on DOM element with id "example-table"
var table = new Tabulator("#example-table", {
 	height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
 	data:tabledata, //assign data to table
 	layout:"fitColumns", //fit columns to width of table (optional)
    pagination:"local",
    paginationSize:6,
    paginationSizeSelector:[3, 6, 8, 10],
 	columns:[ //Define Table Columns
	 	{title:"Name", field:"name", width:150},
	 	{title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
	 	{title:"Favourite Color", field:"col"},
	 	{title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
 	],
 	rowClick:function(e, row){ //trigger an alert message when the row is clicked
 		alert("Row " + row.getData().id + " Clicked!!!!");
 	},
});
</script>

Pentru întrebari și/sau consultanță tehnică vă stau la dispozitie pe blog sau pe email simedruflorin@automatic-house.ro. O zi plăcută tuturor !