DataTables – Table plug-in for jQuery | Hacker News Reader

DataTables – Table plug-in for jQuery

datatables.net

90 pointsEyes2design56 comments

DataTables author here - I've often wondered what article or software I might write to see if I could get onto the hacker news front page. Apparently the trick is to wake up one morning and be very pleasantly surprised to see existing software already there :-)

Very happy to answer any questions if anyone has any!

Thanks for writing this piece of software! I appreciate all the configurability. One thing that irks me bit, is the way action buttons are handled (using TableTools, ColVis and the like). Ideally I'd like to place and style the buttons the way I want and just have JS handles for activating their functions as well as state change events. Maybe I've missed something, but I couldn't find how to do this from looking at the documentation as well as the ColVis source code. Did I miss something or do you have plans changing this in the future?

Plans to change it in the future. I'm planning on merging the abilities of ColVis (given that it just calls a standard DataTables API method) into TableTools and improving the TableTools API / configuration options. At the moment ColVis is a little bit lagging while waiting for this to be implemented - which will be the first thing on the cards when DataTables 1.10 is released.

Thanks, that's good to know. Makes me want to come back to DataTables once these changes are in effect.

Hi theallen,

I've made a great deal of use of jqGrid which I've found to be an excellent piece of software. I've always been meaning to give DataTables a try as well but haven't yet got round to it. Assuming you're aware of jqGrid how would you compare / contrast it with DataTables?

jqgrid is piece of crap from programmer's point of view. Its code is a true mess. Its made of callback hell, stupid attribute and variable names (like a, b, c, ap, vp, really wtf) and spaghetti code.

Absolutely aware of jqGrid, but to be honest I can't comment on how it compares to DataTables has I've never really worked with jqGrid. Perhaps I've taken the wrong approach, but I've tended not to look at the other table libraries, focusing instead on making DataTables as good as I can for its intended purpose on its own. Having said that, I'm sure there is inspiration I can take from the other libraries, as some are very impressive.

Nice to see DataTables on HN, thanks for creating a great library!

Just FYI, your library is being used clinically every day in a number of cancer centres in Canada as part of the open source QA tool for radiation therapy clinics that I wrote[1].

p.s. like others, I'm not a big fan of Hungarian Notation, but it's really no big deal at all and kind of a silly thing to complain about given how useful the library is.

[1] https://bitbucket.org/tohccmedphys/qatrackplus

I love you

While I have found DataTables to be useful in the past, there are (thankfully) many other alternatives available today with a much saner API.

DataTables might have the worst API I've ever seen in a Javascript library. Powerful, yes, but it has the most insane naming conventions I've ever seen. To this day I do not understand why so many properties are prefixed with random letters.

There was a time when there wasn't anything else out there that was even close to as good, though.

I agree with your sentiment. I found datatables initially easy to set up and use, but I soon found the documentation to be sorely lacking. Searches for the most basic customizations led to SO answers outlining ugly workarounds when all I really needed to know was the name of the right flag.

The examples on the site aren't general or plentiful enough, and they assume more prior knowledge of the plugin than would seem reasonable. I couldn't even find a list of initialization options anywhere.

A full list of options are available here: http://datatables.net/ref . However, I totally accept that the documentation isn't up to scratch, which I why I'm working on completely redoing it.

I'd be interested to know of any particular pain points you had so I can ensure they are addressed.

Alternatives such as? They use Hungarian Notation[0]; not random, but dated.

[0] http://en.wikipedia.org/wiki/Hungarian_notation

I wrote this:

http://backgridjs.com/

Looks pretty cool. Any way to fix the header to always be visible?

You could add Mozilla's position:sticky attribute :P

Ah, you're correct. I don't program in any language that considers hungarian notation to be a common naming convention so I haven't ran into it before. For some reason I had not stumbled on to the page that explains this until I deliberately looked for it now.

As far as alternatives go, I usually specialize based on what my needs are. If I'm using a JS framework I don't have as much of a need for an all-in-one solution like datatables because the framework usually does a good job of handling things like DOM rendering and data storage without the need for a full blown table sorting library.

As far as alternatives go, I usually specialize based on what my needs are.

Well, the alternative is always to write it yourself. The same could be said for jQuery or any framework (and many have been advocating doing that) but it's always a trade off between experience/time/resources. I don't think it's really fair to compare a feature rich plugin that provides a lot of generic functionality vs what you can write for a very specific requirement, esp if you don't need the any/most of the functionality in the plugin!

I used Datatables a few years ago extensively for a provide, I actually found it very easy to work with - but I understood the notation having come from a VBScript background a long time ago - and as others have said, it was miles ahead of anything else at the time.

