Trying to add sorting to a table

Discuss anything that's related to the Raxan framework

Trying to add sorting to a table

Postby donkeytom » Thu Feb 24, 2011 8:33 pm

Hello,

I'm just starting out with Raxan but I really like it. I'm trying to build off the Employee Listing demo to make the data sortable. I'm pulling from my database and the data is displayed, but my efforts to sort it so far have failed. I played with Damir's DataTables widget, and could get it to load the static json data, but not using a different source. I also tried creating a widget using tablesorter from tablesorter.com. I'll put some code snapshots below, but now I'm wondering if I'm going about this the wrong way, is there a simpler way to add sorting to a table? My old PHP code re-queried the database to sort, would like to make it more effecient.

Thanks for any help!

-Tom

Code: Select all
<?php
   class TableSorterWidget extends RaxanUIWidget {
        protected function _init() {
            // load the stylesheet
            $this->page->loadCSS('style');
       $this->page->loadCSS('jq');
            // load the javascript
            $this->page->loadScript('jquery.tablesorter');
            $this->page->loadScript('jquery.tablesorter.pager');
            c('#'.$this->elmId)->tablesorter();
        }
    }
?>


Code: Select all
<table id="emplist" class="rax-table mouse-cursor" cellpadding="0" cellspacing="0" xt-ui="TableSorterWidget">


I see the below code in the rendered HTML, but it looks the same as if I hadn't added anything. With the DataTables widget I got some errors and no data shown.

Code: Select all
<script type="text/javascript">
 Raxan.ready(function() {$("#emplist").tablesorter();
 $("#emplist tbody tr").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});
 $bind("#pager","click","","","","",{dt:"a"});
 $bind("#emplist","click","","","","",{dt:"tr"});});
</script>
donkeytom
 
Posts: 3
Joined: Thu Feb 24, 2011 8:12 pm

Re: Trying to add sorting to a table

Postby fc_Damir » Thu Feb 24, 2011 10:04 pm

Hi Tom,

First of all welcome to the Raxan World!

What error you have with DataTables Widget?

Try load datatables with basic function and static html table (withot json.txt data source).

Widget Code (Put this into your widget):
Code: Select all
    class DataTablesWidget extends RaxanUIWidget {
        protected function _init() {
           $this->page->loadTheme('datatables');  // load main css of datatables
            $this->page->loadScript('jquery');   //load jquery
            $this->page->loadScript('jquery.dataTables'); //load datatables
            c('#'.$this->elmId)->dataTable(); // load datatables
        }
    }


RaxanWebPage:
Code: Select all
  require_once 'raxan/pdi/autostart.php';

  class Demo extends RaxanWebPage {

    protected function _indexView(){}

    protected function _datatablesView(){

      Raxan::loadWidget('datatables');

    }

    }


