jQuery plugin for HTML table manipulation - javascript

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.

Related

Drag and drop Table headers

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.

Creating Drag Drop div layout

I want to create a iGoogle kind of layout in which you can drag and drop different widgets in different places. I have to use javascript or jquery only. I wanted to know how to go about it. Basically how to start and implement this kind of structure.
P.S.: I cant use any specific framework which does this job. I have to create it myself.
You can also use draggable and droppable jquery plugins. See example here
http://jqueryui.com/droppable/#revert
update
You have to write your own dragable function. The trick is you listen to onmousedown event and then redraw the element at current x, y postion.
Look at this example
Note : if you want to learn, then do not copy paste the example. Try to understand and then implement on your own !
Check out jQuery UI's Sortable interaction functionality, should give you a good starting point.
http://jqueryui.com/sortable/#display-grid

table drag and drop reordering and column sorting

I'm currently using the Datatables Jquery Plugin to enhance an Html on a website I'm playing with.
I need to be able to use drag and drop to reorder the rows as well as be able to sort the columns in the data table by ascending or descending order.
However, this seems to indicate that you can only either have drag and drop OR sortable columns, not both at the same time using the DataTables jQuery plugin.
http://jquery-datatables-row-reordering.googlecode.com/svn/trunk/index.html
Does anyone know a workaround to this? Or even another JQuery plugin or technique that would be better suited for my needs?
I'm new to jQuery and JS so any direction would be greatly appreciated
At present the plugin you mentioned is the state of the art for datatables, you would need to build anything beyond what you've found yourself. I've been looking for something like this myself and the only thing I've found is jqGrid - look under 'new in version 3.6' > Sortable Rows:
http://trirand.com/blog/jqgrid/jqgrid.html
I prefer datatables, but this has an implementation that includes drag & drop and sorting columns.
Hopefully someone will implement this for real eventually.
One thing you could look into is using Tablesorter - which is much simpler than datatables - with a drag and drop plugin like sortable for jquery UI or this: http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

JQuery table w/ sorting

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)

Can you render arbitrary HTML in each cell of a YUI datatable?

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

Categories