table drag and drop reordering and column sorting - javascript

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/

Related

Angular table-sort and drag and drop table row conflict

I am using angular table-sort and angular drag-drop in my project. When I am dragging a row and trying to drop it to another row, then table sort forcefully sort the rows to their previous position.
If I remove the table sort directive ts-repeat, then drag and drop works perfectly. I also need default table column sorting "Age" ascending. I have made an example on plunker for better understanding. https://plnkr.co/edit/pHlTufpayFAB4he8bN6y
So, how to prevent table-sort when drag and dropping a row?
Can anyone help me solving this issue? I would really appreciate this.
Thanks in advance.
I think you should just get rid of ts-repeat, and only sort the data initially (in your service/controller). It's not a bug, it's a feature. Imagine, that you remove and then re-add an element to a table, which is sorted. You want it to keep sorted, right?
You can try by using Angular ui-sortable instead of angular drag-drop. I think it will work for you.
PrimeNG Table offers row reordering with drag drop, you need upcoming 5.2.1 though.
https://www.primefaces.org/primeng/#/table/reorder

Displaying sub-data rows inside a row in SlickGrid Table

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.

jQuery plugin for HTML table manipulation

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.

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