Develop Reference

SharePoint SPGridView client side available options

I've been looking in to a few grids that are currently built that I could just make use of however none that I have found so far provide the same functionality as an SPGridView in terms of filtering.
The closest I've managed to find is JSGrid which allows you to search each individual column.
What I'd like to do is to display all unique values for a specific column in the filtering option below the normal Ascending and descending much like the list view functionality you currently get in a document library or list.
Many Thanks
Truez

Can javascript sort, filter, and render a very large table?

First of all, I have no idea of Javascript's capability on this. But would like to know if it is possible:
To read from a text file and display a very large table (a couple dozens of columns and a few hundred thousands of rows), in sections;
Not all columns will displayed in the same time. columns are in groups. a group of columns needs to toggle between hidden or show;
rows can be filtered based on certain columns.
The reason to do this is to make a report that displays data analysis results and also provides basic filter, sorting functions for the user. They most likely to have some sort of web browser. So HTML would be an ideal format.
Is it possible with Javascript?
Thanks!

You might be able to do this by using a grid plugin. For example, have at look at the answers to this question: JavaScript data grid for millions of rows

I would recommend a javascript table library such as DataTables. It includes sorting, filtering and pagination options.
Also it has functionality to hand off all the paging, filtering, sorting etc. that DataTables does to a server. The javascript lib DataTables then is just an events and display module. In this case, any number of rows can be handled.
So you would have all the functionality you need, with the ajax-y quick performance of the data loaded in javascript with the scale to handle any number of rows.
Server-side data processing with DataTables

Absolutely yes. Ext.JS shows how to do this very effectively. When done correctly, it is a performance optimization that reduces round trips to server. And improves UX responsiveness.
ExtJS Rich Grid Example. (there are many)
ExtJS Examples. (look at grid section)
Hope that helps.

sorting the column by clicking on the column's header

I am trying to implement one sorting functionality in my code in php. The functionality will be like, when we click on the header of a column then that particular column's record will be sorted by ascending order and again click on the same column means the column's record will be sorted by descending order.
Please help me how to proceed with some example.

JQuery has many plugins that do this sort of thing. I have used Tablesorter with great results in my own projects.

I too recommend jQuery Tablesorter, it's an excellent little plugin.
You really want to avoid doing the sorting backend, as this will put strain on your server, but if you wanted to it would be as simple as appending an ORDER BY instruction to your query depending on what column the user clicked. Again, I do not recomment this method, I think you should do it in the frontend with a plugin such as Tablesorter.

jQuery table data sorter plugin for tables with multiple <th> rows

I have a set of tables in a build that use the Tablesorter 2.0 jQuery plugin to sort columns of data. It works perfectly fine until I get to a more complex table that has multiple TH rows.
Tablesorter 2.0 automatically detects the first set of THs and makes them the sorting trigger. There's no way to override this with a selector.
My complex table has multiple TBODYs with rows of THs on top like so:
I'm going to give www.datatables.net a go to see if it has a way around this but I'm worried I could run into JS conflicts with both plugins running on the site.
Any other suggestions of how to achieve table sorting within each TBODY using the row where you see 'My Equity' as the sort headers NOT the dark grey header row at the top?
An example of the source HTML is here: http://pastebin.com/CYd06L87

Datatables is a very powerful grid sorter and you should have no problem using multiple TH's. They also have solutions for table details, which might be an alternate way to approach this task. For example, you could have two main rows, one for your equity and one for your equity, all in the same table. Then, setup row details to accomplish your goal...just one possibility.
Here's the row details tut: http://datatables.net/release-datatables/examples/server_side/row_details.html
There's also a solution for summing row totals.

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.

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.

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

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.

a simple jQuery Scrollable Table Plugin

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.

I'd like to add the Laravel flavored DataTables (GitHub, jquery DataTables API) - perfect if you already work with PHP/Laravel.
Extra, koalyptus/TableFilter another custom filter table (actually, my fav).