Version 3 Requests #122

Mottie opened this Issue Aug 19, 2012 · 30 comments

8 participants


Tablesorter v3

I've been working with thezoggy on version 3 of the tablesorter
plugin and I'd like to get some feedback on what enhancements you would like to see. So far I have the
following, some of which have been added in version 2.4:

Version 2.4 additions:

  • Themes option.
  • New themes! Thanks to thezoggy!
  • Improved widget layout (added remove functions to every widget).
  • Modified uitheme widget to allow choosing between jQuery UI or Bootstrap themes (may be modified or removed in v3).
  • Filter widget improvements (but no quicksearch, yet).
  • Filter widget works with pager plugin.
  • Added "refreshWidgets" method which can remove un-used widget and re-initialized current widgets.

Version 3:

  • Core
    • Build your own tablesorter (choose themes/widgets/plugins; thanks to thezoggy) - issue #100.
    • Easier to use documentation with simple examples.
    • Enable/disable method - see issue #117.
    • Pull sort content from data attributes. See issue #154.
    • Reference a column by id or class name. See issue #237.
    • Change tablesorter-headerSortUp to tablesorter-headerAsc and tablesorter-headerSortDown to tablesorter-headerDesc - issue #173.
  • Widgets
    • Widget improvements
    • Improved widget layout again... plan to add a widget options section to every widget.
    • Faster filter widget
    • Quick search ( will be added to the filter widget ) - see issue #114.
    • More optional widgets - see #120 (static row), #178 (filter save widget).
    • Calculate footer totals; make this work with the filter widget as well - see issues #136 and #146.
    • Make Filter + Sticky Headers work together - see issue #249.
    • Toggle columns on/off widget.
  • Parsers
    • Include useful parsers - see #247 (iso8601) and #83 (dynamic checkbox) sorting.

Planned for future releases (no code written yet!):

  • Core

    • Support rowspan/colspan within the tbody.
    • Sort across tbodies - right now each tbody sorts separately - or use the static row widget? issue #120
  • Widgets

    • Move columns widget (maybe?).

I used this plugin and is awesome.

My Suggest:
Button to Export to Excel or CSV

To column move i use an its works great.


can easily add draggable to a table via jquery ui. about the export to excel/csv.. also really easy to add as well (table2CSV)..

