Pager

There are two sides to Pager: the display and the feed. The display occurs in your controller's HTML view.

    public function getHtmlView($data, \Request $request)
    {
        \Pager::prepare();
        $template = new \Template;
        $template->setModuleTemplate('your_module', 'templateSubDirectory/Pager_Template_file.html');
        return $template;
    }

The prepare function just includes the pager javascript. Your html template should look like the following:

<div class="pager-listing" id="pet-list" data-rpp="10">
    <div style="text-align:right" class="pager-search"></div>
    <table class="table table-striped">
        <thead class="pager-head">
            <tr>
                <th class="pager-header animal"></th>
                <th class="pager-header name"></th>
                <th class="pager-header color"></th>
            </tr>
        </thead>
        <tbody class="pager-body">
            <tr class="pager-row">
                <td class="pager-column animal"></td>
                <td class="pager-column name"></td>
                <td class="pager-column color"></td>
            </tr>
        </tbody>
    </table>
    <div class="pagination pagination-centered"></div>
</div>

Make sure you have a block node (like <div>) surrounding your pager html. This block MUST have a distinct id and the class "pager-listing". The data field (data-rpp="10") indicates how many "rows per page" should be shown.

In this example, the next required node is "pager-search." This will create a search box for the pager. The last UI requirement is near the bottom. The "pagination" class node will contain a listing of pages the user can navigate through.

Sorting the columns of information occurs in "pager-header" class node. Make sure each header contains that class AND, very important, the name of the column the header will sort.

Finally, the rows themselves appear in the "pager-row" by using the "pager-column" nodes. Again, it is important the at the column names appear as classes in the pager-column. You only need to give a single example row. The Pager will use it as a stamp for the remaining rows.

The Pager will now attempt to access your controller's JSON view. This view should exist at the same url used to access the html view.

The first example we will use is a static listing of rows.

 protected function getJsonView($data, \Request $request)
    {
        $rows[] = array('animal' => 'dog', 'name' => 'Lassie', 'color' => 'Brown and white', 'action' => 'do this');
        $rows[] = array('animal' => 'dog', 'name' => 'Beethoven', 'color' => 'Brown and white', 'action' => 'do that');
        $rows[] = array('animal' => 'cat', 'name' => 'Meow Se Tung', 'color' => 'Black');
        $rows[] = array('animal' => 'bird', 'name' => 'Tweety', 'color' => 'Yellow');
        $rows[] = array('animal' => 'mouse', 'name' => 'Mickey', 'color' => 'White and black');
        $rows[] = array('animal' => 'mongoose', 'name' => 'Ricki Ticki Tavi', 'color' => 'Brown');
        $pager = new \Pager;
        $pager->setHeaders(array('animal', 'name', 'color'));
        $pager->setId('pet-list');
        $pager->setRows($rows);
        $data = $pager->getJson();
        return parent::getJsonView($data, $request);
}