Enable Paging

To load data in portions, modify paging options of the DataSource instance associated with the widget. Set the paginate option to true and specify the number of items per page using the pageSize option.

JavaScript
$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: new DevExpress.data.DataSource({
            store: {
                type: "odata",
                url: "https://js.devexpress.com/Demos/DevAV/odata/Products"
            },
            select: ["Product_ID", "Product_Name", "Product_Cost"],
            paginate: true,
            pageSize: 5
        }),
        valueExpr: "Product_ID",
        displayExpr: "Product_Name"
    });
});

By default, the Lookup widget loads the next page once the list of items is scrolled down to the bottom. To enable loading on clicking the "Next" button, assign 'nextButton' to the pageLoadMode option. To change the text displayed by the "Next" button, use the nextButtonText option.

JavaScript
$(function() {
    $("#lookupContainer").dxLookup({
         dataSource: new DevExpress.data.DataSource({
            store: {
                type: "odata",
                url: "https://js.devexpress.com/Demos/DevAV/odata/Products"
            },
            select: ["Product_ID", "Product_Name", "Product_Cost"],
            paginate: true,
            pageSize: 5
        }),
        valueExpr: "Product_ID",
        displayExpr: "Product_Name",
        pageLoadMode: "nextButton",
        nextButtonText: "See more"
    });
});
See Also