That's not what I mean necessarily. You can specialize by grabbing a single purpose library.

Sure I agree, but that's just common sense, use something that fits your purpose, it's the same for any piece of software.

Interestingly enough, this is exactly what we have been working the past week at the office :) but our solutions are more general (not fixed for a table) because we need the pagination feature for many different controls

What alternatives have you found to be better? I'd be interested in checking them out.

I'm not the parent, but we switched from Datatables to SlickGrid: https://github.com/mleibman/SlickGrid

Much nicer API and it's fast for large amounts of data. Unfortunately like many things it's lacking a lot of docs so you have to dig through the source of the examples.

We finally ended up picking http://dgrid.io/ over SlickGrid and jqGrid. As with every table component, there are some quirks, but we're really happy with it. Feels like the most modern table component to us.

Can you name a few of the alternatives you found? The ability to sort on more than one column ruled out a lot of them for us.

https://github.com/Mottie/tablesorter has multiple sorting using the shift key. I alternate between this and DataTables. The hungarian notation threw me off at first too. Far from insane though.

Here's an example of what you have to do in datatables to get the elements displayed around the table itself styled (such as a search bar, pagination, or table meta information)

https://datatables.net/release-datatables/examples/basic_ini...

So, in order to adjust the styling of DOM elements around the datatable, you need to understand a very specialized form of syntax that one particular property that controls all DOM element layouts accepts as a string. And there's only one example.

How is that sane?

I don't find this a problem at all. What's indeed a problem is that it enforces a wrapper div that you cannot control using this syntax. Furthermore, plugins such as ColVis tend to be inflexible due to that wrapper.

To control the structure of whats put in the DOM your are going to need something that looks like a template - so it's never going to be pretty and as soon as you choose any approach to templating it's probably going to upset a lot of people.

I agree that the syntax is a bit on the terse side - but it's not "insane" and at least it is there, logical and documented.

I usually specialize and grab a lightweight library that does exactly (or something I can hack on) what I need it to. The closest exact replacement I have found to datatables is ExtJS. ExtJS has a pretty large learning overhead as well, but is probably more flexible in terms of functionality in the end and has a much more sane API in the end (with the tradeoff of it being much less easy to reskin).

On the other hand, a lot of JS frameworks have tackled a lot of the problems that I used datatables for except in a much better way. Things such as data storage and retrieval, dom manipulation, smart dom rendering. A lot of times I don't need to reach for one of these libraries anymore because the problem is already handled elegantly enough at the framework level. AngularJS in particular really shines here.

I've been using jqGrid for a couple years now, and have been able to make it do everything I've ever needed. It is full of its own quirks, and probably hasn't been updated in a long time, but it definitely got the job done for me on many occasions.

http://www.trirand.com/jqgridwiki/doku.php

I use kendo grid: http://demos.kendoui.com/web/grid/sorting.html

In typical HN fashion the most cranky post gets voted to the top.

- Hungarian notation is 'the most insane naming convention' you have ever seen? Really? I'm guessing you haven't seen a lot.

- 'There are many alternatives with a much saner API' - proceeding with not naming any, and the ones mentioned below all are lacking in features compared to DataTables - everything else I've seen tends to be a one trick pony. Obviously something with not many features is going to have a simpler API.

Please note: I do agree that the API could be better - also, it depends on how many powerful features you want, whether DataTables is going to be worth it. As someone who usually develops in rich desktop environments I tend to demand more of tables, and to program all those features from scratch would use an insane amount of time on the web.

As far as alternatives go, it's trivial to reproduce most of DataTables' functionality with AngularJS by binding an array of objects to a template for a table. Of course DataTables has been available for years, but I have to agree that the API is atrocious. There's no excuse to be using Hungarian Notation in 20xx, but even without the naming conventions the way some of the functions are invoked and arguments are constructed is just bizarre. Parsing HTTP parameters is laborious and error-prone IIRC.

(Again IIRC some arguments, such as which column to sort on by default, are the actual integer index into the columns array -- i.e. pass a 1 to sort on the second column. The last time I saw anything like this was when I was looking at Quake3 source, written in C!)

However it does the job well once it's all set up and for a long time it was miles ahead of any other option. Only ExtJS and YUI grids are/were better but those require large frameworks and a number of assets to be in place. I would never advise someone to use it today though, I have to say. I used it once for a critical project and in retrospect I would have rolled my own, despite time constraints.

Thanks, that's way more helpful. In my case I didn't think about using Angular since I wanted the templating to be serverside in general - it's an interesting idea to use it only for the asynchronous parts.

