I want to add paginated table to a page. It should be 2 rows by 4 columns. Each cell contains a thumbnail image and some small links.
We're using YUI elsewhere on the project, so I'd like to use the Datatable. All the examples I see are geared around tabular data (understandable), but my hunch is that I can rewrite the HTML of each cell using Javascript. I don't see the callback function I should hook to rewrite the cells.
Possible? Or am I trying to hammer in a nail with a screwdriver? If there's a simpler way to do this with YUI I'd love to hear about it.
thanks!
jcooper,
To paginate a simple grid of image/text elements, I'd almost prefer to see you use the Paginator without using DataTable. DataTable is a powerful component, but it's working hard to be a lot of things you don't need.
Carousel (http://developer.yahoo.com/yui/carousel/ ), on the other hand, seems like it's trying to be just what you want. http://developer.yahoo.com/yui/examples/carousel/csl_imagentext.html , for example, might be a good place to start.
If that's not quite what you want, you could definitely do this with DataTable. Just create the markup snippets you want to use for each cell, store them in an array, and follow the directions for using an array datasource and pagination.
Regards,
Eric
Related
I've started using SlickGrid and have to implement a kind of functionality where I need to show sub-row inside a parent row of SlickGrid.
Here's the scenario
Here's Asia, Europe is having sub categories in Services Column and these service columns are expandable/collapsible
I'm trying to customize this for first column.
Is any other link/source available to refer to accomplish the feature.
Are you aware of the grouping/aggregates example ?
http://mleibman.github.io/SlickGrid/examples/example-grouping
This offers very similar behaviour, but the exact 'cell-merging' behaviour you show is not currently available in SlickGrid. Slickgrid tends to use tree structures rather than a flat structure. That said, it may not be too hard to hack up, but it seems everyone wants a different visual layout and it becomes very hard to support them all.
If you don't need editing or scrolling, I'd suggest this would work best as an HTML table, or even a PDF.
I've found a few plugins that does this, but they either have more than what I want which gets in the way and none of them do exactly what I need. Some I simply can't get to work with firebug showing syntax errors in the style sheets even though it seems perfectly fine.
I want something very simple in terms of visuals. Basically I want this:
http://demos.devexpress.com/aspxgridviewdemos/groupingsorting/grouping.aspx
If you look at the link then you will see that you can re-order the columns by dragging the headers, but you can also drag the headers out to where it says "Drag a column header here to group by that column"
I just want a plain way to do this in javascript/jquery with some callback so I can store the column order in an array after you change the order. The data changes I can handle, it's the dragging of the columns and then changing the order or removing the column and adding it to the Group space above that I have issues with.
We actually do you devexpress controls, but for what we're doing it's to slow with all the callbacks their grid needs to do when you do anything on the thing. So we're in the process of creating our own ajax grid that does what we want and how we want it with only what we need.
I hope this makes sense and that someone can help.
I have recently looked at implementing something similar, so while I can't post a code example, I'd recommend looking at jQuery UI Draggable to let you drag the columns to where you want them.
Make the table column order configurable through javascript first. Then make the column headings draggable and based on the new position redraw the table based on the new column layout.
This approach should be faster as you can optimise for your use cases.
I have designed a general purpose Dashboard editor based on Google Charts API.
I have been finding a way to draw merged cells on tables. I have readed all documentation about that, but there is not way trough API.
Do you know some way or workaround to do that?
Thanks
I'm lazy, so I'm going to take the liberty of assuming that you have access to JQuery. You can do this in pure Javascript dom manipulation but seriously? Life's too short...
There is a workaround, but it has some caveats
The table visualisation is clever but, at the end of the day, it still just a table and can be managed as one.
Something like this...
$("td:contains('Blah blag blaf')").attr("colspan","2").next("td").remove()
So that's looking for a cell that contains 'Blah blag blaf', merging it across two columns and removes the next (now redundant) cell
Alternatively
$("#chart_div tr:eq(3) td:eq(2)").attr("colspan","2").next("td").remove()
Assuming your table is in #chart_div, this does the same thing but based on row and column.
There is a catch though... The table is re-drawn from data on sort - so, if your table is sortable you'll have to capture the event and reapply your merge
I'm searching for a jQuery plugin able to add the controls to manipulate the structure of a given HTML table.
I need to give the user the ability to, for example, add rows and columns, graphically resize them, manage the colspan and rowspan, and so on.
Anyone know some nice plugin to do that? (better if jQuery)
There are a lot of plugins out there for this, with varying degrees of complexity and function. Probably you should start by looking at jqgrid.
There are all kinds of JQuery widgets that offer some nice features like sorting by a columns (like http://tablesorter.com/docs/ or http://www.datatables.net/)
I haven't found one that integrates with server side sorting though. I have the following requirements:
sort by clicked column (server side sort)
filter by a text field over each column
selectable which columns to display
any suggestions on a widget that has some or all of these criteria?
thanks
Honestly, I would prefer to roll my own in this situation. Filtering is especially easy using jQuery: $('tr > td.columnName').each(...); just set the display style of the row to none if it doesn't match, block otherwise. Hiding columns can be done in a similar manner. Sorting isn't too bad--though notably more complicated. You need to sort (which can take a while, depending on your algorithm) and then place the rows into the table in the order you determined.
Alternatively, find a plug-in that has sorting accomplished, but also generates simple markup, so you can extend it with your own filtering.
As a step up from rolling your own (which is not a bad suggestion, BTW), try this jQuery plugin out: Ingrid. The descriptions of the code talk about using server side data generation.
I think DisplayTag is your solution. It was used to display data for servlets, portlets and it supports a lot of functions like paging, sorting on server side.
Try Tiny Table.
It does not require jQuery but you put a wrapper around it.
http://www.leigeber.com/2009/03/table-sorter http://www.leigeber.com/2009/03/table-sorter
(source: leigeber.com)