Twitter Bootstrap 3

rh0dium

Hi all,

For those of you who are playing with the new Twitter Bootstrap 3 RC1. Here are my local changes I had to make to get it working. I've also added in my own "stuff" to get it to look pretty ;) Hopefully some of you really smart datatable js guys can simplify this a bit..

bootstrap_datatables.js (the one from - http://datatables.net/blog/Twitter_Bootstrap_2)
_Get the sDom fixed up. Also remove the sSearch String.._
[code]
$.extend( true, $.fn.dataTable.defaults, {
"sDom": "<'row'<'col-6'f><'col-6'l>r>t<'row'<'col-6'i><'col-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "Show _MENU_ Rows",
"sSearch": ""
}
} );
[/code]

Further down fix the pagination. ~L:51 - Yes I removed the addClass
[code]
$(nPaging).append(
''+
' '+oLang.sPrevious+''+
''+oLang.sNext+' '+
''
);
[/code]

Now to get it to look nice I do this .. _Here is where I could use a second eye.._
[code]
$(function(){
$('.datatable').each(function(){
var datatable = $(this);
// SEARCH - Add the placeholder for Search and Turn this into in-line formcontrol
var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
search_input.attr('placeholder', 'Search')
search_input.addClass('form-control input-small')
search_input.css('width', '250px')

// SEARCH CLEAR - Use an Icon
var clear_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] a');
clear_input.html('')
clear_input.css('margin-left', '5px')

// LENGTH - Inline-Form control
var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
length_sel.addClass('form-control input-small')
length_sel.css('width', '75px')

// LENGTH - Info adjust location
var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_info]');
length_sel.css('margin-top', '18px')
});
});
[/code]

allan

Very nice - thanks for this!

I'll get the changes up into the DataTables plug-ins repo soon :-)

Allan

tlloyduk

Hi Guys

Will this fix compatibility with DataTables Editor and Bootstrap 3.0 as well ?

Thanks
Tim

allan

Just to merge the two threads together - I've just posted here about Editor integration with Bootstrap 3: http://datatables.net/forums/discussion/16809

Regards,
Allan

phecdaret

Hi Guys,

Thanks for a great post!

I am having trouble getting the final details in place though. Here is how it looks at the moment:

http://shareviewer.com/capture.png

I have placed an alert-box in the "Now to get it to look nice I do this"-section, it gets called but it does not go inside the each-function. Where should this code be placed to work properly?

Also, it seems like "Show x number of rows"-drop-down has not been styled?

Kind regards

btafoya

I am too working through this. BS3 r2 changed is what happened. I will post my fix once I get it worked out.

Jowin

Thanks @rh0dium, was looking around for a quickfix to datatables myself.

I added a tweak so that the top renders correctly:

Changed sDom for $.fn.dataTable.defaults to :
[code]
"sDom": "<'row'<'pull-right'f><'pull-left'l>r<'clearfix'>>t<'row'<'pull-left'i><'pull-right'p><'clearfix'>>"
[/code]

https://github.com/Jowin/Datatables-Bootstrap3

phecdaret

Has anyone come up with a complete fix to Bootstrap v3.0.0 yet?

Regards

danielgmarcos

Check Jowin works on https://github.com/Jowin/Datatables-Bootstrap3/

This solved my problems.

Thanks Jowin.

phecdaret

Thanks!

thaduy

Hi Allan,

First, thanks for the great plugin.

I have a problem when integrated the datatabes with twitter boostrap3. I cannot set the width for columns as I want even I set bAutoWidth = false. The width of columns still be generated automatically.

Here are some codes to markup

<!-- CSS import -->


<!-- JS import -->






Del
UserID
User Full Name
Password
User Category







var userMasterColumns = [
{
"mData" : "deleteF",
"bSortable" : false,
"bSearchable" : false,
"mRender" : function(data, type, row) {
return renderHtmlCheckbox(data);
}
},
{
"mData" : "username",
"mRender" : function(data, type, row) {
if (row.username == null || row.username == '') {
return '';
}
return data;
}
},
{
"mData" : "userNm",
"mRender" : function(data, type, row) {
if (row.username == null || row.username == '') {
return '';
}
return data;
}
},
{
"mData" : "password",
"mRender" : function(data, type, row) {
if (row.username == null || row.username == '') {
return '';
}
return data;
}

},
{
"mData" : "userCategory",
"mRender" : function(data, type, row) {
if (row.username == null || row.username == '') {
return '0080';
}
return '0080';
}
} ];


My JS code to initialize the datatable:
function initUserMasterDatatable() {

userMasterDatatable = $('#user_master_list')
.dataTable(
{
"bLengthChange" : false,
"sScrollY" : "400px",
"bPaginate" : false,
"bFilter" : false,
"bInfo" : false,
"bAutoWidth": false,
"sAjaxSource" : webcontext + "/master/user/ajax/list",
"bServerSide" : true,
'bProcessing' : true,
"fnServerData" : function(sSource, aoData, fnCallback,
oSettings) {
$.getJSON(sSource, aoData, function(json) {
fnCallback(json)
});
},
"aoColumns" : userMasterColumns,

});
}

Please help me to solve this.

satrapal

Hi guys,

here is my example to connect DataTables with Bootstrap 3.0.0.

Step 1 - Download CSS, JS and IMG support files
1. Go to https://github.com/DataTables/Plugins/tree/master/integration/bootstrap
2. Download icons from image folder and paste it to your images directory
3. Download CSS and JS support files from directory 3 and link it in your app
4. Edit dataTables.bootstrap.css and check paths to sorting icons

Step 2 - Add form-control class and custom width (required for form-inline) to input and select fields
1. Create fnPreDrawCallback (check final code bottom, if you don't know how)
2. Add this lines:
[code]$('.dataTables_filter input').addClass('form-control input-sm');
$('.dataTables_filter input').css('width', '200px');
$('.dataTables_length select').addClass('form-control input-sm');
$('.dataTables_length select').css('width', '75px');[/code]

Step 3 - Table
1. Add this line into tag:
[code]cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered"[/code]


Step 4 - Placeholder instead of text label (optional)
1. If you are using localization file, just edit this file and set sSearch variable to ""
2. If not, add this lines to dataTable() function:
[code]"oLanguage": {
"sSearch": ""
}[/code]
3. Add this line to fnPreDrawCallback:
[code]$('.dataTables_filter input').attr('placeholder', 'Search');[/code]

Step 5 - Final example
[code]

$(document).ready(function() {
$('#myTickets').dataTable({
"oLanguage": {
"sUrl": "/js/jquery.dataTables.cs.i18n.js",
},
"sAjaxSource": {link myTicketsJson!},
"aoColumns": [
{"mData": "id"},
{"mData": "subject"},
{"mData": "text"}
],
"fnPreDrawCallback": function(oSettings, json) {
$('.dataTables_filter input').addClass('form-control input-sm');
$('.dataTables_filter input').css('width', '200px');
$('.dataTables_length select').addClass('form-control input-sm');
$('.dataTables_length select').css('width', '75px');
}
});
});



ID
Subject
Text



[/code]

allan

I've just committed a change to DataTables core which let's DataTables set the classes needed for the input and select elements used by DataTables.

The updated DataTables file is currently available here:
https://github.com/DataTables/DataTables/tree/1_10_wip/media/js

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

Allan

florincosmin

Jowin work https://github.com/Jowin/Datatables-Bootstrap3/ solved my problems. It works very well. Thanks @danielgmarcos and @Jowin

danieljames

Thanks allan. We're looking forward to version 1.10.

ellipsis

When using the bootstrap-datatables.js with bootstrap version 1.9_ I needed to adjust the function _fnFeatureHtmlLength in jquery.datables.js

I added a class name that was defined in the new bootstrap-datatables.js

[code]

function _fnFeatureHtmlLength ( oSettings )
{
if ( oSettings.oScroll.bInfinite )
{
return null;
}

/* This can be overruled by not using the _MENU_ var/macro in the language variable */
var sName = 'name="'+oSettings.sTableId+'_length"';
var sClass = ' class="'+oSettings.oClasses.sLengthSelect+'"';
var sStdMenu = '';
var i, iLen;

[/code]

allan

Correct - the class is only used in the latest dev code of DataTables. Thanks for sharing your 1.9- code with us.

Allan

bentleybrad

Allan,

Can I make a suggest here in regards to Bootstrap going forward... Would it make sense to have an oSetting for bBootstrap where the user selects either true/false, or version number if we wanted to get fancy (2 vs 3, etc)?

As an example... in fnFeatureHtmlFilter, I needed to the search box to behave as a proper Bootstrap 3 form element, so change the following:

[code]
var sSearchStr = oSettings.oLanguage.sSearch;
sSearchStr = (sSearchStr.indexOf('_INPUT_') !== -1) ?
sSearchStr.replace('_INPUT_', '') :
sSearchStr==="" ? '' : sSearchStr+' ';
[/code]

to

[code]
var bBootstrap = oSettings.bBootstrap;
if (bBootstrap)
{
sSearchStr = '' +
'' +
'' +
'';
}
else
{
sSearchStr = (sSearchStr.indexOf('_INPUT_') !== -1) ?
sSearchStr.replace('_INPUT_', '') :
sSearchStr==="" ? '' : sSearchStr+' ';
}
[/code]

and have added a formal oSetting like the following (false by default)

[code]
$('#example).dataTable( {
"bBootstrap": true
});
[/code]

This is just a hook/hack for me at the moment, but thought it might prove useful for you going forward. Seems to a bit cleaner than juggling a second JS file. Keep up the great work.

allan

Thanks for the suggestion, but not integrated directly into DataTables core no this won't happen.

The reason being that Bootstrap might not be used on a site, and therefore you wouldn't want the weight of the Bootstrap integration. Just the same as if you are using Bootstrap you wouldn't want the weight of Foundation or jQuery UI integration.

I realise that at the moment jQuery UI is in the core, but that will be removed in 1.11 being split into a separate theme file, like Bootstrap and Foundation currently are for exactly this reason.

It also means that DataTables releases are not tied to version of external libraries which would be a dependency nightmare.

Allan

bentleybrad

I am very happy you said that :), and had based the previous suggestion on the jquery UI coupling that I noticed. I was actually looking for a counterpart to oLanguage.sLengthMenu that I could provide control over the sSearch input field markup externally. sSearch only provides access to the faux label. Again, great tool.

ellipsis

I forgot to post the filter adjustment for the datatables-bootstrap.js to work with datatables 1.9..

So in jquery.dataTables.js (+-row 2070) change to:

[code]
function _fnFeatureHtmlFilter ( oSettings )
{
var oPreviousSearch = oSettings.oPreviousSearch;

var sSearchStr = oSettings.oLanguage.sSearch;
sSearchStr = (sSearchStr.indexOf('_INPUT_') !== -1) ?
sSearchStr.replace('_INPUT_', '') :
sSearchStr==="" ? '' : sSearchStr+' ';

var nFilter = document.createElement( 'div' );
nFilter.className = oSettings.oClasses.sFilter;
nFilter.innerHTML = ''+sSearchStr+'';
if ( !oSettings.aanFeatures.f )
.....
[/code]

krpn4k

I am using the latest files from https://github.com/DataTables/DataTables/tree/1_10_wip/media/js and https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3. Except I am using jquery-1.10.2 because the index.html points to 1.10.2 rather than the 1.10.1 from /js folder on github. I cannot get the index.html to work when I add "sPaginationType": "bootstrap" to the dataTables.bootstrap.js like so:

[code]
/* Set the defaults for DataTables initialisation */
$.extend( true, $.fn.dataTable.defaults, {
"sDom":
"<'row'<'col-xs-6'l><'col-xs-6'f>r>"+
"t"+
"<'row'<'col-xs-6'i><'col-xs-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"sSearch": ""
}
} );
[/code]

I get an exception: Uncaught TypeError: Cannot call method 'fnInit' of undefined pointing to jquery.dataTables.js:3114:

[code]
function _fnFeatureHtmlPaginate ( settings )
{
var
type = settings.sPaginationType,
plugin = DataTable.ext.pager[ type ],
modern = typeof plugin === 'function',
redraw = function( settings ) {
_fnDraw( settings );
},
node = $('').addClass( settings.oClasses.sPaging + type )[0],
features = settings.aanFeatures;

if ( ! modern ) {
plugin.fnInit( settings, node, redraw );
} // THIS IS LINE 3114
[/code]

But cannot figure out what is wrong with this.
Any suggestions would be greatly appreciated.

here is the datatables debug link: http://debug.datatables.net/ovejat

Thanks!

allan

You are using DataTables from a branch that is no longer maintained. 1.10 as been merged to master: https://github.com/DataTables/DataTables/

Allan

krpn4k

Thanks, Allan. I got the jquery.dataTables.js file from the master branch, but I still get the same error, except it's pointing to a different line number now: 3157. Could I be missing something else?

allan

Can you link me to a test page showing the problem please? It seems to be running okay for me here.

Allan

JohnEzlab

From reading this thread I see 3 options for implementing BS3 integration:

1. Use the solution provided by jowin: https://github.com/Jowin/Datatables-Bootstrap3/
2. Upgrade to 1.10.0-dev and use the BS3 files from here: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3
3. If using 1.9_ then implement the changes highlighted by ellipsis

Do any of these solutions apply the responsive design of BS3 to datatables? I have become aware of a repo to implement this (https://github.com/Comanche/datatables-responsive) and was wondering if it were necessary?

allan

> Do any of these solutions apply the responsive design of BS3 to datatables?

Not as far as I am aware. You need an extra library such as Comanche's to add responsive behaviour - since it requires adding and removing columns dynamically.

Allan

arielpontes

krpn4k , I had the exact same problem as you. After losing some time I just stopped setting the "sPaginationType" parameter altogether to see what happened and it just worked. The "bootstrap" option doesn't exist, you can see the valid options around line 13534 of the jquery.dataTables.js file. I tested some of the options and the bootstrap styles were applied to all of them automatically.

allan

If the Bootstrap pagination type isn't available, then you've not included the Bootstrap integration files. The instructions for working with Bootstrap are available here: http://next.datatables.net/manual/styling/bootstrap

Allan

jchan1314

Thanks Jowin. I have put the Jowin bs_full example up on JSFiddle: http://jsfiddle.net/GJYfe/1/ Note that the images (arrows indicating sorting) are not shown in JSFiddle because there's no way to upload it.

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