Dynamic Loading

Problem

How to load data dynamically?

Solution

Dynamic loading is based on the method loadNext(). The method is applied to all components operated on data (e.g. list).

loadNext(num, pos) - loads the specified number of records started from the certain position.

  • num - the number of rows to load.
  • pos - (optional) the starting position of the row in the dataset to start output with. For example, there are 1000 records in the dataset and pos=200. This means that the first 199 rows will be ignored and loading starts from 200th row of the dataset. If the parameter is not specified, records will be loaded by turn.

There are 2 scenarios you can use while dynamic loading:

  1. To add newly loaded data to already loaded one.

    dhx.ui(
        { view:"list", id:"mylist", url:"books.php", datatype:"json", template:"#title# (#author#)"},
        { view:"button", label:" show 20 more", click:"next"}
    )
    function next(){
        $$('mylist').loadNext(20);
    }

    Related sample: 04_list/14_dyn_loading.html

  2. To clear already loaded data, so the component will contain just newly loaded records.

    dhx.ui(
        { view:"list", id:"mylist", url:"books.php", datatype:"json", template:"#title# (#author#)"},
        { view:"button", label:" show 20 more", click:"next"}
    )
     
    var page = 1;
    function next(){
        page++;
        $$('mylist').clearAll();
        $$('mylist').loadNext(20, (page-1)*20);
    }

    Related sample: 04_list/14_page_loading.html