This time I will share jQuery Plugin and tutorial about Sortable & Scrollable Table With Fixed Header – scrollableTable.js, hope it will help you in programming stack.
scrollableTable.js is a dynamic table enhancement plugin that helps you to generate scrollable, sortable, and filterable tables with fixed table headers. Licensed under the Apache-2.0.
Requires the tableSorter plugin to provide a fast and performant table row sorting functionality.
How to use it:
1. Load the needed jQuery library n the document.
1 |
< script src = "/path/to/jquery.min.js" ></ script > |
2. Download and load the scrollableTable.js plugin after jQuery.
1 |
< link rel = "stylesheet" href = "/path/to/css/scrollableTable.css" /> |
2 |
< script src = "/path/to/js/scrollableTable.js" ></ script > |
3. Create a new scrollableTable
instance and specify the container in which you want to place the HTML table.
1 |
< div id = "wrapper" ></ div > |
1 |
var scrollableTable = new scrollableTable( 'scrollableTable' , 'wrapper' ) |
4. Insert fixed headers to the HTML table.
1 |
< div id = "wrapper" ></ div > |
1 |
scrollableTable.setTableHeader([ "Name" , "Id" , "Value" ]) |
5. Set the max height to make the HTML table scrollable.
1 |
scrollableTable.setTableHeight( () => { return $( window ).height() - 118 } ) |
6. Insert tabular data into the HTML table.
2 |
scrollableTable.setTreeTableContent(testData, "testDataEventType" , [ "name" , "id" , "value" ]) |
7. The plugin also supports nested tabular data. In this example, we’re going to create a sortable and scrollable tree table.
25 |
"value" : "Vaule 1.3.1" , |
1 |
scrollableTable.setTreeTableContent(testData, "testDataEventType" , [ "name" , "id" , "value" ], "subtree" ) |
8. Expand all child table rows on init.
1 |
scrollableTable.expandTree() |
9. Return the tabular data after you click a table row.
01 |
$( document ).on( "testDataEventType" , function (event, nestedIndex) { |
02 |
console.log( "NestedIndex: " +JSON.stringify(nestedIndex)) |
04 |
var object = testData[nestedIndex[0]] |
05 |
for ( var i=1; i<nestedIndex.length; i++) { object = object.subtree[nestedIndex[i]] } |
07 |
$( '#displayArea' ).html( |
08 |
"'testDataEventType' from row with ID: " +JSON.stringify(nestedIndex) + " was triggered.nn" + |
10 |
JSON.stringify( object, null , 4) ) |
10. Enable a search filed to filter through the tabublar data.
1 |
< input id = "searchField" type = "text" value = "" oninput = "filterTable()" > |
1 |
function filterTable() { |
2 |
var filterString = $( '#searchField' ).val() |
3 |
scrollableTable.filter(filterString) |
Changelog:
2020-01-27
2020-01-26
2020-01-24
2020-01-17
2020-01-14
2020-01-13
2020-01-12
- implemented sorting for table and removed tablesorter
2019-
source : jquery.net