This is html code that you can put into template or view or directly into raxan web page:
Code: Select all
<table cellpadding="0" cellspacing="0" border="0" xt-ui="DataTablesWidget" class="display">

    <thead>
      <tr>
        <th>Rendering engine</th>
        <th>Browser</th>
        <th>Platform(s)</th>
        <th>Engine version</th>
        <th>CSS grade</th>
      </tr>
    </thead>

    <tbody>
      <tr class="gradeX">
         <td>Trident</td>
         <td>Internet
             Explorer 4.0</td>
         <td>Win 95+</td>
         <td class="center">4</td>

         <td class="center">X</td>
      </tr>
      <tr class="gradeC">
         <td>Trident</td>
         <td>Internet
             Explorer 5.0</td>
         <td>Win 95+</td>
         <td class="center">5</td>

         <td class="center">C</td>
      </tr>
      <tr class="gradeA">
         <td>Trident</td>
         <td>Internet
             Explorer 5.5</td>
         <td>Win 95+</td>
         <td class="center">5.5</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Trident</td>
         <td>Internet
             Explorer 6</td>
         <td>Win 98+</td>
         <td class="center">6</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Trident</td>
         <td>Internet Explorer 7</td>
         <td>Win XP SP2+</td>
         <td class="center">7</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Trident</td>
         <td>AOL browser (AOL desktop)</td>
         <td>Win XP</td>
         <td class="center">6</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Firefox 1.0</td>
         <td>Win 98+ / OSX.2+</td>
         <td class="center">1.7</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Firefox 1.5</td>
         <td>Win 98+ / OSX.2+</td>
         <td class="center">1.8</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Firefox 2.0</td>
         <td>Win 98+ / OSX.2+</td>
         <td class="center">1.8</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Firefox 3.0</td>
         <td>Win 2k+ / OSX.3+</td>
         <td class="center">1.9</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Camino 1.0</td>
         <td>OSX.2+</td>
         <td class="center">1.8</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Camino 1.5</td>
         <td>OSX.3+</td>
         <td class="center">1.8</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Netscape 7.2</td>
         <td>Win 95+ / Mac OS 8.6-9.2</td>
         <td class="center">1.7</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Netscape Browser 8</td>
         <td>Win 98SE+</td>
         <td class="center">1.7</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Netscape Navigator 9</td>
         <td>Win 98+ / OSX.2+</td>
         <td class="center">1.8</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Mozilla 1.0</td>
         <td>Win 95+ / OSX.1+</td>
         <td class="center">1</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Mozilla 1.1</td>
         <td>Win 95+ / OSX.1+</td>
         <td class="center">1.1</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Mozilla 1.2</td>
         <td>Win 95+ / OSX.1+</td>
         <td class="center">1.2</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Mozilla 1.3</td>
         <td>Win 95+ / OSX.1+</td>
         <td class="center">1.3</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Mozilla 1.4</td>
         <td>Win 95+ / OSX.1+</td>
         <td class="center">1.4</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Mozilla 1.5</td>
         <td>Win 95+ / OSX.1+</td>
         <td class="center">1.5</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Mozilla 1.6</td>
         <td>Win 95+ / OSX.1+</td>
         <td class="center">1.6</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Mozilla 1.7</td>
         <td>Win 98+ / OSX.1+</td>
         <td class="center">1.7</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Mozilla 1.8</td>
         <td>Win 98+ / OSX.1+</td>
         <td class="center">1.8</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Seamonkey 1.1</td>
         <td>Win 98+ / OSX.2+</td>
         <td class="center">1.8</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Gecko</td>
         <td>Epiphany 2.20</td>
         <td>Gnome</td>
         <td class="center">1.8</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Webkit</td>
         <td>Safari 1.2</td>
         <td>OSX.3</td>
         <td class="center">125.5</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Webkit</td>
         <td>Safari 1.3</td>
         <td>OSX.3</td>
         <td class="center">312.8</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Webkit</td>
         <td>Safari 2.0</td>
         <td>OSX.4+</td>
         <td class="center">419.3</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Webkit</td>
         <td>Safari 3.0</td>
         <td>OSX.4+</td>
         <td class="center">522.1</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Webkit</td>
         <td>OmniWeb 5.5</td>
         <td>OSX.4+</td>
         <td class="center">420</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Webkit</td>
         <td>iPod Touch / iPhone</td>
         <td>iPod</td>
         <td class="center">420.1</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Webkit</td>
         <td>S60</td>
         <td>S60</td>
         <td class="center">413</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Presto</td>
         <td>Opera 7.0</td>
         <td>Win 95+ / OSX.1+</td>
         <td class="center">-</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Presto</td>
         <td>Opera 7.5</td>
         <td>Win 95+ / OSX.2+</td>
         <td class="center">-</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Presto</td>
         <td>Opera 8.0</td>
         <td>Win 95+ / OSX.2+</td>
         <td class="center">-</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Presto</td>
         <td>Opera 8.5</td>
         <td>Win 95+ / OSX.2+</td>
         <td class="center">-</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Presto</td>
         <td>Opera 9.0</td>
         <td>Win 95+ / OSX.3+</td>
         <td class="center">-</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Presto</td>
         <td>Opera 9.2</td>
         <td>Win 88+ / OSX.3+</td>
         <td class="center">-</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Presto</td>
         <td>Opera 9.5</td>
         <td>Win 88+ / OSX.3+</td>
         <td class="center">-</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Presto</td>
         <td>Opera for Wii</td>
         <td>Wii</td>
         <td class="center">-</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Presto</td>
         <td>Nokia N800</td>
         <td>N800</td>
         <td class="center">-</td>

         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>Presto</td>
         <td>Nintendo DS browser</td>
         <td>Nintendo DS</td>
         <td class="center">8.5</td>

         <td class="center">C/A<sup>1</sup></td>
      </tr>
      <tr class="gradeC">
         <td>KHTML</td>
         <td>Konqureror 3.1</td>
         <td>KDE 3.1</td>

         <td class="center">3.1</td>
         <td class="center">C</td>
      </tr>
      <tr class="gradeA">
         <td>KHTML</td>
         <td>Konqureror 3.3</td>
         <td>KDE 3.3</td>

         <td class="center">3.3</td>
         <td class="center">A</td>
      </tr>
      <tr class="gradeA">
         <td>KHTML</td>
         <td>Konqureror 3.5</td>
         <td>KDE 3.5</td>

         <td class="center">3.5</td>
         <td class="center">A</td>
      </tr>
      <tr class="gradeX">
         <td>Tasman</td>
         <td>Internet Explorer 4.5</td>
         <td>Mac OS 8-9</td>

         <td class="center">-</td>
         <td class="center">X</td>
      </tr>
      <tr class="gradeC">
         <td>Tasman</td>
         <td>Internet Explorer 5.1</td>
         <td>Mac OS 7.6-9</td>

         <td class="center">1</td>
         <td class="center">C</td>
      </tr>
      <tr class="gradeC">
         <td>Tasman</td>
         <td>Internet Explorer 5.2</td>
         <td>Mac OS 8-X</td>

         <td class="center">1</td>
         <td class="center">C</td>
      </tr>
      <tr class="gradeA">
         <td>Misc</td>
         <td>NetFront 3.1</td>
         <td>Embedded devices</td>

         <td class="center">-</td>
         <td class="center">C</td>
      </tr>
      <tr class="gradeA">
         <td>Misc</td>
         <td>NetFront 3.4</td>
         <td>Embedded devices</td>

         <td class="center">-</td>
         <td class="center">A</td>
      </tr>
      <tr class="gradeX">
         <td>Misc</td>
         <td>Dillo 0.8</td>
         <td>Embedded devices</td>

         <td class="center">-</td>
         <td class="center">X</td>
      </tr>
      <tr class="gradeX">
         <td>Misc</td>
         <td>Links</td>
         <td>Text only</td>

         <td class="center">-</td>
         <td class="center">X</td>
      </tr>
      <tr class="gradeX">
         <td>Misc</td>
         <td>Lynx</td>
         <td>Text only</td>

         <td class="center">-</td>
         <td class="center">X</td>
      </tr>
      <tr class="gradeC">
         <td>Misc</td>
         <td>IE Mobile</td>
         <td>Windows Mobile 6</td>

         <td class="center">-</td>
         <td class="center">C</td>
      </tr>
      <tr class="gradeC">
         <td>Misc</td>
         <td>PSP browser</td>
         <td>PSP</td>

         <td class="center">-</td>
         <td class="center">C</td>
      </tr>
      <tr class="gradeU">
         <td>Other browsers</td>
         <td>All others</td>
         <td>-</td>

         <td class="center">-</td>
         <td class="center">U</td>
      </tr>
    </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 -->


