Custom views with pagination and filtering


The previous tutorial left out explanations of the Enable pagination and the Filter and Sort options of the Custom View settings. However, these settings are very useful when including record data along with the HTML in a custom view.

This tutorial will briefly explain how these settings can be utilized in a Custom View.

The Enable Pagination option

First, take a look at the effects of checking the Enable pagination option.
Here is a Custom View with the Enable pagination setting turned off.




Here is a Custom View with the Enable pagination setting turned on.



The latter displays the number of records that are inside the App, on the right hand side. If the App holds more than 100 records, it also displays a clickable pagination arrow.



Apart from the UI, there is also a difference in the Event object of the Record List events.
To see the difference, apply the JavaScript code found below to the App's JavaScript and CSS Customization settings. Refer to the Customizing Kintone with JavaScript & CSS page of the Kintone Help  for more details. This code will display the contents of the event object of the Record List page into the developer console.

Here is what's shown in the console when the Enable pagination setting is turned off.


Here is what's shown in the developer console when the Enable pagination setting is turned on.

With the Enable pagination setting turned off, the event object contains no record data. But with the setting turned on, the event object now contains record data. This might sound a bit strange, as there are no records that are displayed on this page - but think of it as the event object holding onto the record data, but simply not displaying it on the page.

In the above example, data of 100 records are stored in the event object. Clicking on the pagination arrow causes the event to trigger again, and the next set of records (in this case, 27 records) is contained in the Event object.

JavaScript can be used to display the values in the event object in a chosen style onto the previously written HTML.

The Filter and Sort option

The Filter and Sort option works in the same way as it does on a normal List View. It filters out the selected records based on chosen conditions, and orders them in the selected way. This filter and order is applied to the records inside the event object.


Hopefully this tutorial has prevented some confusion in the Custom View settings. The decision to use these settings should be based on how the Custom View will be structured.



<<< Go back to Custom View Tutorial 1

Was this article helpful?
1 out of 2 found this helpful
Do you have any questions or issues related to this article?
Please share your views with us in the Community forums!