MindTouch Community Portal
Logged in: Logged in as: Log in
Register
Search:
Page last modified 07:00, 26 Aug 2009 by neilw
Template:BUG TsTable >
Page Notifications Off

Template:BUG TsTable

    Table of contents
    No headers
    // THIS VERSION SOLELY INTENDED TO REPRODUCE BUG 6985 (http://bugs.developer.mindtouch.com/view.php?id=6985)
// I have stripped out anything that I could to expose the problem as visibly as possible

//This template requires the following files to be installed as specified below:
var tablesorter_uri      = "http://developer.mindtouch.com/@api/deki/files/4625/=jquery.tablesorter.min.js";
var tablesorter_bg_uri   = "http://developer.mindtouch.com/@api/deki/files/4627/=tablesorter_bg.gif";
var tablesorter_asc_uri  = "http://developer.mindtouch.com/@api/deki/files/4626/=tablesorter_asc.gif";
var tablesorter_desc_uri = "http://developer.mindtouch.com/@api/deki/files/4624/=tablesorter_desc.gif";

var pager_uri            = "http://developer.mindtouch.com/@api/deki/files/4651/=jquery.tablesorter.pager.js";
var pager_first_uri      = "http://developer.mindtouch.com/@api/deki/files/4648/=pager_first.png";
var pager_prev_uri       = "http://developer.mindtouch.com/@api/deki/files/4647/=pager_prev.png";
var pager_next_uri       = "http://developer.mindtouch.com/@api/deki/files/4650/=pager_next.png";
var pager_last_uri       = "http://developer.mindtouch.com/@api/deki/files/4649/=pager_last.png";

// The following variables define important styles for this template:
var thead_unsel_color = "#D0E0E0";  // Color of unselected header cell
var thead_sel_color   = "#8DBDD8";  // Color of selected header cell
var zebra_color       = "#ECECF0";  // Color of odd rows when "zebra" is specified

var perpage = [ 10 ];
var tname = @tname;
var pager = true;

//
// Output XML
//
<html>
// Scripts and stylesheets go in the head
<head>
<script type="text/javascript" src=(tablesorter_uri)></script>;
<script type="text/javascript" src=(pager_uri)></script>; // THIS NEVER GETS LOADED

<script type="text/javascript">"
// Call main tablesorter function
DekiWiki.$(document).ready(function($) {
    tstableApply($, false, false,"..json.emit(@id)..","..json.emit(tname)..",{},[],[],[],true);
});
"</script>;
<script type="text/javascript">"
// Apply tablesorter to table
function tstableApply($, apply, find, id, name, headers, sortlist, widgets, filter, pager) {
// Find the table
    var $table;
    if (!find)
        $table = $('table#'+name);
    else {
        var pid = 'p#' + id;
        var $nodes = $(pid).nextAll();
        for (var i = 0; i < $nodes.length; i++) {
            $table = $nodes.eq(i);
            if ($table.is('table')) break;
            $table = $table.find('table:first');
            if ($table.length) break;
        }
    }
// Make sure we found it
    if (!$table.length) {
	alert(\"ERROR: TsTable: can't find table\"); 
	return;
    }
    if (find) $table.attr('id',name);
// set 'tablesorter' class if necessary
    if (!$table.hasClass('tablesorter')) $table.addClass('tablesorter');
// Copy header row to 'thead' element if necessary
    var $header = $table.find('thead tr');
    if (!$header.length) {
        var $ohr = $table.find('tr:eq(0)');
        if (!$ohr.length) return;	// table is empty, bail out
        $table.prepend('<thead><tr>'+$ohr.html()+'</tr></thead>');
        $ohr.remove();
        $header = $table.find('thead tr');
    }
// Convert header <td> to <th> if necessary
    if (apply) {
        var hdrhtml = '';
        $header.children().each(function() { hdrhtml += '<th>'+$(this).html()+'</th>'; });
        $header.html(hdrhtml);
    }
// Convert format of each header element to reserve room for arrow
    $header.children().each(function() {
        $(this).html('<table><tr><td>'+$(this).html()+'</td><td style=\"width:16px\"/></tr></table>');
    });
// Clean up leading and trailing space
    $table.find('td,th').each(function() {
        var html = $(this).html();
        html = html.replace(/^(\\s*(\\&nbsp;)*(\\<br ?\\/?\\>)*)*/,'');
        html = html.replace( /(\\s*(\\&nbsp;)*(\\<br ?\\/?\\>)*)*$/,'');
        $(this).html(html);
    });
// Install filter
    if (filter.length > 0) {
        var selectid = 'select#tsf' + id;
        $(selectid).change(function() {
            var $options = $(this).find('option:selected');
            $table.find('tbody.tsf > tr').each(function() {
                var show = false;
                var $row = $(this);
                $options.each(function() { show |= $row.hasClass($(this).attr('value')); } );
                if (show)    $row.show();
                else         $row.hide();
            });
            $table.trigger('applyWidgets');
            return(false);
        });
        $(selectid).find('option').each(function(i) { $(this).attr('selected',i==0?'selected':''); });
        $(selectid).change();
    }
// Now activate tablesorter
    $table.tablesorter({ 
        headers: headers, sortList: sortlist, widgets: widgets,
        cssHeader: 'tsHeader', cssAsc: 'tsHeaderSortUp', cssDesc: 'tsHeaderSortDown'
    });
    if (pager) {
        var pagerid = '#'+id+'pager';
        $(pagerid).find('option').each(function(i) { $(this).attr('selected',i==0?'selected':''); });
        $table.tablesorterPager({container: $('#'+id+'pager'), positionFixed:false});
    }
}
"</script>
</head>

// Generate table HTML in the body
<body>
 <table border="1" class="tablesorter" id=(tname) cellpadding="3px" cellspacing="1px">
  <thead><tr> <th> "This is a header!" </th> </tr></thead>;
  <tbody><tr> <td> "This is data!" </td></tr></tbody>
  <tfoot style=(20 > perpage[0] ? "" : "display:none")>
        <tr bgcolor=(thead_unsel_color)><td id=(@id .. "pager") align="center">
            <img class="first" style="cursor:pointer" src=(pager_first_uri) />
            <img class="prev" style="cursor:pointer" src=(pager_prev_uri) />
            <img src="/skins/common/icons/icon-trans.gif" width="8" height="8" />
            <span class="pagedisplay"> " " </span>
            <img src="/skins/common/icons/icon-trans.gif" width="8" height="8" />
            <img class="next" style="cursor:pointer" src=(pager_next_uri) />
            <img class="last" style="cursor:pointer" src=(pager_last_uri) />
            <select class="pagesize" style="float:right">
              foreach (var pp in perpage) {
                  <option value=(pp) selected=(__index == 0 ? "selected" : "")> (pp>0 ? "all":pp) </option>;
                  if (pp > 0) break;
              }
	    </select>
         </td></tr>
  </tfoot>;
 </table>;
</body>
</html>;
    Tag page
    What links here

    Files 0

    Attach file or image
     
    You must login to post a comment.
    MindTouch Social Knowledge Base

    Copyright © 2011 MindTouch, Inc. Powered by