I don't get the hate for Hungarian notation and 0 based column index though. I wouldn't use Hungarian myself but I don't complain about it either - for dynamic typed languages it makes enough sense to me, since it conveys the desired type information without too much clutter. How would you specify the column of a html table? IDs don't really make sense since it could be inconsistent or missing - I guess a 1 based index might be better for consistency with CSS, but it's not really something that makes me want to switch framework.

I would require each column object to have a unique name property and then expect references to those columns to be by name. Column objects are configuration, completely separate from markup.

Sure, I could give you a google search results list of table sorting libraries. As I mentioned in several other comments, I usually specialize based on what my needs are. There was a point in time when DataTables was your only option for certain things, but that point has passed. I've also found that some of the bigger problems that DataTables solves (data modeling, dom manipulation, dom rendering) are handled better at the framework level (angular particularly shines here) than with a javascript table library.

The naming convention annoyed me for about 10 minutes then I just got on and used it - at least the notation is documented:

http://datatables.net/development/

DataTables author here - I completely agree that the API is far from the best, which is why v1.10 will include an entirely new "modern" API (with a shim for the old API to provide full backwards compatibility).

The prefix letters aren't random, but they aren't elegant either. When I first wrote DataTables I was working for a company which required the use of Hungarian notation in their coding standards, so I was trained to write that way - I've never changed it because I didn't want to break backwards compatibility. Having said that, v1.10 provides a camelCase layer, which will be what is documented at the API / options with 1.10. Again the Hungarian notation will be supported for full backwards compatibility.

v1.10 is available in github (1_10_wip branch) if you want to try it. It is pre-beta, but almost ready to roll as a beta - I just need to write the documentation.

1. Keep Excel spreadsheet in a shared network location

2. Set to autogenerate webpage on every save

3. Clean up crufty HTML with jQuery

4. Display using DataTables

5. Proit!

This hacky hackerson of a hack was great way to get around having to build a CRUD app and go through IT channels to have something deployed on the network, and still keep things simple enough for extremely entry-level end-users.

Thanks for DataTables, Allan!

Make DataTables editable with this addition: https://code.google.com/p/jquery-datatables-editable/

It is really fantastic for that live spreadsheet feel.

Paid support is excellent. I use DataTables in some client projects, and wanted to speed up my use of it.

I paid for support and had the author's full attention the same morning. Works like a charm.

Well this was random. I literally started using DataTables for the first time just today for a new project. I must admit, the Hungarian notation is a bit distracting at first. The documentation could be better as well.

In the past I've used dgrid with the DojoToolkit. It's not for everyone, but it was great to work with.

http://dojofoundation.org/packages/dgrid/

http://demos.dojotoolkit.org/demos/themePreviewer/demo.html

Using table management with my current robust Coffee script Nodejs project. I'm going to have Fun. Mostly I can only classified myself as a home-school ged self-study (Op Dev) but its always fun to read and work with other's code. do you have any idea when you will have 1.10 out in the public? is their a git hub I can look at? ..

Food for thought Magento maybe able to run some faster admin tables with this. though, I would think this would be a task in setting up. The Json is their but admin panels setup is another thing in Magento.

I'm using it in a project presently, it's a very powerful library. The project started simple.. but the table part quickly grow very complex and that plugin never let me down. The best part of the documentation is the examples IMHO.

There are also very good plugins[1] to use it on the backend..

[1] https://bitbucket.org/pigletto/django-datatables-view

Hell yeah, I used DataTables in my iTunes in the browser clone. [0] But it's not super new, not sure why it's up here. It also isn't the greatest for responsive design. That said, it's still great, and my favorite feature is search.

[0] https://github.com/nickdesaulniers/audiostream

I wrote a small library in Python for DataTables when I got tired over that there was no easy way of doing backend processing for it.

https://github.com/starstable/PonyTable

Warning, probably not PEP-8 and can probably be improved in a tons of places.

Do you still have to set the column widths explicitly? That was one of the main reasons I had to drop this lib, because we had dynamic data and I didn't want to deal with adding a bunch of JavaScript on top to resize columns on the fly when the data changed.

I use this in a ton of different projects. Besides the fact that it is an awesome library, I love pushing all of the sorting work to the client side (and telling anyone who complains about the speed that it's their browser's fault :) )

I used these when interning at Khan Academy this summer for an internal tool for video creators. Really very easy to get up and running, and looks good to boot.

Best thing to make sexy tables since the beginning of time

Does anyone know how this compares to jTable (http://www.jtable.org/)?

If you need editable tables, I wrote this http://handsontable.com/

It's a behemoth, but a very useful one.

Such a useful plug-in for CRUD WebApps.

Whats new about this? Used this in the past - not anymore - there are better alternatives these days.

Reply on news.ycombinator.com