Free Download Performant Virtual Table Plugin For jQuery – lazyTable

This time I will share jQuery Plugin and tutorial about Performant Virtual Table Plugin For jQuery – lazyTable, hope it will help you in programming stack.

File Size:	54.5 KB
Views Total:	2330
Last Update:	3 months ago
Publish Date:	3 years ago
Official Website:	Go to website
License:	MIT

Demo Download

lazytable is a dynamic, high-performance jQuery virtual table plugin which allows you to display a huge amount of rows in your scrollable HTML table, while delaying the loading of table rows until they are visible in the viewport.

How to use it:

1. Insert an empty HTML table into a container element.

1
<div class="tableWrapper">

2
  <table>

3
    <tbody></tbody>

4
  </table>

5
</div>

2. The container must have a fixed height to make the HTML table scrollable.

1
.tableWrapper { 

2
  height: 200px; 

3
  overflow-y: scroll; 

4
}

3. Insert jQuery library and the minified version of the jQuery lazytable plugin into the page.

1
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"

2
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"

3
        crossorigin="anonymous">

4
</script>

5
<script src="jquery.lazytable.min.js"></script>

4. Define your tabular data to be presented in the table.

1
const myData = [

2
      ['a1', 'a2', 'a3', 'a4'],

3
      ['b1', 'b2', 'b3', 'b4'], 

4
      ['c1', 'c2', 'c3', 'c4'],

5
      ...

6
];

5. The JavaScript to render the data into your table.

1
$('.tableWrapper').LazyTable({

2
  data: myData

3
});

6. Possible options to customize the lazytable plugin.

01
$('.tableWrapper').LazyTable({

02
 
03
  // output console logs

04
  debug: false,         

05
 
06
  // height of a single row

07
  // set to 0 for automatic determination

08
  trHeight: 0,          

09
   
10
  // function to turn array into html code for table row

11
  generator: function(row) { return '<tr><td>' + row.join('</td><td>') + '</td></tr>'; }, 

12
 
13
  // initially centered element

14
  startIndex: 0,        

15
 
16
  // if true, rows will not be deleted when getting out of visible area 

17
  keepExisting: true,   

18
 
19
  // number of rows by which to extend visible area

20
  prefetch: 0,          

21
 
22
  // milliseconds

23
  animationCalcTime: 3, 

24
 
25
  // functions

26
  appendFn: function(rows) { 

27
    tableBody.append(rows.join()); 

28
    return $.Deferred().resolve().promise(); 

29
  },

30
  prependFn: function(rows) { 

31
    tableBody.prepend(rows.join()); 

32
    return $.Deferred().resolve().promise(); 

33
  },

34
  deleteFn: function(startIndex, endIndex) { 

35
    tableBody.children().slice(startIndex, endIndex).remove();

36
    return $.Deferred().resolve().promise();

37
  }

38
   
39
});

7. Available Callback functions.

1
$('.tableWrapper').LazyTable({

2
 
3
  // called after initialization has finished

4
  onInit: null,         

5
 
6
  // called after rows have been added or removed

7
  onRedraw: null       

8
 
9
});

Changelog:

2021-01-14

Rebuild

2018-08-23

Fixed for IE 11

2018-04-05

Fixed for IE 11

2018-03-29

Code cleanups.

How to use it:

Changelog:

Share this:

Related posts: