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:
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.
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.
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!).
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.
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:
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!
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]
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
@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.
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?
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` .
Replies
Allan
The files are here: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3
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
Cheers,
Mike.
If you use the files that Allan provides above (the .css and .js) then it will fix your pagination buttons as well.
Tim
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
Allan
[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!
[code]
$('#memberLogs_filter label').contents().unwrap(); //strip off that label tag Bootstrap doesn't like
[/code]
Have solution for this
Tks
[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.
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
[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]
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
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