How to use

Don't forget to add in the HTML. link rel="stylesheet" media="screen" href="/mootools/table-sorter/table-sorter.css" script type="text/javascript" src="/js/mootools1-2.js"/script script type="text/javascript" src="/mootools/table-sorter/table-sorter.js"/script

Create the object after including table-sorter.js in HTML source document

            sorter = new TableSorter({
                    request: 'action', 
                    action: 'returnGeoHtmlTableStr', 
                    destination: 'XhrDump', 
                    prev: 'PagePrev', 
                    next: 'PageNext', 
                    head: 'GeoHead',
                    rows: 100,
                    startWait: "",
                    endWait: ""
            });

Demo: http://cnizz.com/mootools/table-sorter/ Doc: http://blog.cnizz.com/tag/mootools-table-sorter/

request - this is the name of the GET variable (ie. $_GET['action']) that your server-side code will look for. action - this is the value of your request (if your request is called action, then $_GET['action'] == 'returnGeoHTMLTableStr') destination - this is the destination ID of the element in the DOM (your HTML code) where the string will be inserted. prev / next - you should not need to change these. The class adds events to the Prev and Next elements. Do not change unless there is a name collission. head - this is the name of the head of your head element in the table. Where all your TH tags are set. This is important, the class looks at these to create events. rows - how many rows per page? startWait / startEnd - optional javascript functions that should be called before and after execution of a sort.

Check out the demo http://cnizz.com/mootools/table-sorter/ it is important to use the TableSorter.class.php file. This will show you how to implement the server-side code. Anyother questions please go to cnizz.com

Demo: http://cnizz.com/mootools/table-sorter/ Doc: http://blog.cnizz.com/tag/mootools-table-sorter/

======= sorter = new TableSorter({ request: 'action', action: 'returnGeoHtmlTableStr', destination: 'XhrDump', prev: 'PagePrev', next: 'PageNext', head: 'GeoHead', rows: 100, startWait: "", endWait: "" });

Lets explain this line by line.

1. request: 'action', This is how you name the GET parameter. So in this instance the GET looks like $_GET['action']
2. action: 'returnGeoHtmlTableStr', This is the value of GET parameter defined in step 1, so $_GET['action'] = 'returnGeoHtmlTableStr'
3. destination: 'XhrDump', This is the element id where TableSorter will write results too
4. prev: 'PagePrev', This is the element that the class will listen on for Previous Page requests.
5. next: 'PageNext', Same as above except it goes to the next page when this element is clicked
6. head: 'GeoHead', This tells the class where to look for all those TH tags, which it uses to do sorts on if a Title is defined on the TH tag.
7. rows: 100, How many rows should the request return.
8. page: location.href, Where to send the GET request
9. method: 'get', The type of method (GET or POST). By default the method is get, but you can change it to post.

Other cool stuff you can do

You can add additional parameters to the GET request in the form of parameter name => parameter value.

sorter.addParameter('zipcode','84101');

You can remove these user-defined parameters by calling removeAllParameters.

sorter.removeAllParameters();

You can remove a specific parameter by calling removeParameter.

sorter.removeParameter('zipcode');

You can initiate a sort anytime you want by calling sort.

sorter.sort();

I've also included some PHP code to help out.

PHP Setup

You'll want to use the TableSorter php class I included to make things easy one you.

include_once 'TableSorter.class.php';

Server Side First

Notice setting the table headers is important. For instance when a user clicks on city the TableSorter will send the ORDER BY stored in the TH Title. This is how your server side code will know what to order by. Reply to this post if you have any questions on the server-side PHP code.

function returnGeoHtmlTableStr($whereClause='',$startingFromRecord=0,$rowsPerPage=100,$orderBy='city ASC')
{
    mysql_connect('localhost','user','password','database');
    mysql_select_db('database');

    $startingFromRecord = (int) $startingFromRecord;
    $rowsPerPage = (int) $rowsPerPage;

    $sql = "SELECT 
                count(*) as count 
            FROM 
                cnizz_geo 

            $whereClause

            ";
    $result = mysql_query($sql);
    $countArr = mysql_fetch_assoc($result);
    $totalRows = $countArr['count'];

    if($orderBy==''){
        $orderBy='city ASC';
    }

    $sql = "SELECT SQL_CALC_FOUND_ROWS
                * 
            FROM 
                cnizz_geo 

            $whereClause

            ORDER BY 
                $orderBy
            LIMIT 
                $startingFromRecord,$rowsPerPage
            ";
    $result = mysql_query($sql);
    $arr = array();
    while($row=mysql_fetch_assoc($result)){
        $arr[]=$row;
    }

    $sql = "SELECT FOUND_ROWS() as totalRows";
    $result = mysql_query($sql);
    $foundArr=mysql_fetch_assoc($result);

    $str = '
        <table class="DefaultTable" style="width:500px;">
        '.TableSorter::returnMetaStr($startingFromRecord,$rowsPerPage,$foundArr['totalRows'],count($arr),$orderBy).'
        <tr style="background:#FFF;"><td colspan="10" style="height:5px;">&nbsp;</td></tr>
        <tr id="GeoHead" class="DefaultTableHeader">
            <th id="City" title="'.(($orderBy=='city ASC')?'city DESC':'city ASC').'">City</th>
            <th id="State" title="'.(($orderBy=='state ASC')?'state DESC':'state ASC').'">State</th>
            <th id="Abbrev" title="'.(($orderBy=='state_abbrev ASC')?'state_abbrev DESC':'state_abbrev ASC').'">State</th>
            <th id="County" title="'.(($orderBy=='county ASC')?'county DESC':'county ASC').'">County</th>
        </tr>
        ';
    $x=1;

    foreach($arr as $i)
    {
        if($x%2){
            $class='';
        }
        else{
            $class='zebra';
        }
        $str.= '<tr class="'.$class.'">
                            <td><a id="'.$i['city'].'" title="'.stripslashes($i['city_id']).'">'.stripslashes($i['city']).'</a></td>
                            <td>'.$i['state'].'</td>
                            <td>'.$i['state_abbrev'].'</td>
                            <td>'.$i['county'].'</td>
                        </tr>';
        $x++;
    }

    $str.= '<tr style="background:#FFF;"><td colspan="10" style="height:5px;">&nbsp;</td></tr>';
    $str.=$meta.'</table>';
    return $str;
}

Your Server Side Controller

if($_GET['action']=='returnGeoHtmlTableStr'){
    die(returnGeoHtmlTableStr('',$_GET['start'],$_GET['rows'],$_GET['orderBy']));
}

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.