Retrieve subset of data without pagination

GregP

I might have missed this in the docs; if so, forgive my lengthy description and send me on my way!

So, I have a table that is using Server-Side processing. There are 1000 rows and 5 columns. With pagination enabled, DataTables will intelligently send the iDisplayStart and iDisplayLength to retrieve the right subset of data.

However, I don't really want pagination; it's an "overview" page, so we've decided that you get to view X number of records (probably 10) and if you want to see more (with pagination) you need to drill down into a different more expansive table.

Without pagination, DataTables defaults to retrieving the whole set (1000 records). How can I tell it to just retrieve the first 'X' records based on sort criteria?

PS, my continuous stream of questions is due to how awesome DataTables is... wanting to get the most out of it. Thanks for writing it, Allan!

allan

There are a couple of options that I can think of, but the "perfect" one will depend on what you want the information display to show. One option is simply to remove the pagination control from the table (the 'p' option in sDom). Another would be to "hack" the iTotalRecords and iTotalDisplayRecords parameters to just be ten - this will fool the client-side into thinking there are only ten options - or you could modify the SQL so there are only ten options reported back (you could use fnServerData to tell the server to execute this method, rather than the full one).

One more option is simply to render the table using regular HTML, and not have any server-side processing. Just render up 10 rows and let DataTables do it's thing on that table, then provide a link to the 'full' one.

Hopefully one of these will help :-)

Allan

GregP

Thanks, Allan.

The sDom method sounds like the first one to try. It amounts to a cosmetic change I want to make...which by its nature simply doesn't expose the option to the end user. I'll let you know how it goes. :D

GregP

Hi Allan,

Tried sDom with no luck. I'll preface this thread bump by saying that really all I have to do to effect my desired cosmetic change is add a new rule to my CSS to change its property to "display:none". My table has an ID, so I can target something like [code]#task_progress .dataTables_length { display: none }[/code] and it works fine.

That said, I would still be curious about how to use sDom to remove the element; I may need some sDom chops as the project advances.

In the examples, you add new wrapper divs such as "top" and "bottom", but I'm at a loss as to how to use sDom when NOT creating new divs. How do I just change what appears in the existing divs?

For example, the rendered table ends up with the following opening DIV:

[code][/code]

which in turn contains

[code][/code]

and

[code][/code]

Any ideas? Or is the sDom functionality incompatible with the jQuery UI functionality?

Cheers!

allan

The way sDom works ( http://datatables.net/usage/options#sDom ) is that each character is an option for the elements DataTables adds to the DOM to control the table. If you don't want a feature drop out the character. The two defaults are:

Normal: lfrtip
jQuery UI: <"H"lfr>t<"F"ip>

Note that 'H' and 'F' are special - as these add the classes that are needed for themeing. So if you what jQuery UI style without page length options, you can use:

sDom: <"H"fr>t<"F"ip>

Regards,
Allan

GregP

Awesome, that worked. Not sure how I missed the jQuery UI examples in the document, which makes it quite clear how to use it!

Unsurprisingly, my success led me down another path, as well. With the space freed up by eliminating the drop-down, there's lots of room to put the table's title in there instead of outside. I'm imagining that's a job for fnHeaderCallback. ;-)

[edit: on closer inspection, I think the HeaderCallback is not the tool for the job... any ideas?]

allan

Yeah - fnheaderCallback is for the TH elements in the table, not the wrapper around the table. For that, have a look at this example which sounds like it does almost exactly what you want: http://datatables.net/examples/advanced_init/dom_toolbar.html :-)

Allan

GregP

Heh, you beat me to a reply. I had 'intuited' this solution as well. I'm hoping to take it a step further so that the developer can include a title in markup (in H2 tags or whatever), and then use jQuery to retrieve its contents, add its contents to the div, then destroy the original H2. It's a bit of extra work, but makes modifying the HTML itself a lot easier than straight-up injection.

allan

You could just append the H2 tag - a one liner:

[code]
$("div.toolbar").append( $('#h2_id') );
[/code]
Styling might need to be taken into account, but it will do the move / "delete" for you nice and easy.

Allan

GregP

Very helpful pointer, Allan! I took the general advice and applied it programatically.

Given HTML looking something like this:
[code]

Current Transfers

...etc
[/code]

And multiple similarly-constructed tables (with shared classes where appropriate), I wanted to automagically swap the titles out for every table that needs it. To do this, I fire a function from the fnInitComplete callback:

[code]
"fnInitComplete": function() {
titleSwap($(this));
}
[/code]

Because the callback comes from the context of the table, $(this) passes along the table object to the function:

[code]
function titleSwap(obj) {
containerObject = obj.closest('.box');
headingObject = containerObject.children('h2');
toolbarObject = containerObject.find('.ui-toolbar').first();
toolbarObject.append(headingObject);
}
[/code]

Let me explain the traversal: jQuery's closest() function won't match to headings, or at least I couldn't get it to. But it turns out that getting the "container" div (with the class "box") from higher up proves helpful anyhow. So I get that 'box' and then go back down first for the header and then for the toolbar. Note: there are two toolbars (one in the header, one in the footer) so I also explicitly specify that I want the first. I don't think you have to, but I like explicit code where possible. Then I append the header object to this first toolbar object.

The final bit is purely cosmetic: if you were to just do the swap, you would see the H2 outside the table for a few moments, before it appeared inside the table. It's a visible "hiccup" that doesn't look any good.

All I had to do, of course, is set:

[code]
.box h2 { display: none }
.ui-toolbar h2 { display: block }
[/code]

Until the swap happens, the title is simply invisible. It's not a particularly problematic 'hiccup' for rendering.

allan

Very cool - thanks for posting the details!

Regards,
Allan