search

Mottie / tablesorter

Github fork of Christian Bach's tablesorter plugin + awesomeness ~
https://mottie.github.io/tablesorter/docs/
2.61k stars 754 forks source link

Version 3 Requests #122

Open Mottie opened 12 years ago

Mottie commented 12 years ago

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:

jonasscalar commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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

Mottie commented 12 years ago

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

invisiblekid commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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

Mottie commented 12 years ago

Great! :)

JasonSLuo commented 11 years ago

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 commented 11 years ago

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

Mottie commented 11 years ago

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!

invisiblekid commented 11 years ago

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?

Thanks, IK

Mottie commented 11 years ago

Hiya!

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.

JasonSLuo commented 11 years ago

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!

Jason

JasonSLuo commented 11 years ago

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.

Jason

JasonSLuo commented 11 years ago

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>
<html>
<head>
 <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

    };

    $("table")

        // Initialize tablesorter
        // ***********************
        .tablesorter({
            theme: 'blue',
            widthFixed: true,
            widgets: ['zebra']
        })

        // initialize the pager plugin
        // ****************************
        .tablesorterPager(pagerOptions);

});</script>
</head>
<table class="tablesorter">
 same as example...
</table>

<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>
    <select class="gotoPage" title="Select page number"></select>
</div>
Mottie commented 11 years ago

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.

JasonSLuo commented 11 years ago

Hi Mottie,

I just sent you an email. Thanks a lot!

Jason

moving-bits commented 11 years ago

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!

Astrophizz commented 11 years ago

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

thezoggy commented 11 years ago

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

ghost commented 11 years ago

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?

Mottie commented 11 years ago

@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;
  }
}
ghost commented 11 years ago

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.

Mottie commented 11 years ago

@therealtomas Did you try using the filter_formatter widget option?

ghost commented 11 years ago

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?

Mottie commented 11 years ago

@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?

Thanks!