Documentation

Usage of the list is the next:

$(document).ready(function(){
    var expandableList = new jQueryExpandableAjaxList({
        id: 'expandable-list',
        initUrl: 'http://example.com/initUrl',
        refreshUrl: 'http://example.com/refreshUrl',
        refreshInterval: 5000
    });
});

for creation new jQueryExpandableAjaxList(options) you can use next options object with the next properties:

Properties

Required

id (required)

ID of the ul element, that will be expandable ajax list.

refreshUrl (required)

Url of the service from the list should load data. If refreshInterval property is set - the list will reload data from refreshUrl by the interval.

Not Required

initUrl

Url of the service from the list should get first initial data.

default: equals refreshUrl property

fieldID

Id field of load data that is loading from initUrl or refreshUrl. It is using for order list items of the list.

default: 'id'

fieldText

Text field of load data that is loading from initUrl or refreshUrl. It is using for fill list item of the list.

default: 'value'

sortByField (not working)

Field by the sorting is making in the list.

default: 'id'

sortArrange

Ascending or descending order arrange of the sort by field of loading data. Possible values: 'asc', 'desc'

default: 'asc'

refreshInterval

Refresh loading data interval in milliseconds. So, example, 5000 - 5 sec. By default list is not refreshing, just load initial data.

default: null

---

So, the full example of usage is:

$(document).ready(function(){
    var expandableList = new jQueryExpandableAjaxList({
        id: 'expandable-list',
        initUrl: 'http://example.com/initUrl',
        
        refreshUrl: 'http://example.com/refreshUrl',
        refreshInterval: 5000,

        fieldID: 'num',
        fieldText: 'text',

        sortByField: 'num',
        sortArrange: 'desc'
    });
});

In that case data, that is returning from initUrl: http://example.com/initUrl or refreshUrl: 'http://example.com/refreshUrl' should be as the next:

[
   {"num":1,"text":"list item 1"},
   {"num":2,"text":"list item 2"},
   {"num":3,"text":"list item 3"},      
   {"num":5,"text":"list item 5"}
]