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 9f56f86..ab0a822 100644 (file)
--- 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 ca49146..4c741b3 100644 (file)
--- 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 c46bfee..26ce628 100644 (file)
--- 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 (file)
index 0000000..328733f
--- /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(
+                               '<ul>'+
+                                       '<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
+                                       '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
+                               '</ul>'
+                       );
+                       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<ien ; i++ ) {
+                               // Remove the middle elements
+                               $('li:gt(0)', an[i]).filter(':not(:last)').remove();
+
+                               // Add the new list items and their event handlers
+                               for ( j=iStart ; j<=iEnd ; j++ ) {
+                                       sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
+                                       $('<li '+sClass+'><a href="#">'+j+'</a></li>')
+                                               .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 (file)
index 0000000..4a3b04a
--- /dev/null
+++ b/third-party/datatables/js/DT_bootstrap.js.url
@@ -0,0 +1 @@
+http://datatables.net/media/blog/bootstrap_2/DT_bootstrap.js