$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: new DevExpress.data.DataSource({
            store: /* A store is configured here */,
            paginate: true,
            pageSize: 10
        }),
        // ...
    });
});

Angular

HTML

TypeScript

<dx-lookup ...
    [dataSource]="lookupData">
</dx-lookup>

import DataSource from "devextreme/data/data_source";
import { DxLookupModule } from "devextreme-angular";
// ...
export class AppComponent {
    lookupDataSource: any = {};
    constructor() {
        this.lookupData = new DataSource({
            store: /* A store is configured here */,
            paginate: true,
            pageSize: 10
        })
    }
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})

Vue

<template>
    <DxLookup ...
        :data-source="dataSource"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxLookup } from 'devextreme-vue/lookup';
import DataSource from "devextreme/data/data_source";

export default {
    components: {
        DxLookup
    },
    data() {
        return {
            dataSource: new DataSource({
                store: /* A store is configured here */ ,
                paginate: true,
                pageSize: 10
            })
        };
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Lookup } from 'devextreme-react/lookup';
import DataSource from "devextreme/data/data_source";

class App extends React.Component {
    constructor(props) {
        super(props);

        this.dataSource = new DataSource({
            store: /* A store is configured here */ ,
            paginate: true,
            pageSize: 10
        });
    }

    render() {
        return (
            <Lookup ...
                dataSource={dataSource}
            />
        );
    }
}

export default App;

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().Lookup()
    .ID("lookup")
    .DataSource(d => d
        // Data access is configured here
    )
    .DataSourceOptions(o => o
        .Paginate(true)
        .PageSize(10)
    )
)

Lookup renders the next page once a user scrolls the item list to the bottom. If you set the pageLoadMode to "nextButton", Lookup renders the next page when a user clicks the Next button. You can change this button's text using the nextButtonText property:

jQuery

JavaScript

$(function() {
    $("#lookupContainer").dxLookup({
        // ...
        pageLoadMode: "nextButton",
        nextButtonText: "More"
    });
});

Angular

HTML

<dx-lookup ...
    pageLoadMode="nextButton"
    nextButtonText="More">
</dx-lookup>

Vue

<template>
    <DxLookup ...
        page-load-mode="nextButton"
        next-button-text="More"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxLookup } from 'devextreme-vue/lookup';

export default {
    components: {
        DxLookup
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { Lookup } from 'devextreme-react/lookup';

class App extends React.Component {
    render() {
        return (
            <Lookup ...
                pageLoadMode="nextButton"
                nextButtonText="More"
            />
        );
    }
}

export default App;

Local arrays and remote datasets loaded using the CustomStore in raw mode are only rendered page by page. In other cases, remote datasets are also loaded page by page if the server can partition data.

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

jQuery Lookup - Enable Paging

jQuery

Angular

Vue

React

ASP.NET MVC Controls

jQuery

Angular

Vue

React

See Also