Version 3 Requests

[Mottie]

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 jshint - build #100.
  • Easier to use documentation with simple examples.
  • Enable/disable method - see issue Add enable/disable method #117.
  • Pull sort content from data attributes. See issue Add Support for Sorting on a Row Attribute #154.
  • Reference a column by id or class name. See issue Reference a column by id or class name #237.
  • Change tablesorter-headerSortUp to tablesorter-headerAsc and tablesorter-headerSortDown to tablesorter-headerDesc - issue Usage of tablesorter-headerSortDown, tablesorter-headerSortUp aren't matching documentation #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 Filter - table wide #114.
  • More optional widgets - see widget - static row #120 (static row), filter save widget #178 (filter save widget).
  • Calculate footer totals; make this work with the filter widget as well - see issues footer line with totals. #136 and Remembering Filtered data #146.
  • Make Filter + Sticky Headers work together - see issue stickyHeader and Filter - not working well together? #249.
  • Toggle columns on/off widget.
• Parsers
  • Include useful parsers - see isoDate parser cannot cope with ISO-8601 combined dates and times #247 (iso8601) and Wierd sorting in "Dynamic checkbox sorting" + "stickyHeaders" widget #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 widget - static row #120
• Widgets
  • Move columns widget (maybe?).

[jonasscalar]

I used this plugin and is awesome.

My Suggest:
Button to Export to Excel or CSV

To column move i use http://code.google.com/p/dragtable/ an its works great.

[thezoggy]

can easily add draggable to a table via jquery ui. about the export to excel/csv.. also really easy to add as well (table2CSV)..
http://www.kunalbabre.com/projects/table2CSV.php

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

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

    //header
    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());
        });
    }

    row2CSV(tmpRow);

    // 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());
        });
        row2CSV(tmpRow);
    });
    if (options.delivery == '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] + '"';

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

[jonasscalar]

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

[Mottie]

@jonasscalar http://datatables.net/extras/colreorder/

[invisiblekid]

Hey,

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 tablesorter.storage?

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

Thanks

[Mottie]

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.

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

[invisiblekid]

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.

[Mottie]

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

You can just add this to the pager initialization code:

var $table = $('table');
$table
    .tablesorter()
    .tablesorterPager({
        container: $(".pager"),
        size: $.tablesorter.storage( $table[0], 'tablesorter-pagesize')
    });

[invisiblekid]

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!

[invisiblekid]

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

[Mottie]

Great! :)

[JasonSLuo]

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?

Thanks.

Jason

[JasonSLuo]

Hi Mottie,

Another issue, I tried to persist page number with similar code. I put $.tablesorter.storage(this, 'tablesorter-page', $("#dgReportList")[0].config.pager.page); on all events (pagerChange, pagerComplete, pagerInitialized, pageMoved). The issue is when I move to the first page, I can see config.pager.page is zero in the debugger, however, no events was fired, so page: $.tablesorter.storage($("#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!

Thanks.

Jason