Ask your WordPress questions! Pay money and get answers fast! (more info)

Javascript / jquery problem #2 WordPress

  • SOLVED

Hi,

I am trying to build a table with a tablefilter in wordpress. Last time i posted my question there was the solution:

http://pastebin.com/zzsuziYR

But now I am using a different way to get the table sorted (csv to sorttable plugin).

Everything worked fine on my "test"site:
Removed at request of asker
http://XXXXXXXXXXXXXXXXX

But on another site there are the problems again.
Removed at request of asker
http://XXXXXXXXXXXXXXXXX

The filter works but you can not sort the table - without the code for the filter you can sort the table.

I got no problems with html but javascript etc. is a big problem for me.. - does anyone got an idea?

Removed at request of asker
http://XXXXXXXXXXXXXXXXX

Thank you all and sorry for my bad english :)

Answers (2)

2013-03-28

Nicat Asadov answers:

Please write write this code
jQuery(".sorttable_numeric").live("click",function(){
sorttable.innerSortFunction.apply(jQuery(this), [])
});


Nicat Asadov comments:

Or sent me your ftp ,i'll fix it asap


Kalumpi comments:

I am quite a newb when it comes to javascript/jquery. So plz forgive me this question :)

Where do I have to add it?

I tried to add it to [[LINK href="http://pastebin.com/SHukYscP"]]http://pastebin.com/SHukYscP[[/LINK]] in various ways but it does not work.


Nicat Asadov comments:

Add it after 37th line
Or just copy it
<script type='text/javascript' src='http://www.webspace-finden.de/wp-content/plugins/filtab/picnet.table.filter.min.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function($) {
// Initialise Plugin
var options1 = {
clearFiltersControls: [$('#cleanfilters')],
matchingRow: function(state, tr, textTokens) {
if (!state || !state.id) {
return true;
}
var child = tr.children('td:eq(2)');
if (!child) return true;
var val = child.text();
switch (state.id) {
default:
return true;
}
}
};
$('#pdtabx').tableFilter(options1);
var grid2 = $('#pdtabx');
var options2 = {
filteringRows: function(filterStates) {
grid2.addClass('filtering');
},
filteredRows: function(filterStates) {
grid2.removeClass('filtering');
setRowCountOnGrid2();
}
};
function setRowCountOnGrid2() {
var rowcount = grid2.find('tbody tr:not(:hidden)').length;
$('#rowcount').text('(Rows ' + rowcount + ')');
}
grid2.tableFilter(options2); // No additional filters
setRowCountOnGrid2();
});
jQuery(".sorttable_numeric").live("click",function(){
sorttable.innerSortFunction.apply(jQuery(this), [])
});
</script>


Kalumpi comments:

unfortunately it does not work :(


Nicat Asadov comments:

could you give access to your ftp?i'll fix it asap


Nicat Asadov comments:

my email is <strong> nicat.esedov@gmail.com</strong>


Kalumpi comments:

There are only 3 files which could cause the conflict

picnet.table.filter.min.js (filter)
csv2sorttable.php (sorter)
sorttable.js (sorter)

I could provide all files if it will help - but I don't like giving access to ftp if that is alright for you.


Kalumpi comments:

picnet.table.filter.min.js - http://pastebin.com/5anj5Jr3
csv2sorttable.php - http://pastebin.com/L4iMRxDD
sorttable.js - http://pastebin.com/qmwfWYie


Nicat Asadov comments:

Kalumpi please upload oldest file..witout
jQuery(".sorttable_numeric").live("click",function(){

sorttable.innerSortFunction.apply(jQuery(this), [])

});


I am testing with console


Kalumpi comments:

sry..done


Nicat Asadov comments:

done

1)copy inside of this javascript file (<strong>http://tablesorter.com/__jquery.tablesorter.min.js</strong>) and paste into <strong>sorttable.js</strong>

2)Add jQuery(".sortable").tablesorter({debug: true}); after <strong>36th</strong> line of <strong>http://pastebin.com/SHukYscP </strong>


Kalumpi comments:

Well it works with this sorting js but i already tried that before and it is not able to sort right - e.g. if you sort "monatlich kosten" its 1 - 18 - 4 - 9 instead of 1 - 4 - 9 - 18.

Thats why i used the combination of these two:
http://www.picnet.com.au/picnet-table-filter.html
http://wordpress.org/extend/plugins/csv-to-sorttable/

and after a little correction http://www.wpquestions.com/question/showLoggedIn/id/8059 it worked on the tryweb site - but i got no idea why it will not work on the other site..


Kalumpi comments:

for your information - i just removed the sidebar on this page


Nicat Asadov comments:

No tablesorter can sort money column
<strong>http://tablesorter.com/docs/#Demo</strong>
In this link you can see options of tablesorter..Just change options and i'll work right as you wish


Nicat Asadov comments:

This code will sort "monatlich kosten" right
jQuery(".sortable").tablesorter({
// define a custom text extraction function
textExtraction: function(node) {
// extract data from markup and return it
return node.childNodes[0].childNodes[0].innerHTML;
}
});

Good luck

2013-03-28

Christianto answers:

Hi Kalumpi,

On your test site (working one) javascript file sorttable.js (<em>wp-content/plugins/csv-to-sorttable/scripts/sorttable.js</em>), is loaded <strong>before</strong> jQuery framework.
While on another site that is not working, sorttable.js is loaded <strong>after</strong> jQuery framework.

I tried by copying code on your non-working site and change the order of sorttable.js so it included before jQuery,
and it work!

Please try to include this file before jQuery framework by editing csv2sorttable.php (<em>wp-content\plugins\csv-to-sorttable\csv2sorttable.php</em>) on line 39

find:
add_action( 'wp_enqueue_scripts', 'csv2sorttable_enqueue_scripts' );
change to
add_action( 'wp_enqueue_scripts', 'csv2sorttable_enqueue_scripts', 0 );

if this still doesn't make sorttable.js load first
change to:
function csv2sorttable_sorttable_script(){
$mnsp_sorttable_js_url = plugins_url( '/scripts/sorttable.js', __FILE__ );
echo '<script type="text/javascript" src="'.$mnsp_sorttable_js_url.'"></script>';
}
add_action( 'wp_head', 'csv2sorttable_sorttable_script', 5 );


Above will load it manually, but I think it safe since this file isn't require other js framework/plugin to work.


Kalumpi comments:

Thank you so much for your response!
The first version did not work - but the second did.

Brilliant - thank you!


Christianto comments:

You're Welcome :)