Not sure how to modify sDom

krokonoster

FYI, never used live.datatables.net, but tried it and my code should be here: http://live.datatables.net/ovuyul

I'm using twitter bootstrap and have a custom theme (bought on WrapBootstrap, nl. Unicorn Admin Theme)
From the demo, I'm supposed to use datatables as follows, which works great on tables I create when the page load:
$('#tblItems').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<""l>t<"F"fp>'
});

However, I needed to get server side processing working, and followed this article: http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part

Works fantastic as well, though the code used in that article render my table funny (guess because of my custom theme)

So combining what I had and this I ended up with the following:
$(document).ready(function () {
var url = '@Url.Action(MVC.ClientArea.Member.AjaxHandler())';
$('#tblItems').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<""l>t<"F"fp>',
"bServerSide": true,
"sAjaxSource": url,
"bProcessing": true,
"aoColumns": [
{
"sName": "Id",
"bSearchable": false,
"bSortable": false
},
{ "sName": "Name" },
{ "sName": "Company" },
{ "sName": "IdentityNumber" },
{ "sName": "CellPhoneNumber" }
]
});
});

However, unless I comment out ""sDom": '<""l>t<"F"fp>'," I will this error in FireFox:
TypeError: an is undefined : for ( var i=0, iLen=an.length ; i

allan

> I'm using twitter bootstrap

The default sDom for Bootstrap is: `"<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",` :
https://github.com/DataTables/Plugins/blob/master/integration/bootstrap/dataTables.bootstrap.js#L3

So you should probably start from that.

> <""l>t<"F"fp>

I'm not sure what DataTables makes of the empty quotes actually - that might be a bug. You could just remove them as they do nothing there.

Something has gone properly wrong with the 'live' page - syntax errors all over the shop form the framework, which I didn't know was possible :-).

What changes to you want to make to the bootstrap default sDom?

Allan

krokonoster

I start "getting" it now.
This guy's theme does not show the "Showing 1 to 10 of 12 entries" part, which I actually wanted.
using "sDom": 'rti<"F"p>' show that thing (what you call it)

But because no css was created for "dataTables_info" (above) it push things out of place.

Guess I just need to style it and all will great. rigth?

krokonoster

"sDom": 'rti<"pagination"p>' means add "pagination" css class to r, t and i?
i is what I want to change to something else so I must do something in the line of: (Asking!!!)

sDom": 'rt<"pagination"p>i<"someclass">' ??

allan

> Guess I just need to style it and all will great. right?

That's it - yes. DataTables will insert the element, but if you want to style it - you need to do so :-).

> "sDom": 'rti<"pagination"p>' means add "pagination" css class to r, t and i?

With that you get:

[code]
processing
table
info

paging

[/code]

Allan

krokonoster

making more sense bit by bit.
Did not realize that last one made my search box disappear.
Figured for now use nothing, and go over these stuff properly later.
Awesome tool (Datatables) and definitely won't be time wasted.