jQuery's DataTable is a really powerful tool to exhibit and manipulate data in a Table. It is also really quick to implement and have a big and extensive API and documentation.
Check it here: http://www.datatables.net/index
Also, I would really like some opinion. Please keep in mind this is my first attempt to build a CakePHP application from scratch. haha.
-- So this is what I wanted: combine CakePHP 2.1 JSON and XML views with DataTable's Server-side processing so DataTable will handle my Views as CakePHP gets the data and sends me through AJAX.
I have it working in 3 parts: My view and the JS script that will tell DataTable what to do; the Controller I'm calling in; and the Component that will manage passing data variables both ways Cake and DataTable.
VIEW
jQuery(document).ready(function() {
$('#tabela_controller').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/Controller/index",
"fnServerParams": function (aoData) {
aoData.push({"name":"model", "value":"Controller"});
aoData.push({"name":"fields", "value": ["Controller.id", "Controller.name"] });
},
"sServerMethod": "POST"
});
});
<table id="tabela_controller">
<thead>
<tr>
<th class="hidden-480">ID</th>
<th width="70%">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="dataTables_empty">Loading from server...</td>
</tr>
</tbody>
</table>
CONTROLLER
public function index() {
$this->Genero->recursive = 0;
if ($this->request->is('post')) {
// Load RequestHandler so it will output JSON
$this->RequestHandler->setContent('json', 'application/json');
// Load my Component and transform DataTable request to something Cake will read
$this->DataTable = $this->Components->load('DataTable');
$params = $this->DataTable->modelParams($this->request->data);
// Aditional Info for DataTable
$params['iTotal'] = $this->Controller->find('count');
// Does two things: uses $params created by modelParams and uses it to transform Cake nested result in something DataTable will read
$json = $this->DataTable->outputView($this->Controller->find('all', $params),$params);
$this->set(compact('json'));
}
}
COMPONENT
public function modelParams($requestdata) {
$out = array();
// Fields
if (isset($requestdata['fields'])) {
$requestdata['fields'] = explode(",",$requestdata['fields']);
foreach ($requestdata['fields'] as $value) {
$out['fields'][] = $value;
}
}
// Paging
if (isset($requestdata['iDisplayStart']) && $requestdata['iDisplayLength'] != '-1') {
$out['offset'] = intval($requestdata['iDisplayLength']);
$out['limit'] = intval($requestdata['iDisplayStart']);
unset($requestdata['iDisplayLength']);
unset($requestdata['iDisplayStart']);
}
// Ordering
if (isset($requestdata['iSortCol_0'])) {
for ($i=0; $i < intval($requestdata['iSortingCols']); $i++) {
if ($requestdata['bSortable_'.intval($requestdata['iSortCol_'.$i])] == "true") {
$out['order'][] = $requestdata['fields'][intval($requestdata['iSortCol_'.$i])] . ($requestdata['sSortDir_'.$i]==='asc' ? ' ASC' : ' DESC');
}
}
unset($requestdata['iSortCol_0']);
}
// Filtering
if (isset($requestdata['sSearch']) && $requestdata['sSearch'] != "") {
for ( $i=0 ; $i<count($requestdata['fields']); $i++ ) {
$out['conditions'][$requestdata['fields'][$i]] = "'%".$requestdata['sSearch']."%'";
}
unset($requestdata['sSearch']);
}
// Last Variables
$out['sEcho'] = $requestdata['sEcho'];
$out['model'] = $requestdata['model'];
unset($requestdata);
return $out;
}
public function outputView($result,$params) {
// Initial variables
$output = array(
"sEcho" => intval($params['sEcho']),
"iTotalRecords" => $params['iTotal'],
"iTotalDisplayRecords" => count($result),
"aaData" => array()
);
$model = $params['model'];
unset($params['model']);
// Include results
$row = array();
foreach($result as $linha) {
$column = array();
foreach ($linha[$model] as $value) {
$column[] = $value;
}
unset($linha);
$row[] = $column;
}
unset($result);
$output['aaData'] = $row;
unset($row);
return $output;
}
Like Us on FaceBook https://www.facebook.com/CakePHP
Find us on Twitter http://twitter.com/CakePHP
---
You received this message because you are subscribed to the Google Groups "CakePHP" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cake-php+unsubscribe@googlegroups.com.
To post to this group, send email to cake-php@googlegroups.com.
Visit this group at http://groups.google.com/group/cake-php?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
No comments:
Post a Comment