hello,
I've been looking at a to give the users of my site the option to sort the toptopic by either number of replies or number of visits.
and i found table sorter
http://tablesorter.com/docs/#Configuration
but my problem is that it won't sort the table for me, on the web page i can see it being initiated but it isn't sorting the table
here is a copy of the code (the table is right at the bottom)
I've also attached a copy of the jquery
<?php
require_once('scripts/SSI-link.php');
$context['page_title_html_safe'] = '';
if (empty($context['html_headers']))
$context['html_headers'] = '';
template_header();
//votre code vas ici sous format html
echo '
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/placeholder-image-wide.png" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="images/placeholder-image-wide.png" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="col-md-6 col-xs-12">
<a class="twitter-timeline" href="https://twitter.com/MDLPalissy" data-widget-id="706827167091576833" width="100%">Tweets de @MDLPalissy</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>';
$rec = ssi_recentTopics(10, NULL, NULL,'array');
$pop = ssi_topTopicsReplies(10, 'array');
echo '
<div class="col-md-6 col-xs-12">
<table class="table_list">
<tbody class="header">
<tr>
<td colspan="4">
<div class="cat_bar">
<h3 class="catbg">
',$txt['recent_posts'],'
</h3>
</div>
</td>
</tr>
</tbody>
<tbody class="content">
<tr class="windowbg4">
';
foreach ($rec as $recent)
{
echo '
<tr class="windowbg4">
<td class="icon" style="height:40px;">
</td>
<td class="info">';
echo '
<a class="subject" href="', $recent['board']['href'], '">', $recent['board']['name'], '</a>';
echo'
<p><a href="', $recent['href'], '">', $recent['link'],'</a> ', $txt['by'];
echo'
<a href="', $recent['poster']['href'],'">', $recent['poster']['name'],'</a> </p>
</td>
<td class="date">
<p>',$recent['time'],'</p>
</td>
<td class="icon lastpost-1">
<a href="', $recent['href'], '"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], '/icons/last_post.gif" alt="', $txt['latest_post'], '" title="', $txt['latest_post'], '" /></a>
</td>
</tr>';
}
echo '
</tr>
</tbody>
<tbody class="divider">
<tr>
<td colspan="4"></td>
</tr>
</tbody>
<tbody class="divider">
<tr>
<td colspan="4"></td>
</tr>
</tbody>
</table>
<table class="table_list tablesorter" id="tablesort">
<thead class="header">
<tr>
<th class="th-home" colspan="2">
<div class="cat_bar-home-l">
<h3 class="catbg">
',$txt['recent_posts'],'
</h3>
</div>
</th>
<th class="th-home">
<div class="cat_bar-home">
<h3 class="catbg Sort">
',$txt['views'],'
</h3>
</div>
</th>
<th class="th-home">
<div class="cat_bar-home">
<h3 class="catbg Sort">
',$txt['replies'],'
</h3>
</div>
</th>
<th class="th-home">
<div class="cat_bar-home-r">
<h3 class="catbg">
</h3>
</div>
</th>
</tr>
</thead>
<tbody class="content">
<tr class="windowbg4">
';
foreach ($pop as $popu)
{
echo '
<tr class="windowbg4">
<td class="icon" style="height:40px;">
</td>
<td class="info">
<a class="subject" href="', $popu['href'],'">', $popu['subject'], '</a>
</td>
<td class="date">
<p>',$popu['num_views'],'</p>
</td>
<td class="date">
<p>',$popu['num_replies'],'</p>
</td>
<td class="icon lastpost-1">
<a href="', $popu['href'], '"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], '/icons/last_post.gif" alt="', $txt['latest_post'], '" title="', $txt['latest_post'], '" /></a>
</td>
</tr>';
}
echo '
</tr>
</tbody>
</table>
<script src="scripts/jquery-1.12.0.min.js"></script>
<script src="scripts/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(function() {
$("#tablesort").tablesorter();
});
</script>
</div>';
template_footer() ;
?>
could it due to the fact that I'm out putting an array ?
how could i possibly sort this table
here is a link to the web page (its the second table)
http://beta.mdl-palissy.fr/
You created only simple table sorter interface. According to table sorter docs you need to do something like this:
* @example $('table').tablesorter({ sortList : [ [ 0,0 ] , [ 1, 0 ] ] });
* @desc Create a tablesorter interface and sort on the first and secound column column headers.
Quote from: yaax on July 16, 2016, 06:32:59 PM
You created only simple table sorter interface. According to table sorter docs you need to do something like this:
* @example $('table').tablesorter({ sortList : [ [ 0,0 ] , [ 1, 0 ] ] });
* @desc Create a tablesorter interface and sort on the first and secound column column headers.
no that is only for if i want to sort certain collums, but now i just want to get it working on the whole table
here is the error i keep on geting every time i click on header to insiate the sorting
jquery.tablesorter.js:614 Uncaught Type
Error: Cannot read property 'type' of undefined