Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Scrollable, Sortable, Filterable table

I'm looking to utilize jQuery to handle a few very common requests we get for data tables of varying sizes: scrolling, sorting, and dynamic filtering.

  • I've handled scrolling in the past by having two separate tables with fixed width columns, along with associated div containers for the "actual" scrolling. However, this method doesn't work with any of the jQuery-based sorting table extensions that I've come across (tablesorter being my favorite so far) as they want everything in a single table.
  • For filtering, they're requesting something akin to how Excel and SharePoint lists do it (basically all column values are listed in a dropdown, allowing the user to select/deselect them). I haven't seen anything like that yet, although it sounds possible.
  • One other related nice-to-have feature would be the ability to "freeze" a column for horizontal scrolling.

Ideally I'd like an existing extenstion, but if none are out there I'd also appreciate suggestions from any jQuery gurus on how to best implement it. My current thoughts are to dive into tablesorter and extend/update it as necessary.

To hopefully keep things focused, paging is not an option (along with anything server based, for that matter).

Update: I do appreciate the answers so far, but none of the options given so far touch on the filtering aspect at all (that said, I must admit that jqGrid looks very good for some future projects I have). In the meantime I'll work on a custom filtering solution; if it works out I'll update again.

like image 331
pdwetz Avatar asked Oct 10 '08 18:10

pdwetz


5 Answers

I came across this question as I was searching for a sortable table plugin myself; I really wasn't impressed with any of the suggested widgets, but later I discovered DataTables, and I was quite impressed. I recommend checking it out.

like image 183
Jeremy Holovacs Avatar answered Oct 21 '22 16:10

Jeremy Holovacs


Maybe this excellent plug-in could do it:

Demo page

It's called jQGrid, here is the project page: http://plugins.jquery.com/project/jqGrid

like image 28
matdumsa Avatar answered Oct 21 '22 15:10

matdumsa


I would encourage you to try out the Flexigrid.

It has a lot of great features and I personally think it looks more professional than the jqGrid.

It doesn't have some of the features that you asking for, but I think it could be a good start. It would be great if you could work on adding some of those features to the code base.

If you are coding in c#, then I posted a blog entry about how to use LINQ to Reflection to bind JSON to the Flexigrid... if you are using another language there are other examples you can find on Flexigrid's Website & Google Group page.

like image 4
Elijah Manor Avatar answered Oct 21 '22 16:10

Elijah Manor


a simple jQuery Scrollable Table Plugin

like image 3
farinspace Avatar answered Oct 21 '22 15:10

farinspace


As mentioned in my update, I ended up using a custom filtering extension (closed source, unfortunately). I've recently started using SlickGrid and it's now my go-to grid.

like image 1
pdwetz Avatar answered Oct 21 '22 14:10

pdwetz