That is all. See here how works: http://dgweb.ch/demo.php?vu=datatables

Let mw know if this work for you.

Your widget seem to be work because code generated is correct: $("#emplist").tablesorter();
Maybe you must check where you have javascript and css files of tablesorter plugin.


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

Re: Trying to add sorting to a table

Postby donkeytom » Fri Feb 25, 2011 10:28 pm

Thanks Damir! I was able to get it to work with your help. Looks similiar to what I had before, so not sure where I went wrong. I may try again with the tablesorter.com code and will post if I'm successful.

Thanks again,
Tom
donkeytom
 
Posts: 3
Joined: Thu Feb 24, 2011 8:12 pm

Re: Trying to add sorting to a table

Postby fc_Damir » Fri Feb 25, 2011 11:15 pm

Hi Tom,

I'm glad to hear that function for you.

I see your widget table sorter, maybe you are wrong because you are missing load jquery framework into widget.

I think the code for table sorter must be something like this (I don't test it):

Code: Select all
class TableSorterWidget extends RaxanUIWidget {
        protected function _init() {
      
            $this->page->loadCSS('style');
            $this->page->loadCSS('jq');
       $this->loadScript('jquery');
            $this->page->loadScript('jquery.tablesorter');
            $this->page->loadScript('jquery.tablesorter.pager');
            c('#'.$this->elmId)->tablesorter()->tablesorterPager( array('container'=> '#pager') );

        }
    }


Let me know if this work.

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

Re: Trying to add sorting to a table

Postby donkeytom » Thu Mar 03, 2011 7:16 pm

I've been playing with the datatables widget, and having problems trying to implement the "tabs" feature, based on the formatting. The different ways I've tried to escape in the widget .php file haven't worked. Any thoughts on how to include something like the below in the widget file?

Code: Select all
<script type="text/javascript" charset="utf-8">

   $(document).ready(function() {
      $("#tabs").tabs( {
         "show": function(event, ui) {
         var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
         if ( oTable.length > 0 ) {
            oTable.fnAdjustColumnSizing();
                  }
            }
            } );
            
      $('table.display').dataTable( {
         "sScrollY": "400px",
         "bPaginate": true,
         "bJQueryUI": true,
         "sPaginationType" : "full_numbers",
         "aaSorting": [[ 7, "desc" ]],
         "aoColumnDefs": [
            { "aTargets": [ 0 ], "bVisible": false },
            { "aTargets": [ 7 ], "sType": "date" }
               ]
            } );
         } );
</script>


Thanks, Tom
donkeytom
 
Posts: 3
Joined: Thu Feb 24, 2011 8:12 pm

Re: Trying to add sorting to a table

Postby fc_Damir » Thu Mar 03, 2011 10:18 pm

Hi Tom,

I think addScript() method is what you search.
You can add js code from widget with this method using $this->page->addScript('inline javascript code','ready').

This code below:
Code: Select all

$this->page->addScript('

         $("#tabs").tabs( {
           "show": function(event, ui) {
              var oTable = $(\'div.dataTables_scrollBody>table.display\', ui.panel).dataTable();
              if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
               }
             }
          } );

             $("#'.$this->elmId.'").dataTable( {
             "sScrollY": "400px",
             "bPaginate": true,
             "bJQueryUI": true,
             "sPaginationType" : "full_numbers",
             "aaSorting": [[ 7, "desc" ]],
             "aoColumnDefs": [
                { "aTargets": [ 0 ], "bVisible": false },
                { "aTargets": [ 7 ], "sType": "date" }
                   ]
                } );
             } );
           ', 'ready');



