-
Notifications
You must be signed in to change notification settings - Fork 39
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.