Creating Paging from a Repeat Region

We will show you how to generate paging from a repeat region, on your page using Bootstrap 3 Dynamic Paging Generator. Also we will show you, how to keep the paging status using HTML5 Data Bindings State Management and HTML5 Data Bindings Extended repeater. First, let's create a server action. And add a name for it (1). Then, right click steps (2). And add a database connection (3).

Select your connection from the menu or setup one, if you haven't done this yet (1). Now, right click the database connection step (2). And add database query (3).

setup the query options (1). Select your database table, and add it to the query (2). Then, add the columns you need (3). And click OK, when you are done (4).

Save your action file (1). Now, let's setup a URL parameter, which will keep the paging state. Select the global URL collection, in the HTML5 Data Bindings Panel (2). And click the add new button. Enter a name, for the URL parameter. We call it page (3). Then, click OK.

Now, let's create a server action executor (1). And add a name for it (2). Select your server action, from the dropdown. And click OK, when you are done (3).

Expand the executor, that we've just created (1). And under data, select your database query (2). Select repeat region (3). And click insert (4).

Then, bind the info you need, inside the repeat region.

And select your repeat region, in the HTML5 Data Bindings panel (1). Then, click the edit repeat region button . Note you need to have the, HTML5 Data Bindings Extended Repeater extension installed, in order to do this (2). Set the page size (3). If you leave this field empty, all of the records will be displayed. We set it to, 15 records per page (4). And then, we need to setup the start page. Click the dynamic data button, for the start page (5).

And select the URL parameter, that we've already created (1). Click OK (2).

And click OK, to apply the changes to the repeat region. Now, click anywhere on your page, where you want to add the pagination (1). Open the insert panel (2). And select bootstrap 3 dynamic paging generator (3).

Select repeat region, as a paging source (1). And select your repeat region, from the dropdown (2). Then, setup the paging appearance and options. And enable state management option, if you want to keep the paging state, on page reload (3). Note this option requires HTML5 Data Bindings State Management extension installed. And then, select the URL parameter, which we created earlier from the dropdown (4). Click ok, when you are done.

Let's preview the results. That's how easy it is to create a client side paging from a repeat region and keep its state, using Bootstrap 3 Dynamic Paging Generator.