From: Thierry Parmentelat Date: Tue, 26 Mar 2013 11:34:59 +0000 (+0100) Subject: this release uses bootstrap style for datatables instead of jquery-ui X-Git-Tag: myslice-django-0.1-3~38 X-Git-Url: http://git.onelab.eu/?p=myslice.git;a=commitdiff_plain;h=5972d4ba29058ef57e17c5e1ca534d082ac04c8a this release uses bootstrap style for datatables instead of jquery-ui not quite working yet but much nicer so it's worth pushing a bit --- diff --git a/Makefile b/Makefile index 9f56f869..ab0a822d 100644 --- a/Makefile +++ b/Makefile @@ -30,12 +30,14 @@ THIRD-PARTY-RESOURCES = THIRD-PARTY-RESOURCES += $(shell ls third-party/bootstrap/*/*) # just the single js as identified with a symlink THIRD-PARTY-RESOURCES += $(shell ls third-party/datatables/js/dataTables.js) +THIRD-PARTY-RESOURCES += $(shell ls third-party/datatables/js/DT_bootstrap.js) # likewise THIRD-PARTY-RESOURCES += $(shell ls third-party/jquery/js/jquery{,.min}.js) # for storing the visible status of plugins THIRD-PARTY-RESOURCES += $(shell ls third-party/jquery-html5storage/jquery.html5storage{,.min}.js) -# used in hazelnut -THIRD-PARTY-RESOURCES += $(shell ls third-party/jquery-ui/themes/base/jquery-ui.css) +# xxx we have jquery-ui in our codebase but we've now moved to using bootstrap instead +# so jquery-ui can probably be git removed altogether +#THIRD-PARTY-RESOURCES += $(shell ls third-party/jquery-ui/themes/base/jquery-ui.css) # spin comes in plain or min, + the jquery plugin, and our own settings THIRD-PARTY-RESOURCES += $(shell ls third-party/spin/*.js) # used in QueryCode diff --git a/plugins/hazelnut/hazelnut.js b/plugins/hazelnut/hazelnut.js index ca491460..4c741b31 100644 --- a/plugins/hazelnut/hazelnut.js +++ b/plugins/hazelnut/hazelnut.js @@ -123,7 +123,7 @@ //"sDom": 'lf<"#datatableSelectAll-'+ options.plugin_uuid+'">rtip', sDom: '<"H"Tfr>t<"F"ip>', bJQueryUI: true, - sPaginationType: 'full_numbers', + sPaginationType: 'bootstrap', // Handle the null values & the error : Datatables warning Requested unknown parameter // http://datatables.net/forums/discussion/5331/datatables-warning-...-requested-unknown-parameter/p2 aoColumnDefs: [{sDefaultContent: '',aTargets: [ '_all' ]}], diff --git a/plugins/hazelnut/hazelnut.py b/plugins/hazelnut/hazelnut.py index c46bfeef..26ce6285 100644 --- a/plugins/hazelnut/hazelnut.py +++ b/plugins/hazelnut/hazelnut.py @@ -27,12 +27,13 @@ class Hazelnut (Plugin): reqs = { 'js_files' : [ "js/hazelnut.js", "js/manifold.js", "js/manifold-query.js", - "js/dataTables.js", "js/with-datatables.js", + "js/dataTables.js", "js/DT_bootstrap.js", "js/with-datatables.js", "js/spin.presets.js", "js/spin.min.js", "js/jquery.spin.js", "js/unfold-helper.js", ] , 'css_files': [ "css/hazelnut.css" , - "css/demo_table.css", "css/demo_table_jui.css", "css/jquery-ui.css", + "css/demo_table.css", "css/demo_table_jui.css", +# "css/jquery-ui.css", ], } return reqs diff --git a/third-party/datatables/js/DT_bootstrap.js b/third-party/datatables/js/DT_bootstrap.js new file mode 100644 index 00000000..328733f2 --- /dev/null +++ b/third-party/datatables/js/DT_bootstrap.js @@ -0,0 +1,159 @@ +/* Set the defaults for DataTables initialisation */ +$.extend( true, $.fn.dataTable.defaults, { + "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", + "sPaginationType": "bootstrap", + "oLanguage": { + "sLengthMenu": "_MENU_ records per page" + } +} ); + + +/* Default class modification */ +$.extend( $.fn.dataTableExt.oStdClasses, { + "sWrapper": "dataTables_wrapper form-inline" +} ); + + +/* API method to get paging information */ +$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings ) +{ + return { + "iStart": oSettings._iDisplayStart, + "iEnd": oSettings.fnDisplayEnd(), + "iLength": oSettings._iDisplayLength, + "iTotal": oSettings.fnRecordsTotal(), + "iFilteredTotal": oSettings.fnRecordsDisplay(), + "iPage": oSettings._iDisplayLength === -1 ? + 0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ), + "iTotalPages": oSettings._iDisplayLength === -1 ? + 0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength ) + }; +}; + + +/* Bootstrap style pagination control */ +$.extend( $.fn.dataTableExt.oPagination, { + "bootstrap": { + "fnInit": function( oSettings, nPaging, fnDraw ) { + var oLang = oSettings.oLanguage.oPaginate; + var fnClickHandler = function ( e ) { + e.preventDefault(); + if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) { + fnDraw( oSettings ); + } + }; + + $(nPaging).addClass('pagination').append( + '' + ); + var els = $('a', nPaging); + $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler ); + $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler ); + }, + + "fnUpdate": function ( oSettings, fnDraw ) { + var iListLength = 5; + var oPaging = oSettings.oInstance.fnPagingInfo(); + var an = oSettings.aanFeatures.p; + var i, ien, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2); + + if ( oPaging.iTotalPages < iListLength) { + iStart = 1; + iEnd = oPaging.iTotalPages; + } + else if ( oPaging.iPage <= iHalf ) { + iStart = 1; + iEnd = iListLength; + } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) { + iStart = oPaging.iTotalPages - iListLength + 1; + iEnd = oPaging.iTotalPages; + } else { + iStart = oPaging.iPage - iHalf + 1; + iEnd = iStart + iListLength - 1; + } + + for ( i=0, ien=an.length ; i'+j+'') + .insertBefore( $('li:last', an[i])[0] ) + .bind('click', function (e) { + e.preventDefault(); + oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength; + fnDraw( oSettings ); + } ); + } + + // Add / remove disabled classes from the static elements + if ( oPaging.iPage === 0 ) { + $('li:first', an[i]).addClass('disabled'); + } else { + $('li:first', an[i]).removeClass('disabled'); + } + + if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) { + $('li:last', an[i]).addClass('disabled'); + } else { + $('li:last', an[i]).removeClass('disabled'); + } + } + } + } +} ); + + +/* + * TableTools Bootstrap compatibility + * Required TableTools 2.1+ + */ +if ( $.fn.DataTable.TableTools ) { + // Set the classes that TableTools uses to something suitable for Bootstrap + $.extend( true, $.fn.DataTable.TableTools.classes, { + "container": "DTTT btn-group", + "buttons": { + "normal": "btn", + "disabled": "disabled" + }, + "collection": { + "container": "DTTT_dropdown dropdown-menu", + "buttons": { + "normal": "", + "disabled": "disabled" + } + }, + "print": { + "info": "DTTT_print_info modal" + }, + "select": { + "row": "active" + } + } ); + + // Have the collection use a bootstrap compatible dropdown + $.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, { + "collection": { + "container": "ul", + "button": "li", + "liner": "a" + } + } ); +} + + +/* Table initialisation */ +$(document).ready(function() { + $('#example').dataTable( { + "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>", + "sPaginationType": "bootstrap", + "oLanguage": { + "sLengthMenu": "_MENU_ records per page" + } + } ); +} ); \ No newline at end of file diff --git a/third-party/datatables/js/DT_bootstrap.js.url b/third-party/datatables/js/DT_bootstrap.js.url new file mode 100644 index 00000000..4a3b04ae --- /dev/null +++ b/third-party/datatables/js/DT_bootstrap.js.url @@ -0,0 +1 @@ +http://datatables.net/media/blog/bootstrap_2/DT_bootstrap.js