Datatable Widget

The Datatable widget provides functions that enable you to embed the YUI datatable widget in your page.

Initializing the Class

Like in CodeIgniter, the Data table Widget is initialized in your controller using the $this->ciwy->loadComponent function:

$this->ciwy->loadComponent('datatable');

Once loaded, the Data table Widget is ready to be used in your wiev
echo $this->ciwy->yuiTags(); echo $this->ciwy->container('datatable'); echo $this->ciwy->generate(); If necessary you can change widget property using

$this->ciwy->datatable->setProperty();


            $this->ciwy->datatable->setProperty(array('caption' => 'Table caption', 'draggableColumns' => true));

$this->ciwy->datatable->setColumnProperty();


          $this->ciwy->datatable->setColumnProperty(

            array(

              'id'       => array('label' => 'ID',     'sortable' => true,  'resizeable' => true),

              'amount'   => array('label' => 'Amount', 'sortable' => true,  'resizeable' => true),

              'quantity' => array('label' => 'Q.ta',   'sortable' => true,  'resizeable' => false),

            'title'    => array('label' => 'Titolo', 'sortable' => false, 'resizeable' => true),

            )

          );

Examples

Here is an example showing how you can create a datatable widget setting some properties.


        $this->ciwy->loadComponent('datatable');

        $this->ciwy->datatable->setProperty(array('caption' => 'Table caption', 'draggableColumns' => true));

        $this->ciwy->datatable->setColumnProperty(

          array(

            'id'       => array('label' => 'ID',     'sortable' => true,  'resizeable' => true),

            'amount'   => array('label' => 'Amount', 'sortable' => true,  'resizeable' => true),

            'quantity' => array('label' => 'Q.ta',   'sortable' => true,  'resizeable' => false),

          'title'    => array('label' => 'Titolo', 'sortable' => false, 'resizeable' => true),

          )

        );
        echo $this->ciwy->yuiTags();

        echo $this->ciwy->container('datatable');

        echo $this->ciwy->generate();

$this->ciwy->datatable->container();

Returns HTML code for the datatable container.


        echo $this->ciwy->datatable->container();

        // Produces: <div id="datatable"></div>

$this->ciwy->datatable->create_istance();

Create a new datatable widget istance and return its name.
The function accept as optional parameter the name of the new istance, if exists an istance with the same name, the function will first generate a new istance name for you and then the new istance itself.


        $this->ciwy->datatable->create_istance('dt1');

$this->ciwy->datatable->generate();

Return HTML code with JavaScript inside


        <script type="text/javascript">

        (function() {
          var Dom = YAHOO.util.Dom,
            Event = YAHOO.util.Event;
          var ds1 = new YAHOO.util.LocalDataSource(
            [
              { "id": "po-0000", "date": "24/02/1981", "quantity": 1, "amount": 730.22, "title": "A title for 1" },
              { "id": "po-0168", "date": "25/02/1980", "quantity": 2, "amount": 118.9, "title": "A title for 2" },
              { "id": "po-0169", "date": "26/02/1980", "quantity": 30, "amount": 323.33, "title": "A title for 3" },
              { "id": "po-0170", "date": "27/02/1980", "quantity": 42, "amount": 60.11, "title": "A title for 4" },
              { "id": "po-0171", "date": "28/02/1980", "quantity": 5, "amount": 252.99, "title": "A title for 5" }
            ]
          );
          ds1.responseType   = YAHOO.util.LocalDataSource.TYPE_JSARRAY;
          ds1.responseSchema = {
            fields : ["id", "date", "quantity", "amount", "title"]
          };
          var dt1ColumnDefs =
            [
              { "label": "ID", "sortable": true, "resizeable": true, "key": "id" },
              { "label": "Amount", "sortable": true, "resizeable": true, "key": "amount" },
              { "label": "Q.ta", "sortable": true, "resizeable": false, "key": "quantity" },
              { "label": "Titolo", "sortable": false, "resizeable": true, "key": "title" }
            ];
          var dt1Configs = { "caption": "Table caption", "draggableColumns": true };
          var dt1 = new YAHOO.widget.DataTable("dt1Container", dt1ColumnDefs, ds1, dt1Configs);
        })();
        </script>

$this->ciwy->datatable->setProperty();

Used to manually set YUI datatable widget property. The function will prevent to set invalid property name.


        $property = array('caption' => 'Table caption');

        $this->ciwy->datatable->setProperty($property);