WebGUI
      Click here to register.
      
PBWG Banner

Sorting table tips

User: eskan
Date: 3/16/2008 4:25 am
Views: 386
Rating: 2    Rate [
|
]

here 2 tips to sort table with jquery and tablesorter :

1 - Sorting collaborative system search table.
 - cd your_extra_folder/js/
 - Download jquery and tablesorter :

wget http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js
wget http://tablesorter.com/jquery.tablesorter.js

 - Install this new template (package join) : root_import_collaboration_jquery-forum-search.wgpkg
 - Edit a collaborative system and choose jquery forum search as seach template.
 - Go back to site, do a search and click on header to sort column.
 - look at the template, and the easy code.

this tips doesn't  resolve paginate, only current page columns are sorted.

2 -  Sorting Users table in Admin console (useful for me !) :

- Edit the admin console template and add this in the head block :

 <script type="text/javascript" src="/extras/js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="/extras/js/jquery.tablesorter.js"> </script>
<script type="text/javascript">
$.fn.alternateRowColors = function() {
  $('tbody tr:even', this).removeClass('odd');
  $('tbody tr:odd', this).addClass('odd');
  return this;
};
$(document).ready(function() {
    $('table.sortable').tablesorter(
        {sortList: [[0,0], [1,0], [2,0]]});
    $('table.sortable').bind("sortEnd",function() {
        var $table = $(this);
        $table.alternateRowColors();
    });
});
</script>

this make all table class="sortable", sortable. but the table should be build with thead/tbody. So we need to modify  Operation/User.pm (see attached files). So update this file and restart apache. take care there's other User.pm and this one is a  7.26.

this add a class "odd" to all odd line in table, this could be useful in css to alternate color.



Replies

PreviousBackNext