Mottie
commented
10 years ago Hi @gianluis!
If you look on the Home wiki page under "Widgets > Other", you'll see three demos labeled "Automatic Row numbering". Choose the one that fits your need.
The checkbox code was written to be use along with the "stickyHeaders" widget, but since you're not using it, you can remove part of the code that is causing an error. Also, tablesorter is initialized four times in the code, and the checkbox parser was not set to the correct column. Here is the corrected code (replace ALL of the code on the page with the following; demo):
<script>
// checkbox parser
$.tablesorter.addParser({
id: 'checkbox',
is: function (s) {
return false;
},
format: function (s, table, cell) {
var $c = $(cell).find('input');
console.log($c.is(':checked'));
return $c.length ? $c.is(':checked') ? 1 : 2 : s;
},
type: 'numeric'
});
// add custom numbering widget
$.tablesorter.addWidget({
id: "numbering",
format: function(table) {
var c = table.config;
$("tr:visible", table.tBodies[0]).each(function(i) {
$(this).find('td').eq(0).text(i + 1);
});
}
});
$(window).load(function () {
var $table = $('.tablesorter'),
c = $table[0].config,
wo = c.widgetOptions,
doChecky = function (c, col) {
$table.children('tbody')
.find('tr td:nth-child(' + (parseInt(col, 10) + 1) + ') input')
.each(function () {
this.checked = c;
$(this).trigger('change');
});
};
// using .on() which requires jQuery 1.7+
$table.children('tbody')
.on('change', 'input', function () {
$(this).closest('tr').toggleClass('checked', this.checked);
$(this).trigger('updateCell', [$(this).closest('td'), true]); // true = resort
// if a server side database needs to be updated, do it here
})
.end()
.find('thead input')
// Click on checkbox in table header to toggle all inputs
.on('change', function () {
var c = this.checked,
col = $(this).closest('th').attr('data-column');
doChecky(c, col);
})
.on('mouseup', function () {
return false;
});
});
$(function () {
var $table = $('.tablesorter').tablesorter({ debug: true,
theme: 'blue',
widgets: ["zebra", "filter", "numbering"],
widgetOptions: {
// filter_anyMatch replaced! Instead use the filter_external option
// Set to use a jQuery selector (or jQuery object) pointing to the
// external filter (column specific or any match)
filter_external: '.search',
// include column filters
filter_columnFilters: true,
filter_placeholder: {
search: 'Cerca...'
},
filter_saveFilters: true,
filter_reset: '.reset'
}
});
});
</script>and include this css:
.tablesorter-filter.disabled {
display: none;
}Then make sure to set the checkbox column sorter-class, and add an extra column on the left for the numbering:
<table class="tablesorter">
<thead>
<tr>
<td data-sorter="false" class="odd1" height="60px" colspan="13">
<font face="verdana" size="4">Articoli in rete sul caso XXX</font>
<br>
<hr width="45%">
<input class="search" value="ciao" size="47" type="search" data-column="all" title="cerca nella tabella" />
<button type="button" class="reset">cancella dati</button>
<div STYLE="position:absolute; top: 3px; left: 7px; z-index:3; text-align:left">Webmaster <a href="#" target="_new">Peter Panda</a></div>
<div STYLE="position:absolute; top: 50px; left: 7px; z-index:3; text-align:left">per segnalazioni: <a href="mailto:#">mail di prova</a></div>
<div STYLE="position:absolute; top: 3px; right: 7px; z-index:194px; text-align:left"><a href="newsletter/newsletter.html">Newsletter</a></div>
<div STYLE="position:absolute; top: 50px; right: 7px; z-index:3">ultimo aggiornamento: 08/06/2014</div>
</td>
</tr>
<tr>
<th data-sorter="false" colspan="13" class="odd2"></th>
</tr>
<tr>
<th class="sorter-false filter-false">
<div id="modulo0">#</div>
</th>
<th class="sorter-shortDate dateFormat-ddmmyyyy">
<div id="modulo1">Data</div>
</th>
<th class="filter-select">
<div id="modulo2">Decennio</div>
</th>
<th class="filter-select">
<div id="modulo3">Fonte</div>
</th>
<th class="filter-select">
<div id="modulo4">Autore</div>
</th>
<th>
<div id="modulo5">Titolo</div>
</th>
<th class="filter-false sorter-false">
<div id="modulo6">Link</div>
</th>
<th class="filter-select">
<div id="modulo7">Formato</div>
</th>
<th class="filter-select">
<div id="modulo8">Soggetto 1</div>
</th>
<th class="filter-select">
<div id="modulo9">Soggetto 2</div>
</th>
<th class="filter-select">
<div id="modulo10">Luogo</div>
</th>
<th class="sorter-checkbox filter-false sorter-true">
<div id="modulo11">
<input type="checkbox" />
</div>
</th>
<th class="filter-false sorter-false">
<div id="modulo12">File</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>20-11-2009</td>
<td>2000/2009</td>
<td>a1</td>
<td>senza firma</td>
<td class="bold1"><I>a</I></td>
<td><a href="#" target="_new">Link</a></td>
<td>testo</td>
<td>123</td>
<td>555</td>
<td>698</td>
<td><input type="checkbox"></td>
<td><img src="icons/pdf.png"></a></td>
</tr>
<tr>
<td></td>
<td>23-11-2009</td>
<td>2000/2009</td>
<td>a6</td>
<td>senza firma</td>
<td class="bold1"><I>a</I></td>
<td><a href="#" target="_new">Link</a></td>
<td>testo</td>
<td>1243</td>
<td>5545</td>
<td>6298</td>
<td><input type="checkbox"></td>
<td><img src="icons/pdf.png"></a></td>
</tr>
<tr>
<td></td>
<td>21-11-2009</td>
<td>2000/2009</td>
<td>a5</td>
<td>senza firma</td>
<td class="bold1"><I>a</I></td>
<td><a href="#" target="_new">Link</a></td>
<td>testo</td>
<td>1235</td>
<td>5055</td>
<td>6398</td>
<td><input type="checkbox"></td>
<td><img src="icons/pdf.png"></a></td>
</tr>
<tr>
<td></td>
<td>29-11-2009</td>
<td>2000/2009</td>
<td>a3</td>
<td>senza firma</td>
<td class="bold1"><I>a</I></td>
<td><a href="#" target="_new">Link</a></td>
<td>testo</td>
<td>1423</td>
<td>4555</td>
<td>6984</td>
<td><input type="checkbox"></td>
<td><img src="icons/pdf.png"></a></td>
</tr>
<tr>
<td></td>
<td>19-11-2009</td>
<td>2000/2009</td>
<td>a4</td>
<td>senza firma</td>
<td class="bold1"><I>a</I></td>
<td><a href="#" target="_new">Link</a></td>
<td>testo</td>
<td>1231</td>
<td>9555</td>
<td>2698</td>
<td><input type="checkbox"></td>
<td><img src="icons/pdf.png"></a></td>
</tr>
<tr>
<td></td>
<td>20-11-2009</td>
<td>2000/2009</td>
<td>a2</td>
<td>senza firma</td>
<td class="bold1"><I>a</I></td>
<td><a href="#" target="_new">Link</a></td>
<td>testo</td>
<td>1230</td>
<td>3555</td>
<td>6918</td>
<td><input type="checkbox"></td>
<td><img src="icons/pdf.png"></a></td>
</tr>
</tbody>
<tfoot>
<tr><td data-sorter="false" colspan="13" class="odd2"></td></tr>
<tr>
<td data-sorter="false" colspan="13" class="odd3">
Questo sito non ha fini di lucro e non rappresenta una testata giornalistica
in quanto viene aggiornato senza alcuna periodicità.
Non può pertanto considerarsi un prodotto editoriale ai sensi della legge n. 62 del 07/03/2001.
Il sito contiene links ad altri siti tratti da internet e, pertanto, considerati di pubblico dominio;
qualora la loro pubblicazione violasse eventuali diritti d'autore, vogliate comunicarlo via email.
L'autore non è responsabile della privacy, correttezza ed aspetti legali dei siti di approdo.
Disclaimer: tutti gli articoli contenuti appartengono ai rispettivi proprietari ed editori.
L'autore non si assume alcuna responsabilità per il loro contenuto e la loro legittimità.
</td>
</tr>
</tfoot>
</table>
gianluis
Hello Mottie, I'm writing to ask you how you have to set two parameters:
a) how can I to have a column on the left of the table which contains a "row number" for each row (so the first row is "1", the second "2" and so on) which is not reordered when the table is sorted, like it's presented in this web-page: http://www.kryogenix.org/code/browser/sorttable/#totalsrows (you can find it in the section Adding a "left-hand-header" column) this code work well, but the width of the column, that you create on the left, is not editable; even through css and the tag with "width: xx px" ... it exists in your tablesorter an alternative?
b) i try to use Dynamic checkbox sorting (http://jsfiddle.net/Mottie/abkNM/2890/) on my web page http://imperoromano2012.altervista.org/, but although i select the boxs, i can not rearrange or reorder them ... why? where I'm wrong?
I hope you can help me, and for that I thank you in advance for your trouble ...
thank Gian Luis