Twitter Bootstrap 3
Twitter Bootstrap 3
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]
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]
This discussion has been closed.
Replies
I'll get the changes up into the DataTables plug-ins repo soon :-)
Allan
Will this fix compatibility with DataTables Editor and Bootstrap 3.0 as well ?
Thanks
Tim
Regards,
Allan
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
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
Regards
This solved my problems.
Thanks Jowin.
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.
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]
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
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
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.
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
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]
[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
Allan
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?
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
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