DataTable Fundamentals Part 2

Continuing from Part 1 of my study on the fundamentals of jQuery DataTables I wanted to discuss a few more topics. In these examples I’ll refer to the following DataTable object using DataTables version 1.10.0+:

Settings

At some point you may wish to retrieve your DataTable settings in a certain scenario or event. This can be done a couple different ways:
Simply loop through these setting objects to retrieve all properties and values

Custom Settings

The above methods will work fine to retrieve any official settings. But what if you want to set a custom setting that makes since only for your project? To get to the value of a custom attribute you must drill deeper into the settings object by viewing the oInit property:

Re-Retrieve DataTable Object

Depending on your scenario you may have lost or do not have access to the original DataTable object. You can re-retrieve it without interfering with the table:
Alternatively, if you don’t know the TABLE id either you can refer to a global variable. Then you can loop through them and re-retrieve the object like we did above:

Removing DataTables

Any good plugin that manipulates the DOM should have a way to remove all transformations and events it has made without removing the element itself. DataTables has this built in:
Note: I’ve also had success with jQuery’s $.empty function to remove all data and event handlers when called on the DataTable’s parent.

Search on Enter

One of my annoyances is how DataTables will search on every keystroke. This is great if you are dealing with local data but if you are relying on ajax requests for data then this can be a lot of strain on the server. To override this functionality do this:
Note: Bootstrap 3.0 seems to remove the clear button in the filter textbox

Read More

DataTable Fundamentals Part 1

I’m a big fan of jQuery DataTables. It’s my new grid of choice for interfacing. I jumped on the bandwagon at at the release of 1.10.0 which was a major versioning change/re-working. The documentation was lacking a bit at the time so I had to do a lot of trial and error to figure things out. I used jqGrid for years before making the transition. I find DataTables to be cleaner (as far as object organization) and more understandable. I feel that any programmer that comes behind me will have an easier time deciphering code I’ve written for DataTables verses jqGrid. It also looks more like a table to me as opposed to some kind of widget. You can probably accomplish more advanced things with jqGrid, but a lot of that is unnecessary fluff that doesn’t lend itself to the real, business world.

Display Values

Some trivial features alluded me at first. Such as how do I modify the display without compromising the underlying data? Some record values don’t translate well for users. For instance, in a database record you may have a field with a value of stdenv, but you want to show it as Standard Envelope to the user. If your code continues to interact with the database you may need to retain that original value.

In jqGrid you would often use a formatter. To translate a date you may do something like this:
So how do you do this in DataTables? When working with this plugin I’m almost always using an ajax data source as objects. I thought I was translating this correctly by manipulating the ajax result via the ajax property but later found out that was changing the underlying data. Then I discovered I could change it in the createdRow property. That technique was okay but for every cell that renders there is two DOM writes (the write by the plugin, then my translated overwrite). Finally, I came across an elegant solution that makes me happy. I already have a columns property defined in my DataTable object:
To translate a value I use the render property. You can read about it here. It can be as simple as this:
You can also translate the data in these types of ways:
To set a default value use the defaultContent property. You can read about it here:

Sub-Sorting

Sometimes you want your grid to sub-sort related columns when sorting on a column. This is simple to declare as well using the orderData property. You can read about it here:
The column indexes are in the order they appear: name: 0, position: 1, date: 2. So clicking on position will sub-sort name. Likewise, sorting descending on position will sub-sort descending on name.

Read More

Show Bootstrap Tooltip Over Truncated Text

I had a need to prevent text-wrapping in a cell. I wanted the text to appear truncated to keep the row height consistent. The following worked well to crop the text and show an indicator of hidden text:
I referenced the classes like so:
Next, I wanted the user to be presented a tooltip if the text was truncated so they could see the full value. Here is my solution:
This snippet watches for mouse placement over the DIV. It then does some width comparisons to see if there is any hidden text. If so it creates a tooltip using Twitter Bootstrap and displays it. Simple as that.

BTW, you are not limited to simple tables. This will also work with jQuery Datatables. See my post on Datatable Tweaks.

See a DEMO.

Read More