This time I will share jQuery Plugin and tutorial about Full-featured Dynamic Data Table Plugin – Folium, hope it will help you in programming stack.
| File Size: | 19.6 KB |
|---|---|
| Views Total: | 3787 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Folium is a jQuery data table plugin for creating spreadsheet-like CRUD data grids with sorting, filtering, pagination, and custom cell rendering support.
Key features:
- Sortable table rows.
- Filterable with a search field.
- Add/Remove/Update table rows.
- Editable table cells.
- Render tabular data in a custom format.
- Scrollable with fixed table header.
- Pagination bar for large data set.
- Callback functions wnen you click/double click a table row
How to use it:
1. To use the plugin, include jQuery library and the Folium’s files on the web page.
1 |
<link href="/path/to/folium.css" rel="stylesheet"> |
2 |
<script src="/path/to/jquery.min.js"></script> |
3 |
<script src="/path/to/folium.js"></script> |
2. Define your tabular data (columns & rows) in the JavaScript as follows:
01 |
// Columns |
02 |
const colData = [{ |
03 |
columnId: "id1", |
04 |
displayText: "ID 1" |
05 |
},{ |
06 |
columnId: "id2", |
07 |
displayText: "ID 2" |
08 |
},{ |
09 |
columnId: "id3", |
10 |
displayText: "ID 3" |
11 |
}], |
12 |
13 |
// Rows |
14 |
rowData = [{ |
15 |
id1: 'Cell 1.1', |
16 |
id2 : "Cell 1.2", |
17 |
id3 : "Cell 1.3" |
18 |
},{ |
19 |
id1: 'Cell 2.1', |
20 |
id2 : "Cell 2.2", |
21 |
id3 : "Cell 2.3" |
22 |
},{ |
23 |
id1: 'Cell 3.1', |
24 |
id2 : "Cell 3.2", |
25 |
id3 : "Cell 3.3" |
26 |
}] |
3. Polulate your HTML table with the tabular data you defiend.
1 |
<table id="example""></table> |
1 |
const myTable = $('#foliumTableId').FoliumTable({ |
2 |
columns: colData, |
3 |
rows: rowData |
4 |
}); |
4. Enable the user to sort the table by clicking on the table header.
1 |
const myTable = $('#foliumTableId').FoliumTable({ |
2 |
columns: colData, |
3 |
rows: rowData, |
4 |
sortable: true |
5 |
}); |
5. Enable the user to edit table cells.
1 |
const myTable = $('#foliumTableId').FoliumTable({ |
2 |
columns: colData, |
3 |
rows: rowData, |
4 |
editable: true |
5 |
}); |
6. Enable the user to filter through table rows with a search box.
1 |
<input type="text" id="searchBox" /> |
1 |
$('#searchBox').on('keyup',function(){ |
2 |
const searchBoxText = $('#searchBox').val(); |
3 |
foliumTable.search(searchBoxText); |
4 |
// allows the first column |
5 |
foliumTable.search(searchBoxText, 0); |
6 |
}); |
7. Add a pagination bar to the table and specify the number of table rows to display per page.
1 |
const myTable = $('#foliumTableId').FoliumTable({ |
2 |
columns: colData, |
3 |
rows: rowData, |
4 |
pagination: { |
5 |
active: true, |
6 |
size: 5 |
7 |
} |
8 |
}); |
8. Add/remove/update table rows.
01 |
// add a new row |
02 |
myTable.addRow({ |
03 |
id1: 'ID 4.1', |
04 |
id2: "ID 4.2", |
05 |
id3: "ID 4.3" |
06 |
}); |
07 |
08 |
// delete row 1 |
09 |
myTable.deleteRows(0); |
10 |
// detete row 1,2 |
11 |
myTable.deleteRows([0, 1]); |
12 |
13 |
// update a row |
14 |
myTable.updateRow(0, { |
15 |
id1: 'new value' |
16 |
}); |
9. Custom cell rendering.
1 |
const myTable = $('#foliumTableId').FoliumTable({ |
2 |
columns: colData, |
3 |
rows: rowData, |
4 |
cellRenderer : function(rowIndex, columnIndex, data, rowObject) { |
5 |
if (columnIndex === 5) |
6 |
return |
7 |
return data; |
8 |
} |
9 |
}); |
10. API methods.
01 |
// returns the selected row index |
02 |
myTable.rselectedRow() |
03 |
04 |
// returns the selected row index according to the table model |
05 |
myTable.selectedRowInModel(); |
06 |
07 |
// returns the selected column index |
08 |
myTable.selectedColumn(); |
09 |
10 |
// returns the number of rows |
11 |
myTable.rowCount(); |
12 |
13 |
// returns the number of columns |
14 |
myTable.columnCount(); |
15 |
16 |
// returns the row from the model according to the index parameter |
17 |
myTable.getRow(index); |
18 |
19 |
// returns the model of the table |
20 |
myTable.getRows(): |
21 |
22 |
// returns the current page number |
23 |
myTable.currentPage(); |
24 |
25 |
// returns the id of the table |