jQuery.fn.table2CSV = function(options) {
    var options = jQuery.extend({
        separator: ',',
        header: [],
        delivery: 'file' // popup, value

    var csvData = [];
    var headerArr = [];
    var el = this;

    var numCols = options.header.length;
    var tmpRow = []; // construct header avalible array

    if (numCols > 0) {
        for (var i = 0; i < numCols; i++) {
            tmpRow[tmpRow.length] = formatData(options.header[i]);
    } else {
        $(el).filter(':visible').find('thead th').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());


    // actual data
    $(el).find('tr').each(function() {
        var tmpRow = [];
        $(this).filter(':visible').find('td').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
    if ( == 'popup') {
        var mydata = csvData.join('\n');
        return popup(mydata);
    } else {
        var mydata = csvData.join('\n');
        return save2file(mydata);

    function row2CSV(tmpRow) {
        var tmp = tmpRow.join('') // to remove any blank rows
        // alert(tmp);
        if (tmpRow.length > 0 && tmp != '') {
            var mystr = tmpRow.join(options.separator);
            csvData[csvData.length] = mystr;
    function formatData(input) {
        // replace " with “
        var regexp = new RegExp(/["]/g);
        var output = input.replace(regexp, "");

        //IMG ALT TEXT
        var regexp = new RegExp(/<img[^>]+alt\s*=\s*['"]([^'"]+)['"][^>]*>/i);
        var match = input.match(regexp);
        if(match != null) return '"' + match[1] + '"';

        var regexp = new RegExp(/\<[^\<]+\>/g);
        var output = output.replace(regexp, "");
        if (output == "") return '';
        return '"' + output + '"';
    function popup(data) {
        var generator ='', 'csv', 'height=600,width=800');
        generator.document.write('</head><body >');
        generator.document.write('<textArea cols=95 rows=35 wrap="off" >');
        return true;
    function save2file(data) {
        window.location='data:text/csv;charset=utf8,' + encodeURIComponent(data);
        return true;

Do you have please an example to column reorder with draggable to a table via jquery?



If there isn't already, would it be possible to save the pager size in saveSort or something similar to the way the Filter data is stored in

If there is a funcation that already does this, can someone point me in the right direction?



Hi @invisiblekid!

You can save the pager size by including the jquery.tablesorter.widget.js file with the code below. This is because the code needs the storage function.

    $('table').bind('pagerChange', function(){
        // save pager size
        $ this, 'tablesorter-pagesize', this.config.pager.size );

Hey Mottie, thank you for that.

I can now see the page size being changed/saved to Local Storage, but upon page reload the number is set back to 20. How I get the number that is stored?

Apologies if this is a bit of a noob question, I'm pretty new to JS.


Oh I'm sorry, I totally forgot about that!

You can just add this to the pager initialization code:

var $table = $('table');
        container: $(".pager"),
        size: $ $table[0], 'tablesorter-pagesize')
@Mottie Mottie referenced this issue Oct 16, 2012

Reset saveSort? #123


Hi Mottie, Thank you again.

I think am seeing an issue with the latest Pager script (from yeserday) - it appears to ignore size and always returns 10 (I have tried setting size in my PHP page (.tablesorterPager({container: $("#pager"), size: 20});) and in the tablesorter.pager.js script). I have commented out number of visable rows "size: 10" in pager.js, but this made no difference.

I reverted back to an older version of tablesorter.pager.js which acknowledged the size I had set manually in the .tablesorterPager options (not Local Storage), so don't think I have issues with my code.

Can you shed any light or could you possibly provide a full online working version so that I can see where I am going wrong?

Thank you!


Apologies! I have spotted my issue. I had a HTML select with a pre-selected value. All now appears to be working.


Great! :)


Hi Mottie,

I have the same issue as invisiblekid had. The size property does nothing. I picked "C:\Download\Mottie-tablesorter-v2.4.5-1-ga7f6c42\Mottie-tablesorter-a7f6c42\docs\example-pager.html" and changed size to "size: 20," and remove "selected="selected"". It still shows 10 per page. Can you please help?




Hi Mottie,

Another issue, I tried to persist page number with similar code. I put $, 'tablesorter-page', $("#dgReportList")[0]; on all events (pagerChange, pagerComplete, pagerInitialized, pageMoved). The issue is when I move to the first page, I can see is zero in the debugger, however, no events was fired, so page: $$("#dgReportList")[0], 'tablesorter-page') is still pointing to the wrong page.

And the wierd thing is that for 2nd, 3rd ... pages, events are fired properly and the table functions just fine.

Please help again!




Hi @JasonSLuo!

Ok, I fixed that problem... now any option with a selected="selected" will take priority over the size option. But the size option will now work properly. Thanks for the detailed explanation!


Hey again,

Is there, or could there be, an ability to have a column or row sum which updates when filters and/or a pager is applied?

I would love to have a dynamic sum which updates as & when filters are added with the option to either show the total sum (I can get this currently via PHP, but isn't dynamic) or the sum of the records displayed on that 'page'.

Although it's potentially out of the scope of this project, it is perhaps it's worth mentioning that at present my figures are in a monitory format (e.g. £100,000) so I would need either a way of removing all formatting before processing (I guess there is something like str_replace which exists in PHP?) or a way to calculate from a hidden column which holds values with no formatting. I would image there are many users with a similar requirement?




There is already a version 3 request for this, but in the meantime you can check out this example. It might help get you started. The only thing it doesn't do is work with the filter widget or pager addon.


Hi Mottie,

Thanks for the prompt response, for the page size issue you mentioned it is fixed. I tried it in IE 9, it does not work. IE just show all the rows without pagination. The testing case is still file:///C:/Download/Mottie-tablesorter-v2.4.5-1-ga7f6c42/Mottie-tablesorter-a7f6c42/docs/example-pager.html.

In firefox, it works. However, I have to get it worked in IE. Thanks.

In term of page number persistence in cookie mentioned in my previous email, it does not work for the first page, any idea? Thanks again!



Hi Mottie,

I just refreshed the same page, guess what, page size in IE 9 is working. I got it working before, then, not working, and working again. There is a wierd thing here. I even clean up my cache, cookie. I will keep testing. Thanks.



My local html file is working fine in IE, however when I put the same html page to IIS website, everything is working in IE9 except page size. The funny this is that my local html fie is not working on Firefox and it shows everything without pagination.

The html used for the testing is a simplified version of the example-pager.html. Here is my html.

<!DOCTYPE html>
 <meta charset="utf-8">
    <title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>

    <!-- jQuery -->
    <script src="C:\Projects\ODRS\Dev\ODRS 7.2\ODRSGUI\Scripts\jquery-1.8.2.js"></script>
    <script src="C:\Projects\ODRS\Dev\ODRS 7.2\ODRSGUI\Scripts\jquery-ui.min2.js"></script>
    <script src="C:\Projects\ODRS\Dev\ODRS 7.2\ODRSGUI\Scripts\jquery.tablesorter.js"></script>
    <script src="C:\Projects\ODRS\Dev\ODRS 7.2\ODRSGUI\Scripts\jquery.tablesorter.pagerUpdated.js"></script>

    <script id="js">$(function(){

    // **********************************
    //  Description of ALL pager options
    // **********************************
    var pagerOptions = {

        // target the pager markup - see the HTML block below
        container: $(".pager"),

        // Number of visible rows - default is 10
        size: 20



        // Initialize tablesorter
        // ***********************
            theme: 'blue',
            widthFixed: true,
            widgets: ['zebra']

        // initialize the pager plugin
        // ****************************

<table class="tablesorter">
 same as example...

<div class="pager">
    <img src="C:\Download\Mottie-tablesorter-v2.4.5-1-ga7f6c42\Mottie-tablesorter-a7f6c42\addons/pager/icons/first.png" class="first" alt="First" />
    <img src="C:\Download\Mottie-tablesorter-v2.4.5-1-ga7f6c42\Mottie-tablesorter-a7f6c42/addons/pager/icons/prev.png" class="prev" alt="Prev" />
    <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
    <img src="C:\Download\Mottie-tablesorter-v2.4.5-1-ga7f6c42\Mottie-tablesorter-a7f6c42/addons/pager/icons/next.png" class="next" alt="Next" />
    <img src="C:\Download\Mottie-tablesorter-v2.4.5-1-ga7f6c42\Mottie-tablesorter-a7f6c42/addons/pager/icons/last.png" class="last" alt="Last" />
    <select class="pagesize" title="Select page size">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
    <select class="gotoPage" title="Select page number"></select>

Hi JasonSLuo!

If you continue to have problems, could you please email me (gmail, user name is wowmotty) or open a new issue. This one is for version 3 requests and these follow up questions makes it hard to follow this thread.

Either way, it looks like it works for me in IE9, Firefox and Chrome. Try checking the console for any javascript errors.


Hi Mottie,

I just sent you an email. Thanks a lot!



it is already mentioned as separate issues, but I'll put it in the "version 3 feature request" as well: make widgets "filter" and "sticky headers" work together would be a feature I'll really would like to see...

thanks for the great plugin!


Depending on when version 3 comes out relative to Bootstrap 3, an update to the Bootstrap theme might be appropriate.


bootstrap 3 is a way off im afraid.. but yes there deff would need to be an update as bootstrap 2.x and 3.x are not interchangeable at all


Any idea on howto combine tablesorter-filter-row with hidden-phone on bootstrap? when adding that css, filter doesnt seem to work on layout for desktop, do I need to add smth in the regexp orso?


@therealtomas Hi! Instead of trying to add another class name to the filter row, just copy the hidden-phone media query like this:

@media (max-width: 767px) {
  .tablesorter-filter-row {
    display: none !important;

Thanks for quick response Mottie! Works like a charm! Any other idea also how to add a specific ID for a specific filter-row td? (I want to add a datepicker jquery for a date-filter-column) Thx.


Thx Mottie, yea ive beein tryin to use filter_formatter but slider doesnt wanna show, copied config, included cssstyles but nothin, just <input class="filter" type="hidden"><div id="range">, also any ways to use my own datepicker? or just have defaultDate instead of to-from, i saw that changed recently
Also sometimes the "search-sort" function in filterheaderrow stops working, ideas where to check for errors?


@therealtomas A demo of the problem would enable me to help you with the problem better.

To add a custom datepicker, or any element, check out the jQuery UI filter_formatter demo. The last accordion header ("Custom Filter Formatter Function Information") has details on how to add a custom element.

I have no idea what you mean by "search-sort" function.

Lastly, could we please continue this conversation via email (gmail, user name is wowmotty) instead of spamming the version 3 feature request issue thread?


@Mottie Mottie modified the milestone: Abelt Jan 20, 2015
@Mottie Mottie added the Epic label Apr 4, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment