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.._
Further down fix the pagination. ~L:51 - Yes I removed the addClass
Now to get it to look nice I do this .. _Here is where I could use a second eye.._
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.._
$.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": "" } } );
Further down fix the pagination. ~L:51 - Yes I removed the addClass
$(nPaging).append( '<ul class="pagination">'+ '<li class="prev disabled"><a href="#"><i class="icon-double-angle-left"></i> '+oLang.sPrevious+'</a></li>'+ '<li class="next disabled"><a href="#">'+oLang.sNext+' <i class="icon-double-angle-right"></i></a></li>'+ '</ul>' );
Now to get it to look nice I do this .. _Here is where I could use a second eye.._
$(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('<i class="icon-remove-circle icon-large"></i>') 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') }); });