I am currently using the GridView from Ext JS in one project and it is very feature-rich and complete.
However, I am looking for something functionally equivalent for another project. Something lighter-weight and most importantly has a more spacious and customizable appearance. Perhaps something that works with Twitter Bootstrap.
By "functionally equivalent" I mean: server-side paging, column sorting and search, interface via JSON over Ajax, column-width dragging, custom data formatting functions.
By "spacious and customizable appearance" I mean to produce table layouts with big clear rows similar to Bootstrap or modern Admin Themes.
I'm happy to use anything jQuery based, but want to avoid dependencies on big UI libraries like jQuery UI or Sencha's Ext JS.
Maybe you can try this one: http://datatables.net/index
There is an example for styling with bootstrap (http://datatables.net/blog/Twitter_Bootstrap), but you can easily customize the appearance.
if you want to render so many rows and columns like 10000*10000, i recommended https://github.com/mleibman/SlickGrid. although you think it is not needful,you can use its sorting and search.
Related
I'm looking for a All-in-one solution for HTML table management. What I'd like to accomplish is to enable user a simple table management which would offer sorting by columns, filtering data (per column or per globally per table), moving columns (changing their order) and toggling columns visibility.
Basically an alternative to ExtJS's feature, which can be seen on this url http://dev.sencha.com/extjs/5.0.0/examples/grid/live-search-grid.html . I wouldn't like to use ExtJS for other reasons, but this they have figured out.
I've searched for existing solutions but couldn't find All-in-one and I wouldn't like to overly complicate my app.
This seems to be a question geared more toward personal preference, however I would recommend dataTables. It is a very robust JQuery based HTML table library. It has the majority of the features found in ExtJS and provides easily implemented interactivity.
I am a relative JavaScript beginner. I am comfortable working with documents (document.getElementById(...) and document.getElementsByTagName(...).. and other document querying functions.
I have been asked to create some sort of a table pagination library for my team. We don't use jQuery or any other third party libraries. So I would have manipulate the table dom or something like that to make it work. In this library, I would have to be able to
set up flexible pagination (Number of rows to be displayed per page may be configured by using some sort of a text box) I took a look at some of the sources jQuery Pagination Plugin. But I can not understand it.
The user should be able to navigate back and forth using some icons. The page number changed should be reflected in the configuration box.
I am not asking for solutions because I would learn to do this on my own. How can I start working on this issue?
Update after observations from nnnn
I am not sure what approach to take, as I had not considered that possibility. Most of the times, we have only about 2000 records to display. I guess if the load does not take too much memory, I would prefer to load before hand and then try to paginate it. Although, I will go with whatever is recommended.
I would highly recommend taking a look at the jquery datatables plugin http://datatables.net/
If you want to implement your UI and just need an Object to handle pagination logic please see this library: https://github.com/pagino/pagino-js
I would like to know if there are other javascript components that provide presentation of grid with multiple groupings. Below is a screenshot of jqGrid I extended to allow the feature however it needs all the data to be fetched. I would like that data would be loaded when the grouping is expanded.
Another modified jqGrid would be nice since it is what we've been using in our project :)
Yep, Datatables does this really well.
The tutorial on how to do the show/hide details is here
I strongly recommend Datatables because after trying nearly every jQuery and YUI solution out there I've realized that it has more features, better support, and the best Ajax operation I've found. As a strong bonus, it's ThemeRoller capable, which means that I can re-skin my apps in just minutes, which has made that operation incredibly profitable.
ShieldUI's Grid can also do this - it has flexible grouping, hierarchy support and and many other fancy options.
It is a very affordable solution compared to others and also comes with a whole library of other useful UI widgets for charting, editing, layout, etc.
I know one free component that is similar to the above described grid - TreeTable. It provides presentation of grid with multiple groupings: http://docs.webix.com/samples/15_datatable/30_treetable/14_colspan.html. Moreover, it has a dynamic loading feature.
I have 3 sets of tabular data I want to display with a JavaScript framework in ASP.NET MVC. I know I can embed a separate grid in a tab, but this seems inefficient especially when large datasets are involved since I imagine 3 separate grids would be created. I haven't found a JavaScript datagrid which emulates what a spreadsheet does with multiple tabs. This example from YUI might come close though:
http://developer.yahoo.com/yui/examples/datatable/dt_dynamicfilter_source.html
I'm a little familiar with jQuery, but would be willing to switch to any framework which makes this easy. I don't really need to edit the data. Any suggestions?
EDIT: I didn't mean this to be about jQuery. Maybe some details about my scenario would help, as suggested in one of the comments. I want to display tabular data from an ordering system containing thousands of records. I'd like 3 tabs:
All orders entered in the system which haven't been paid for yet.
All orders from a specific vendor.
All orders which have been paid for.
Since each category has thousands of rows, I only want to load data if the user starts paging.
I thought having 3 tabs with 3 separate grids (one within each tab) wouldn't be performant. I haven't actually tried though, so I'm probably guilty of prematurely optimizing. I'm looking for a grid with tab support built-in. I don't think there's one for jQuery. Perhaps ExtJS?
Since you tagged this with Ext JS, I'll mention that it's quite simple to render grids into tabs using Ext JS. It also supports deferred load/render, so that only the first tab/grid would load initially, then the others would be loaded on first access. Without knowing your specific requirements it's hard to comment further.
EDIT (based on edited question): Ext grids don't directly support tabbing, but they can be embedded within a TabPanel as I mentioned for the same effect. However, based on your description, it sounds more like a filtering scenario to me. I don't see the point in having the overhead of multiple grids when only one will ever be visible, and each one's purpose is to show a specific view (i.e. filter) of the same data. I would just have a single grid with a toolbar or some other method of providing your toggle between filters, and use Ext's built-in store filtering/querying to create your views on demand. The Ext grid supports paging out of the box (client or server, in your case it would be server for thousands of records). There is also a very popular plugin called LiveGrid that provides for virtual scroll-paging of large data sets.
I'm not necessarily advocating Ext over any other framework -- I just happen to be most familiar with it and I think it could solve your problem quite nicely. I would suggest trying it out for yourself to be sure.
jQuery Grid is kinda what people use a lot. I use it and it's pretty good.
jqGrid Link
I wouldn't draw a grid with three tabs. I'd use a single grid with a tab control and then load data via jQuery as required.
Or maybe have three PartialViews that you can load dynamically when you hit a tab.
You could also use dhtmlx grid.
You could use JS tab object to create tabs.
And use javascript grid framework to create grids and populate data into grids.
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).