Is it possible to pagination on fancytree?

Question

Right now I have to render a lot of documents on the same page and I am using francytree

Issue: Performance

MY Thinking : Is fancytree provide a pagination functionality or not?

score 2 · Accepted Answer · answered Jun 24 '19 at 06:07

2

No. There is no buit-in pagination option available as of June, 2019.

You will have to do it manually by making chunks of your input data and assign them to the tree one at a time.

However, the tree supports lazy loading. This is more of pagination for a tree.

 $("#tree").fancytree({
    // Initial node data that sets 'lazy' flag on some leaf nodes
    source: [
      {title: "Child 1", key: "1", lazy: true},
      {title: "Folder 2", key: "2", folder: true, lazy: true}
    ],
    lazyLoad: function(event, data) {
      var node = data.node;
      // Issue an Ajax request to load child nodes
      data.result = {
        url: "/getBranchData",
        data: {key: node.key}
      }
    }
  });

answered Jun 24 '19 at 06:07

Charlie

22,886
11
59
90

It means the only way too lazy loading is true not to other Right? – Savan Javia Jun 24 '19 at 06:50
What's a limitation of fancytree? Means I have more than 5000 folders and expand all so right now browser hanging. – Savan Javia Jul 04 '19 at 08:25
Facytree is written in JS and JS has no limitations. The answer to your first question is that, trees can grow both vertically and horizontally whereas a list can only grow vertically. Pagination is for such vertical lists. – Charlie Jul 04 '19 at 08:31
Thanks, Charlie. Pagination is for such vertical lists: Please provide an appropriate link – Savan Javia Jul 05 '19 at 05:06

score 2 · Answer 2 · answered Jun 27 '19 at 17:25

Fancytree supports pagination of direct children under a parent node, as explained below.

Note however that often performance issues arise from the number of rendered DOM elements, but not from the number of nodes inside the tree's data model.

So it may be an alternative to spread data under different parent nodes, and discard the markup on collapse. Or use ext-grid to implement a viewport.

From the paging tutorial:

'Paging' nodes are status nodes of type 'paging' and can serve as a placeholder for missing data. Typically we add some additional information that we can use later to load the missing nodes.

[
  {title: "Item 1", key: "node1"},
  {title: "Folder 2", folder: true, expanded: true, key: "node2"},
  {title: "Lazy error", key: "node3", lazy: true},
  {title: "Lazy empty", key: "node4", lazy: true},
  {title: "Lazy paging", key: "node5", lazy: true},
  {title: "More...", statusNodeType: "paging", icon: false, url: "get_children?parent=4321&start=5&count=10"}
]

It is also possible to create paging nodes using the API, for example in the loadChildren event:

  data.node.addPagingNode({
    title: "More...",
    url: "get_children?parent=4321&start=5&count=10"
  });

Paging nodes generate special events instead of plain activate. A common implementation would issue a load request and replace the 'More...' entry with the result:

$("#tree").fancytree({
  ...
  clickPaging: function(event, data) {
    data.node.replaceWith({url: data.node.data.url}).done(function(){
      // The paging node was replaced with the next bunch of entries.
    });
  }

Is it possible to pagination on fancytree?

2 Answers2