Expand / Collapse help!

drc83

Hi,

Currently I am using datatables with ajax. I send the request and then the html table is returned back to the page.

I would like to use the expand / collapse feature but can the expand data I wish to display be returned in the html? If so please can you show me the structure of this?

Also with the collapse / expand feature can I use slideUp / SlideDown for smooth animation?

Thirdly with the collapse / expand feature I would like to click the TR row and have it expand and once again clicked it should close.

Finally I would like to have only one row expanded, at any one time. If another row is clicked the row should should expand and all other rows collapse.

Thanks for your help! Keep up the good work!

allan

Hi drc83,

This is all quite possible:

1. So in your Ajax success handler you are writing the HTML out to the page and then initialising DataTables on that table are you? That's fine - you can still do expand and collapse as shown in this example: http://datatables.net/release-datatables/examples/api/row_details.html . A small modification is needed to close any open rows when you click to open a new row - just adding a class to the 'open' rows and then closing any rows with that class would do it nicely.

2. My post here and Nialls following post show how it can be done: http://datatables.net/forums/comments.php?DiscussionID=2312&page=1#Item_3 . Note that Nialls post shows changes to the DataTables source code, which isn't really needed, you can just wrap the content up in a div an animate that from the caller without any modification to the code. I think this should probably become a blog post as it is asked a couple of times - I'll see about doing that this evening.

Hope this helps - give me a shout if any points need clarifying.

Regards,
Allan

drc83

Hi,

Thanks for your help. Finally question is that I wanted to expand and collapse, by clicking the row rather than having an open / close on the side, is this possible? Do you have a code example, would be helpful as i'm not very good with jquery.

Also just wondering if you got round to posting your blog?

Thanks

allan

1. Changing the activation is simply a case of modifying the selector in the example ( $('#example tbody td img').live('click', function () { ) to whatever it is that you need (presumably just a td or tr selector would do you).

2. I'm afraid I haven't yet managed to do a blog post on this - hopefully will get time to do this soon.

Allan

allan

Here we go: http://datatables.net/blog/Drill-down_rows :-)

Allan

drc83

Thanks for all your help, keep up the good work!!

422

Allan thats brilliant.

Could you please help in allowing users to delete a row with the sample you posted above ? Happy to pay for this.

drc83

Hi,

I have one last question. I am using code similar to the page:

http://datatables.net/ref

I have also added the following code:

$(anOpen).each( function () {
if ( this !== nTr ) {
$('td.control', this).click();
}
} );

so that only one row is open at anyone time.

When the content has been expanded I would like the content to only close if the a row is clicked ie. I don't want to be able to click the expanded content and it close.

Could you guide me on how I could do this?

Thanks

allan

@422: Sounds great - hit the "Support" link at the top of the page and post your question in a new thread please :-)

[quote]drc83 said: I don't want to be able to click the expanded content and it close.[/quote]

It doesn't do that on my reference page, so I'm not sure what is causing that behaviour on your page. I presume that the selector used for the live click event is matching the details row as well, so you would probably want to add something like if ( $('>td', this).hasClass('details') { return; }.

Allan

drc83

Hi Allan,

Thanks the above code worked, I have the table up to a level that I am happy with but now would like to add various filters, I was wondering if you were available for some for some work and what your rates were? Also how you would prefer me to contact you with the details abut the filters that I would like to implement for the table?

Thanks

allan

Sounds great - if you could provide some details about the filters then please do let me know. You can send me a private message in the forum by clicking my name in this post's header and then selecting the option "Send allan a Message". If you just want me to provide a bit of guidance to help you implement the filtering then please just use the support page ( http://datatables.net/support ). If however you want me to implement it fully, send me a message and we can talk about what is involved.

Regards,
Allan

drc83

Hi Allan,

Thanks for getting back to me regarding the project. I'm waiting to hear back from the client about the UI for the filters before I proceed.

In the meantime I have a quick question.

Can I have 4 styles for the 's of a sorted column, one for ASC (odd,even) and one for DESC (odd,even)?

ie. when a column is sorted in ASC format I have a specific class with odd and even, and if sorting is clicked again to change to DESC a different class is invoked for the 's including odd and even again, and not just the if so can you give a quick example on how to implement this.

Thanks
Dino

allan

So you would have something like TD.oddAsc and TD.evenAsc? There isn't a built in way of doing it, but ti shouldn't be much of a problem to do it with fnDrawCallback. Just loop over the drawn rows and add/remove classes as needed based on the data in the page.

Allan

drc83

Hi Allan,

I am using expanded / collapsing datatable and in each expanded row I have a form and i'm using the following function:


$('form').live( 'click', function () {
if ($("#size").val() == "" && $("#material").val() == "") { alert("An error occurred!"); return false; }

} );
but because I'm using an id (not unique) for the form elements this is causing problems whats the best way to making the form elements unique and also changes to the above function to make it work. (basically I want to keep the above function simple and not wanting to list various size id's and material id's).

Thanks

allan

[quote]drc83 said: id (not unique)[/quote]

Do you mean that you have multiple elements with the same ID on the page? That's invalid HTML and won't work I'm afraid. Each ID must be unique in the page.

Can you change it to something like:

[code]
if ($(".size", this).val() == "" && $(".material", this).val() == "") { alert("An error occurred!"); return false; }
[/code]

Allan