Reactgular
Reactgular

Reputation: 54801

Efficiently render pagination data via custom layouts?

Current Approach

Currently I render all my pagination results in a single element using a <table> that has a header, body and footer structure. The rendering style is very spreadsheet like and this one element can handle paginated results for multiple controllers.

The Problem

I need to now support configurable rendering styles for the paginated results. The two main styles are spreadsheet and pinterest.com style (by pinterest I refer to vertical columns of varying lengths).

How To Implement

I'm looking for an answer on how to implement this using CakePHP 2.2 view features. Blocks, themes, and nested views. So that as much of the code is dry, and the configured part only applies the styling that is different.

The code to render the values in each tablet cell, the record title, and details like that should all be separated from the code that renders it either as a table or pinterest (or what ever you call that style).

Challenges

Each method in Cake seems to present limitations. What approach bests deals with the following?

Upvotes: 0

Views: 210

Answers (2)

Jon Ashdown
Jon Ashdown

Reputation: 175

I recently had to do this using an unordered list of definition lists. The key to doing this whilst keeping your code DRY is to use an element. Elements are ctp files that live in the folder Views/Elements

In my index.ctp, I changed the table to a ul tag, the tr tag to an li tag, and called the element to handle rendering the dl. Use an array to pass the object and its type to the element, and the rest can be done with css

index.ctp :

<ul><?php
  foreach ($blobs as $blob){
   echo $this->Html->tag('li',$this->element('dl',array('blob'=>$blob,'type'=>'Blob')));
  }
?></ul>

dl.ctp :

<dl class="<?php echo $type;?>"><?php
  foreach ($blob[$type] as $key => $v){
    echo $this->Html->tag('dt',$key);
    echo $this->Html->tag('dd',$v);
  }
?></dl>

Upvotes: 1

JvO
JvO

Reputation: 3106

Your best option may be to use CSS; you'll be amazed at what you can do with it. You can even 'flip' tables from rectangular layouts to vertical layouts (as on a mobile screen, for example), which seems to be close to what you want.

Upvotes: 0

Related Questions