Creating Paging from Paged Database Query

We will show you how to create paging for a server action paged query. First, let's create a server action file (1). and add a name for it. Then, right click steps (2). And add a database connection (3).

and setup its options (1). Enter your server address, username and password 2). Click OK when you are done (3).

Now, right click the database connection step (1). Open the database actions menu. And add a paged query (2).

Setup query options (1). Select and add your database table (2). then add the table columns, which you need. We add all of them (3). And click ok, when you are done setting up your query.

Save your action file (1). Now, let's create an URL variable, which will be used to store our current page. Note this will be done with the help of HTML5 Data Bindings State Management extension. Click the global URL collection in the HTML5 Data Bindings Panel. And then click the add new button (2). Add a name for the URL parameter. We call it offset (3). Click OK.

Now, let's create a server action executor (1). Add a name for it (2). And select your server action, from the dropdown (3). Then, click the offset variable, in the input data tab (4).

Select the URL parameter, which we've already created. And assign it as a value, for the offset variable (1). Do not forget to check the refresh the action, when this value changes option (2). Then, enter how many records, should be displayed per page (3). We enter 15. If you leave this field empty 25 records will be displayed by default (4). Click OK, when you are done.

Now, expand your server action executor (1). And select the data repeating element, inside your paged query (2). then select repeat region, and click the insert button (3).

Then, bind what you need inside the repeat region (1). We'd like to show our products names inside (2). So we insert the product name binding, inside the repeater. Now click anywhere on your page, where you'd like to insert the paging. And open the insert panel.

Click the Bootstrap 3 Dynamic Paging Generator icon (2). Select the paging source. We select paged server action, as we are using a paged database query (3). then, select the data source (4).

Expand your server action executor, which contains the paged database query (1). And under data, select your paged query (2). Click OK, when you are done (3).

then setup the paging options, like paging size page link separator and the number of outer and adjacent links (1). We select the default size, and leave the other options to their default values Select whether to show the previous next first and last buttons. You can customize their content with custom text, if needed. Enable the state management option if you like to store the paging state, when reloading the page. Note, that this option requires you to have the HTML5 Data Bindings State Management extension installed (2). Then select the offset parameter. Here, select the offset parameter from your paged query executor in our case it is called offset. Click OK, when you are done (3).

Now let's preview the results. That's how easy it is to create paging from a paged database query using Bootstrap 3 Dynamic Paging Generator.