Version 3 Requests #122
Comments
|
I used this plugin and is awesome. My Suggest: To column move i use http://code.google.com/p/dragtable/ 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
},
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;
}
}; |
|
Do you have please an example to column reorder with draggable to a table via jquery? |
|
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 |
|
Hi @invisiblekid! You can save the pager size by including the $(function(){
$('table').bind('pagerChange', function(){
// save pager size
$.tablesorter.storage( 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');
$table
.tablesorter()
.tablesorterPager({
container: $(".pager"),
size: $.tablesorter.storage( $table[0], 'tablesorter-pagesize')
}); |
|
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? Thanks. Jason |
|
Hi Mottie, Another issue, I tried to persist page number with similar code. I put 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 |
|
Hi @JasonSLuo! Ok, I fixed that problem... now any option with a |
|
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, |
|
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. |
|
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 |
|
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 |
|
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> |
|
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! Jason |
|
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 @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. |
|
@therealtomas Did you try using the |
|
Thx Mottie, yea ive beein tryin to use filter_formatter but slider doesnt wanna show, copied config, included cssstyles but nothin, just |
|
@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! |
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:
Version 3:
Changetablesorter-headerSortUptotablesorter-headerAscandtablesorter-headerSortDowntotablesorter-headerDesc- issue Usage of tablesorter-headerSortDown, tablesorter-headerSortUp aren't matching documentation #173.widget - static row #120 (static row),filter save widget #178 (filter save widget).Planned for future releases (no code written yet!):
The text was updated successfully, but these errors were encountered: