Bootstrap 3

tlloyduk

Does anyone have a fix for getting DataTools Editor working with Bootstrap 3 ?

Thanks

allan

Not yet I'm afraid. i will try to look at this tomorrow though.

Allan

tlloyduk

Thanks that would be awesome. Hopefully it's not too much of a big job

tlloyduk

Just wondered if you managed to take a look at this ? Would it help if I paid for a support ticket or similar? Please advise, thanks!

allan

Committed in here: https://github.com/DataTables/Plugins/commit/dec9bac

The files are here: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3

Allan

tlloyduk

Hi Allan

This seems to have sorted out a lot of the styling - many thanks

Not sure if more tweaks are required for Editor though. With these changes in place the New/Edit/Delete in the first example are not working and I can't click any rows in the table (the latter may be something non Bootstrap related tho, need to investigate a bit). See image:

http://snag.gy/kcO9W.jpg

Thanks

Tim

allan

Yes I think there probably is - I'll get back to you on this one! That was the main DataTables integration - it looks like TableTools and Editor need a little bit of work as well.

Allan

anodynepres

Basic styling looks ok with the addition of a an outer "row" div and a div with the new col-lg-* for width. I also modified the sDom entry in the table initialization script to use the col-lg-* instead of the span*. The one thing I can't seem to figure out, though, is what to change on the pagination buttons. Mine are showing up as a minimally styled ul. Any advice would be helpful.

Cheers,
Mike.

tlloyduk

Hi Mike

If you use the files that Allan provides above (the .css and .js) then it will fix your pagination buttons as well.

Tim

allan

I've just committed the changes needed for Bootstrap 3rc2 since they changed the grid system.

I've also updated the integration for Editor and TableTools. The latest files in the plug-ins repo will now work with rc2. Additionally you'll need the Editor integration file update which is available here: http://datatables.net/dev/editor-bootstrap-3/dataTables.editor.bootstrap.js .

It seems that quite a few things have changed in Bootstrap 3 (and apparently continue to change with the RCs) but these files should get you up and running with 3rc2.

I'd be interested in feedback on how you find the integration (positive or negative!).

Thanks,
Allan

CodeStig

Could you please add bootstrap styling to records per page drop down and search input box?

allan

The issue there is that DataTables doesn't actually have an option to add a class to those elements. I never saw the point of it since you could just use something like `div.dataTables_length input` as the CSS selector. But Bootstrap 3 wants the classes directly on the elements, so I might have to add this ability in v1.10.

Allan

CodeStig

Looking forward to v1.10 then. Thanks.

Joyrex

I'm currently updating our DataTables to BS3RC2, and I am currently working on the exact same thing - you can apply the needed BootStrap classes to the Length (records per page) elements by doing the following:

[code]$('#idofTable_length label select').addClass('form-control');
$('#idofTable_filter label input').addClass('form-control');[/code]

The issue I'm having is DataTables wraps the [code][/code] elements around the input and select elements (which BS3 does not), so as a result, the label for the Filter does not appear correctly. However, if you set form-inline on the main DataTables wrapper, then the code above works for the Length dropdown, assuming you have something like the following:
[code]
"oLanguage": {
"sLengthMenu": "_MENU_ Records per page"
}
[/code]

This will place the _MENU_ select before the text, and will align correctly. The filter text, however, so far does not (that's what brought me here in search of a solution). Hope this helps!

Joyrex

UPDATE: You can remove the wrapped [code][/code] by using jQuery's unwrap() method like so:
[code]
$('#memberLogs_filter label').contents().unwrap(); //strip off that label tag Bootstrap doesn't like
[/code]

CodeStig

Did anyone try this with a different localization?

marcelo_leo27

Hi, i have problem, no add class in input and select

Have solution for this

Tks

Joyrex

see my comment above that refers to this:

[code]
$('#idofTable_length label select').addClass('form-control');
$('#idofTable_filter label input').addClass('form-control');
[/code]

This will add the class "form-control" (needed for BS3 inputs) to the length and filter inputs in dataTables.

tlloyduk

Hi Allan

Great, I've just given this a go. Styling appears to be fixed now and the "New" button works - see http://snag.gy/USjSA.jpg

Couple of things with Editor:

1) I notice when adding a New entry for the first time there is strong strange bouncing transition before the validation messages appear. If you add another entry the validation messages slide out normally without the bounce effect. Not sure if that is intentional or not.

2) More serious, I can't seem to click any rows and therefore the Edit and Delete buttons never activate. This is the same issue as described here: http://datatables.net/forums/discussion/16141/bootstrap-datatable-with-native-editor/p1 in 2nd paragraph

Thanks,
Tim

allan

@Tim - regarding the post just above this one - it got caught in the spam filter so has been sitting on hold for a little while. I think with the latest changes everything should be working as expected now.

Allan

ankitwashere

Add this to the end of the datatable.bootstrap.css file
[code]

.dataTables_length > label > select,
.dataTables_filter > label > input[type="text"]
{
display: inline-block;

padding: 4px 6px;

font-size: 14px;
line-height: 20px;
color: #555555;
vertical-align: middle;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.dataTables_filter > label > input[type="text"]{
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.dataTables_filter > label > input[type="text"]:focus{
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
[/code]

krpn4k

Hi Allan,

I'm using the latest files that you mention here: http://datatables.net/forums/discussion/16675/twitter-bootstrap-3 for Bootstrap 3 integration.
And this is what my table looks like now:
http://snag.gy/xbyRC.jpg

I want to customize the Search box to look like an input-group in Bootstrap: http://getbootstrap.com/components/#input-groups.
Basically, this: http://snag.gy/nOeLN.jpg but with a search icon.

Could you please help me figure out how I can do that?

Thank you!

allan

You'd need to add a bit of Javascript in an fnInitComplete function which will add the HTML needed to the filtering element - which you can access using the selector `div.dataTables_filter` .

Allan

wellington1993

Extra Good Configs for Bootstrap:

http://devblog.rayonnant.net/2013/09/bootstrap-3-datatables-paging.html
http://devblog.rayonnant.net/search/label/Bootstrap
http://devblog.rayonnant.net/search/label/Boostrap%203