DataTablesWidget

A place to share your Plugins and Extensions

DataTablesWidget

Postby fc_Damir » Mon Feb 14, 2011 9:03 pm

Hello,

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 201 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
fc_Damir
 
Posts: 33
Joined: Mon Jun 14, 2010 9:13 am

Re: DataTablesWidget

Postby raymond » Tue Feb 15, 2011 3:18 am

Hi Damir,

Many thanks for sharing. The widget looks great!

Btw, the blog article was posted by Brazos (cajazzer)

__
Raymond
raymond
Site Admin
 
Posts: 215
Joined: Tue Mar 17, 2009 5:04 am

Re: DataTablesWidget

Postby fc_Damir » Tue Feb 15, 2011 9:58 am

raymond wrote:Btw, the blog article was posted by Brazos (cajazzer)



Sorry Brazos! Thanks for your blog post!

Best regards,
Damir
fc_Damir
 
Posts: 33
Joined: Mon Jun 14, 2010 9:13 am

Re: DataTablesWidget

Postby fc_enriqueism » Fri Dec 09, 2011 11:53 pm

Hi! I have a problem with the plugin, I need to put the widget in a page with some combo boxes as parameters for search. When I submit the form I need to redraw the table with new data, but I'm getting this error all the time:
DataTables warning (table id = 'resultado'): Requested unknown parameter '9' from the data source for row 0
someone has done a page like that?
Thanks for the help.
fc_enriqueism
 
Posts: 10
Joined: Wed Sep 28, 2011 12:25 am

Re: DataTablesWidget

Postby raymond » Sun Dec 11, 2011 1:28 pm

Hi,

I think it has something to do with your JSON dataset.

Check out this link from the DataTables forum:
http://datatables.net/forums/discussion/5331/datatables-warning-...-requested-unknown-parameter/p1
raymond
Site Admin
 
Posts: 215
Joined: Tue Mar 17, 2009 5:04 am


Return to Plugins & Widgets

Who is online

Users browsing this forum: No registered users and 2 guests

cron