Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82451

Twitter Bootstrap 3

$
0
0
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.._
$.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')
    });
});

Viewing all articles
Browse latest Browse all 82451

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>