generate in the head this (Raxan.ready is how document.ready of jquery)
Code: Select all
<script type="text/javascript">//
Raxan.ready(function(){
             $("#tabs").tabs( {
             "show": function(event, ui) {
                var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
                if ( oTable.length > 0 ) {
                  oTable.fnAdjustColumnSizing();
                 }
               }
             });

             $("#e0x1").dataTable( {
             "sScrollY": "400px",
             "bPaginate": true,
             "bJQueryUI": true,
             "sPaginationType" : "full_numbers",
             "aaSorting": [[ 7, "desc" ]],
             "aoColumnDefs": [
                { "aTargets": [ 0 ], "bVisible": false },
                { "aTargets": [ 7 ], "sType": "date" }
                   ]
                } );
             } );
           
})//</script>



Or you can use php array how input of a plugin.

Example:
Code: Select all
c('#'.$this->elmId)->dataTable(

             array(
              "sScrollY" => "400px",
              "bPaginate" => true,
              "bJQueryUI" => true,
              "sPaginationType" => "full_numbers",
              "aaSorting" => array( 7, "desc"),
              "aoColumnDefs" =>
              array(
                array(
                    'aTargets' => 0,
                    'bVisible' => false
                  ),
                array(
                    'aTargets' =>  7,
                    'sType' => 'date'
                  )
                )
              )
           );


generate in the head:
Code: Select all
<script type="text/javascript"> Raxan.ready(function() {$("#e0x1").dataTable({"sScrollY":"400px","bPaginate":true,"bJQueryUI":true,"sPaginationType":"full_numbers","aaSorting":[7,"desc"],"aoColumnDefs":[{"aTargets":0,"bVisible":false},{"aTargets":7,"sType":"date"}]})}); </script>


using http://jsbeautifier.org/ become:
Code: Select all
<script type="text/javascript">
    Raxan.ready(function() {
        $("#e0x1").dataTable({
            "sScrollY": "400px",
            "bPaginate": true,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aaSorting": [7, "desc"],
            "aoColumnDefs": [{
                "aTargets": 0,
                "bVisible": false
            }, {
                "aTargets": 7,
                "sType": "date"
            }]
        })
    });
</script>


I don't test the code in the example, maybe there is some error!

I hope this can help you! Good coding.

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


Return to General Discussions

Who is online

Users browsing this forum: No registered users and 1 guest

cron