Making these two plugins work together?!

JavaScript
1

Hey all!
I’ve hit a snag and I’m hoping someone can help me out!
I’m using an awesome Jquery powered table from JankoAtWarpSpeed http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx over on this [URL=“http://www.originallyricsformusic.com/sampledemo.html”]http://www.originallyricsformusic.com/sampledemo.html demo page I set up to show you.

That table on it’s own is working great, but my problem is trying to use this http://plugins.jquery.com/project/jquery-pagination Pagination plugin along with it.

Pagination is working, but it’s getting split up in weird ways. If you check my demo page you will see that upon page load the “Additional Information” which is enclosed in td colspan tags is automatically showing and should be hidden until the user clicks on the arrow button. Now if I was to take off the pagination plugin, the table works fine and the td colspan area is hidden until arrows are clicked. So it’s obvious that the pagination plugin is hindering. Can anyone suggest a way to fix this and make both plugins work together?! I’m determined to get this to work! Thanks so much!

2

Ok Paul, I think I’m getting somewhere, I just need a little bit more direction!

I gave all the td colspan areas a class of “hide” and then updated the jquery to hide them upon pageload. Works great. Now I am stuck getting them to be shown again when the arrows are clicked.
It’s really odd because I was able to update the script and make them show upon click, but for some reason I cannot get it to work again. I was not able to make them hidden again if the arrow was clicked once again though.

Here is what I’m playing around with:

$(document).ready(function(){
			$('.hide').hide();
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();
            
            $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
        });
 
 
 $('.arrow').click(function() {
$('#hide').show('fast');
 return false;
});


$('.arrow').click(function() {
$('#hide').hide('fast');
return false;
});


$('.arrow').click(function() {
$('#hide').toggle(400);
 return false;
 });
 
 $(document).ready(function(){
 	
 		$(".tablePager").tablePager();
 	 
 	});

I don’t think I will need 3 separate instances for the hide, show, and toggle do I?
I’m sure there is a way to make all that just one command?

3

Oh no! So you mean that you had detailed directions on how to do this and it was lost?!
I REALLY appreciate that you took time to look at this for me!
Here is my problem though, I have been using plugins for quite a while, but just recently started experimenting and trying to learn jquery on my own. I am nowhere near knowing how to make these work together.
Anyway, adding a class to the additional info(td colspan) areas I’m sure I can do, since that is just css. So is that all it should take, you think? I will go and try this out and report back. If you can help me get this working, please PM me your paypal info so I can reimburse you for your time!

4

Okay, two hours writing out a reply and being forced to hard-boot due to screen issues, it’s a painful loss.

Here’s the condensed version,

The tablepager requires the information in a single table, and it changes the display of the table rows, in the same way that the toggling of the additonal information changes the display of the same table row.

What is needed is for each of the addititional information rows that should hidden to have a class name added to it, such as “hidden”, and for the tablepager script to be updated so that it properly accepts options that are passed to it.

That way you can have 6 rows per page, which will show three sets of info (each with 2 rows, 1 for country info and the other for additional info).

Then, the tablepager can be updated again to accept an onchange option, so that whenever the table is updated the onchange function can fire and then update those rows with the “hidden” class name so that they are actually hidden.

That way your page will work as intended.

5

I will pay via paypal, anyone who can help me out with this! I am determined to get this right! Thanks!

6

I am trying to make it so that NO additional information is showing at all, until the user clicks on the arrow. IN other words the td colspan areas need to be hidden completely unless arrows are clicked.

7

From what I see, the first two of the three listings are showing, which is why the additional information is showing for the first two.

If you collapse either or both of the first two listings the additional information part is hidden too.

I presume that you would like the page to load with only the first item showing?

8

and for the tablepager script to be updated so that it properly accepts options that are passed to it.

ahhhhh, here is my problem then. Sorry, It went right over my head.
That will be an issue for sure then. I am clueless on how I can get the tablepager script to accept that option.:frowning:

9

Have PM’d regarding demo of potential solution