{{description}}
First we need to construct the HTML for the table and controls.
``` {{>table-html-markup}} ```Now we can add some CSS to make it a little more presentable.
``` {{>table-css-styles}} ```Our small table application will have four main parts:
Now we need to create our YUI instance and tell it to load the modules.
``` {{>table-js-startup}} ```There are only a few modules we need to require:
We start off by defining the variables we need for the app.
``` {{>table-js-vars-abbr}} ```We have three references to `Node`s to prevent repetative look ups.
We have created two template variables that will be used to populate rows (`rowTemplate`) and the current page (`currentPageTemplate`) in the paginator.
We have an `Array` of data to be parsed through to build the table when we change pages or change how many rows are visible at one time.
Finally, we define our paginator showing 10 items per page. We set the `totalItems` to the number of items in the `data` array.
After we define our variables, we loop through the `data` array to format the population numbers.
Next, we need to define how we are going to get data from the `Array` to the table's body.
``` {{>table-js-showPage}} ```The variable definition is pretty straight forward with the exception of `min` and `max`; that can look a little confusing, so let's take it step by step.
First, we set `min` to the current page minus one and multiply it by the total number of items per page. This will give you a zero based index for the first item on the page — which is what we want when working with an `Array`.
Next, we set `max` to the smallest of either the last "virtual" item on the page (`page * itemsPerPage - 1`) or the total number of items. Since our last page may not end exactly at the last item (think 20 items per page and 50 total items), this will ensure that max is never more than we have to show.
Finally, we make sure `max` is greater than, or equal to, `min`.
The `for` loop starts at `min` and goes through `max` building a string of each row using `Y.Lang.sub` and the `rowTemplate`.
Then we set the table's body to the rows we created, and update the paginator's display.
When our paginator's page changes, we need to update the controls to set what is disabled, and what is not.
``` {{>table-js-updateControls}} ````Y.Paginator` has two methods that return boolean values about it's current state: `hasNextPage` and `hasPrevPage`. We use these methods to determin if the control buttons should be disabled or enabled.
For example, if there is not a previous page (`false` returned from `hasPrevPage`), the first control has the `disabled` ClassName applied, otherwise it is removed.
Now we need to describe what happens when the controls are interacted with.
``` {{>table-js-controls}} ```First off, when the "buttons" are clicked and are not disabled, we go to their respective page.
When the `perPage` select element is changed, we set the `itemsPerPage` of our paginator to the new value. We also set our paginator's page to `1` to reset the table's view.
The last thing we need to do before we wrap this up is bind our paginator's change events.
``` {{>table-js-paginator}} ```First, after our paginator fires the `itemsPerPageChange` event, we go to the first page unless it's already at the first page. If it is at the first page, we show the new page and update the controls.
After our paginator fires the `pageChange` event, we show that page, then update the controls.
Our last step is to show the initial page and set the initial state of the controls by updating them.
``` {{>table-js-begin}} ```That's it! Now let's put it all together.
``` {{>table-full}} ```