SmartUI::DataTable Class
This is a basic usage of SmartUI's DataTable class. If you want to know more about the real HTML layout, click here
SmartUI::DataTable($data [, $options = array(), $title = '<h2>DataTable Result Set</h2>']);
Setup
$data = json_decode(file_get_contents(APP_URL."/data/data.json"));
$ui = new SmartUI;
$options = array(
'checkboxes' => true,
'row_details' => '
<div class="alert alert-warning fade in">
<i class="fa-fw fa fa-warning"></i>
<strong>Warning</strong> The ID for {{Name}} is #{{ID}}.
</div>'
);
$dt = $ui->create_datatable($data, $options, '<h2>My Datatable</h2>');
);
Usage
// setup a cell
$dt->cell('Name',
array(
'url' => 'http://myapp.com/?profile={{ID}}' // you get other's cell value using "{{COLUMN_NAME}}"
)
);
$dt->cell('Name', function($row, $value) {
return 'http://myapp.com/?profile='.$row->ID // or use a callback to return "Name" column's custom content
});
// hide a column
$dt->hide('City', true);
// or ...
$dt->hidden(array('City'));
Print HTML!
$dt->print_html();
Print JS!
<script>
<?php
$dt->print_js();
?>
</script>
Property Reference
Below are the list of available properties for the class:
DataTable::cell
array of specified column name with string, closure or array value
$cell = array(
'COLUMN_NAME' => array(
'icon' => '',
'content' => '',
'color' => '',
'url' => array( // can also be a direct string URL
'href' => '',
'target' => '',
'title' => '',
'attr' => ''
)
)
);
// sample call
$dt->cell(
"Phone" => '{{Name}} - {{Phone}} <span class="label label-success">active</span>'
);
// or..
$dt->cell('Phone', function($row, $value) {
return $row->Name.' - '.$value.' <span class="label label-success">active</span>';
});
DataTable::col
array of specified column name with string, closure or array value
$col = array(
'COLUMN_NAME' => array( // can also be a closure, but you need to return same array structure. If string, it's default to the 'name' key
'name' => '',
'class' => '',
'attr' => '',
'icon' => '',
'hidden' => false // or true
)
);
// sample call
$dt->col('ID', array(
'name' => 'ID #'
));
// or...
$dt->col('ID', 'ID #');
DataTable::options
array of options.
$options = array(
"in_widget" => true,
"row_details" => false,
"checkboxes" => false,
"static" => false,
"paginate" => true
);
// sample call
$dt->options('in_widget', true)->options('checkboxes', true);
DataTable::data
array of object or array. This is the main datasource. It's recomended to set this up upon $ui->create_datatable($data);
DataTable::widget
SmartUI::Widget the main widget container of the table (if $options['in_widget'] == true). Check out Widget Class documentation here
DataTable::id
string of table's id (will create a unique id if not specified)
DataTable::row
array array of specified row index with array, closure or string values.
$row = array(2, array(
"hidden" => false,
"checkbox" => true,
"detail" => true,
"class" => "",
"attr" => "",
"content" => true
));
// sample call
$dt->row(2, array(
'checkbox' => false,
'deail' => true
))
// empty a row
$dt->row(3, '');
//hide a row
$dt->row(4, false);
DataTable::hidden
array of hidden columns
// sample call
$dt->hidden(array('Name', 'Zip'));
DataTable::hide
array of column names with bool values
// sample call
$dt->hide('Name', true)->hide('Zip', true)->hide('City', false);
DataTable::js
array of js custom properties
$js = array(
'properties' => array(),
'oTable' => '', // the oTable var
'custom' => ''
)
// sample call
$dt->js('properties', array(
'fnCreatedRow' => 'function( nRow, aData, iDataIndex ) {
var cell = $("td:eq(7)", nRow);
var city = aData[7];
if ( city == "Abbotsford" || city == "Baranello" ) {
cell.html(city + \' <span class="label label-info">great city</span>\');
}
}'
));
DataTable::sort
array of specified coumn name to be sorted
$sort = array('COLUMN_NAME', 'asc');
// sample call
$dt->sort('Name', 'asc');