I just try create another widget that load a jquery plugin how Raymond explain on last blog post of DataPickerWidget.
DataTables is a jQuery plugin that add advanced interaction control to a html table.
There is many option. In this widget I just add some option and the jquery-ui theme support.
This widget can be extended by adding property that set option of jquery datatables plugin.
Widget:
- Code: Select all
class DataTablesWidget extends RaxanUIWidget {
protected function _init() {
//$this->page->loadTheme('datatables-jq'); //DataTables default css style, use this without jquery-ui
$this->page->loadTheme('datatables-jq'); //DataTables jquery css style, use this with jquery-ui
$this->page->loadTheme('ui-lightness'); //Your jq css styl
// load the javascript
$this->page->loadScript('jquery');
$this->page->loadScript('jquery.dataTables');
// Bind the DATATABLES to the element
// Note that elmID is created in the RaxanUIWidget constructor so it is
// available here as the jQuery selector
c('#'.$this->elmId)->dataTable(array(
"bProcessing" => true,
"sAjaxSource" => 'json_source.txt',
"bJQueryUI" => true //set false if you don't want use jquery-ui
//many other option see online
)
);
}
}
Page:
- Code: Select all
<?php
require_once 'raxan/pdi/autostart.php';
Raxan::loadWidget('datatables');
class IndexPage extends RaxanWebPage {
protected function _load() {
$this->loadCss("master");
$this->loadTheme("default");
$this->loadScript("http://jqueryui.com/themeroller/themeswitchertool/", true); //load jquery ui theme switcher widget
$this->addScript("$('#switcher').themeswitcher();", "ready"); //add jquery theme switcher widget
}
}
?>
<div class="e90 container">
<!-- start widget -->
<table cellpadding="0" cellspacing="0" border="0" class="display" xt-ui="DataTablesWidget">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<!-- here is load the table record from json_source.txt -->
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
<!-- end widget -->
</div>
see a demo:
http://dev.dgweb.ch/datatables.php
download file:
RaxanWidget - load jQuery Plugin DataTables.zip- (86.94 KiB) Downloaded 436 times
I also added a jquery ui theme into raxan/ui/css/jquery-ui-theme-name/theme.css with images/ folder
that is load per default.
Datatables plugin have one css default that is used without jquery.
And also have one css that is used with jquery ui theme.
I put this two theme and our images like a raxan theme.
Now is missing one raxan plugin that can be used by datatables jquery plugin how backend for manipulate record...
Good coding!
Damir