Examples

You can see an example of using length detector by following this link : Length Detector (in french)

You can see an example of using input-mask by following this link : Input mask (in french)

<?php
// Titles for the table element
$titles = array(
  array('title' => 'First name', 'witdh' => 25),
  array('title' => 'Last name', 'witdh' => 25),
  array('title' => 'Born', 'witdh' => 25),
  array('title' => 'Country', 'witdh' => 25),
  array('title' => 'Disabled column', 'witdh' => 25),
);

echo
$this->Bs->table($titles, array('bordered', 'hover'), true) .
  // Set the link for cells
  $this->Bs->setCellLink('http://webandcow.github.io/CakePHP-BsHelpers/examples.html') .
  // OR for example : $this->Bs->setCellLink(array('controller' => 'pages', 'action' => 'home')) .

  $this->Bs->cell('Zachary') .
  $this->Bs->cell('WILLIAMS') .
  $this->Bs->cell('05/05/1991') .
  $this->Bs->cell('USA') .
  // For the last, the rowlink is disabled
  $this->Bs->cell($this->Bs->icon('check'), 'myClass', false) .
$this->Bs->endTable();
?>


First name Last name Born Country Disabled column
Zachary WILLIAMS 05/05/1991 USA
<?php
$datas = array(
  array(
    'Zachary', 
    '<span data-sorter="1">Zacchary (1)</span>', 
    '05/05/1991', 
    $this->Bs->icon('check', array(), array('data-sorter' => 1)), 
    'Actions'
  ),
  array(
    'Jacob', 
    '<span data-sorter="4">Jacob (4)</span>', 
    '30/01/2006', 
    $this->Bs->icon('users', array(), array('data-sorter' => 2)), 
    'Actions'
  ),
  array(
    'Hannah', 
    '<span data-sorter="3">Hannah (3)</span>', 
    '17/03/2000', 
    $this->Bs->icon('times', array(), array('data-sorter' => 0)), 
    'Actions'
  ),
  array(
    'Emily', 
    '<span data-sorter="2">Emily (2)</span>', 
    '02/08/1885', 
    $this->Bs->icon('times', array(), array('data-sorter' => 0)), 
    'Actions'
  )
);

// Titles for the table element
$titles = array(
  array('title' => 'Firstname', 'witdh' => 25),
  array('title' => 'Custom order', 'witdh' => 25, 'sorter' => 'data'),
  array('title' => 'Date', 'witdh' => 25, 'sorter' => 'shortDate dateFormat-ddmmyyyy'),
  array('title' => 'Icons', 'witdh' => 25, 'sorter' => 'data'),
  array('title' => 'Unsorted column', 'witdh' => 25, 'sorter' => 'false'),
);

echo
$this->Bs->table($titles, array('tablesorter'));
  foreach ($datas as $data) {
    echo
    $this->Bs->cell($data[0]) .
    $this->Bs->cell($data[1]) .
    $this->Bs->cell($data[2]) .
    $this->Bs->cell($data[3]) .
    $this->Bs->cell($data[4]);
  }
echo
$this->Bs->endTable();
?>


Firstname Custom order Date Icons Unsorted column
Zachary Zacchary (1) 05/05/1991 Actions
Jacob Jacob (4) 30/01/2006 Actions
Hannah Hannah (3) 17/03/2000 Actions
Emily Emily (2) 02/08/1885 Actions

Further explanations

  • [data-sorter] - It's a special attributes, to sort in the way that you want. It's very useful to sort icons for example.
  • [sorter] - In titles, you can define if you want a specific format for your sort (like date). You can define sorter to "data", to choose to use the "data-sorter" attributes as sort order. You can also define it to false to disable the column.
  • [tablesorter] - Don't forget to add the "tablesorter" class in your table to load javascripts and css.