Bugzilla – Attachment 6468 Details for
Bug 6836
jQuery plugin Datatables integration http://wiki.koha-community.org/wiki/DataTables_HowTo
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Signed-off Owen patch styling and using DataTable in reading history
0003-Bug-6836-follow-up-Working-on-CSS-to-make-more-like-.patch (text/plain), 13.29 KB, created by
Frédéric Demians
on 2011-11-30 13:48:41 UTC
(
hide
)
Description:
Signed-off Owen patch styling and using DataTable in reading history
Filename:
MIME Type:
Creator:
Frédéric Demians
Created:
2011-11-30 13:48:41 UTC
Size:
13.29 KB
patch
obsolete
>From 2f7d0e5285eab86f4fda3cfc3ebb9d3fa7c159fd Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Mon, 14 Nov 2011 08:25:48 -0500 >Subject: [PATCH 3/3] Bug 6836 follow-up: Working on CSS to make more like > existing interface >MIME-Version: 1.0 >Content-Type: text/plain; charset=UTF-8 >Content-Transfer-Encoding: 8bit > >- Changing default styles for Datatables pager, filter, etc. to > make it more like the style we have now on table pagers >- Adding another paging style via a plugin function in js/datatables.js > to give us a "four_button" option (more like the old tablesorter.js > pager). >- Tweaking configuration on serials-home.tt and adding the same to > readingrec.tt > >I don't have much serials data so I added it to readingrec.tt as well. > >Signed-off-by: Frédéric Demians <f.demians@tamil.fr> > >I confirm Owen styling is effective both in readingrec.tt (efficent on large >reading history) and in serials-home.pl page. >--- > koha-tmpl/intranet-tmpl/prog/en/css/datatables.css | 157 +++++++++++++++++++- > koha-tmpl/intranet-tmpl/prog/en/js/datatables.js | 101 +++++++++++++ > .../prog/en/modules/members/readingrec.tt | 26 +-- > .../prog/en/modules/serials/serials-home.tt | 3 +- > 4 files changed, 266 insertions(+), 21 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css b/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css >index e069b93..fbd919c 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css >+++ b/koha-tmpl/intranet-tmpl/prog/en/css/datatables.css >@@ -3,15 +3,15 @@ input.search_init { > } > .sorting_asc { > padding-right: 19px; >- background: url("../../img/datatables/sort_asc.png") no-repeat scroll right center #EEEEEE; >+ background: url("../../img/asc.gif") no-repeat scroll right center #EEEEEE; > } > .sorting_desc { > padding-right: 19px; >- background: url("../../img/datatables/sort_desc.png") no-repeat scroll right center #EEEEEE; >+ background: url("../../img/desc.gif") no-repeat scroll right center #EEEEEE; > } > .sorting { > padding-right: 19px; >- background: url("../../img/datatables/sort_both.png") no-repeat scroll right center #EEEEEE; >+ background: url("../../img/ascdesc.gif") no-repeat scroll right center #EEEEEE; > } > .sorting_asc_disabled { > padding-right: 19px; >@@ -26,6 +26,157 @@ input.search_init { > background-color: #EEEEEE; > } > >+div.top {clear : both; } >+ >+div.top.pager, >+div.bottom.pager { >+ background-color : #E5E5E5; >+ padding : 0; >+} >+ >+div.bottom.pager div.dataTables_paginate.paging_full_numbers, >+div.bottom.pager div.dataTables_paginate.paging_four_button { >+ border-right-width : 0; >+} >+ >+div.dataTables_filter, >+div.dataTables_length, >+div.dataTables_info, >+div.dataTables_paginate { >+ float: left; >+ padding : .3em .5em .3em .5em; >+ >+} >+div.dataTables_length { >+ border-right : 1px solid #686868; >+ line-height:1.9em; >+} >+div.dataTables_info { >+ border-right : 1px solid #AAA; >+ line-height:1.9em; >+} >+div.dataTables_length, >+div.dataTables_filter { >+ border-left : 1px solid #FFF; >+} >+div.dataTables_filter { >+ line-height : 1.9em; >+} >+div.dataTables_paginate { >+ background-color : #F4F4F4; >+ font-size: 110%; >+ padding : 0; >+} >+ >+.paging_full_numbers span.paginate_button, >+.paging_full_numbers span.paginate_active { >+ border-right : 1px solid #AAA; >+ border-left : 1px solid #FFF; >+ display : block; >+ float : left; >+ line-height:1.6em; >+ padding: .3em .7em; >+ cursor: pointer; >+} >+ >+.paging_full_numbers span.paginate_button { >+ color : #0000CC; >+} >+.paging_full_numbers span.paginate_button.first { >+ background-image : url('../../img/arrow-first.png'); >+ background-repeat: no-repeat; >+ background-position : 2px center; >+ padding-left : 2em; >+} >+.paging_full_numbers span.paginate_button.previous { >+ background-image : url('../../img/arrow-back.png'); >+ background-repeat: no-repeat; >+ background-position : 2px center; >+ padding-left : 2em; >+} >+.paging_full_numbers span.paginate_button.next { >+ background-image : url('../../img/arrow-next.png'); >+ background-repeat: no-repeat; >+ background-position : right center; >+ padding-right : 2em; >+} >+.paging_full_numbers span.paginate_button.last { >+ background-image : url('../../img/arrow-last.png'); >+ background-repeat: no-repeat; >+ background-position : right center; >+ border-right : 1px solid #686868; >+ padding-right : 2em; >+} >+div.bottom.pager .paging_full_numbers span.paginate_button.last { >+ border-right-width : 0; >+} >+.paging_full_numbers span.paginate_active { >+ background-color : #FFFFEA; >+ color : #000; >+ font-weight: bold; >+} >+ >+.paging_full_numbers span.paginate_button:hover { >+ background-color: #FFC; >+} >+ >+.paging_full_numbers span.paginate_button.paginate_button_disabled { >+ color : #666; >+} >+ >+/* Two-button version */ >+ >+div.dataTables_paginate.paging_two_button, >+div.dataTables_paginate.paging_four_button { >+ background-color : transparent; >+ border-right : 1px solid #686868; >+ border-left : 1px solid #FFF; >+ line-height : 1.8em; >+} >+.paginate_disabled_first, >+.paginate_enabled_first, >+.paginate_disabled_previous, >+.paginate_enabled_previous, >+.paginate_disabled_next, >+.paginate_enabled_next, >+.paginate_disabled_last, >+.paginate_enabled_last { >+ float: left; >+ height: 16px; >+ margin: .5em; >+ width: 16px; >+} >+.paginate_disabled_first { >+ background-image: url("../../img/first-disabled.png"); >+} >+.paginate_enabled_first { >+ background-image: url("../../img/first.png"); >+ cursor: pointer; >+} >+.paginate_disabled_previous { >+ background-image: url("../../img/prev-disabled.png"); >+} >+.paginate_enabled_previous { >+ background-image: url("../../img/prev.png"); >+ cursor: pointer; >+} >+.paginate_disabled_next { >+ background-image: url("../../img/next-disabled.png"); >+} >+.paginate_enabled_next { >+ background-image: url("../../img/next.png"); >+ cursor: pointer; >+} >+.paginate_disabled_last { >+ background-image: url("../../img/last-disabled.png"); >+} >+.paginate_enabled_last { >+ background-image: url("../../img/last.png"); >+ cursor: pointer; >+} >+ >+ >+/* > table.display { > width: 100%; > } >diff --git a/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js b/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js >index 9ae078d..62bf24b 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js >+++ b/koha-tmpl/intranet-tmpl/prog/en/js/datatables.js >@@ -278,3 +278,104 @@ function replace_html_date( original_node, id, format ) { > script.text = script_content; > $(original_node).append( script ); > } >+$.fn.dataTableExt.oPagination.four_button = { >+ /* >+ * Function: oPagination.four_button.fnInit >+ * Purpose: Initalise dom elements required for pagination with a list of the pages >+ * Returns: - >+ * Inputs: object:oSettings - dataTables settings object >+ * node:nPaging - the DIV which contains this pagination control >+ * function:fnCallbackDraw - draw function which must be called on update >+ */ >+ "fnInit": function ( oSettings, nPaging, fnCallbackDraw ) >+ { >+ nFirst = document.createElement( 'span' ); >+ nPrevious = document.createElement( 'span' ); >+ nNext = document.createElement( 'span' ); >+ nLast = document.createElement( 'span' ); >+ >+/* nFirst.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sFirst ) ); >+ nPrevious.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sPrevious ) ); >+ nNext.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sNext ) ); >+ nLast.appendChild( document.createTextNode( oSettings.oLanguage.oPaginate.sLast ) );*/ >+ >+ nFirst.className = "paginate_button first"; >+ nPrevious.className = "paginate_button previous"; >+ nNext.className="paginate_button next"; >+ nLast.className = "paginate_button last"; >+ >+ nPaging.appendChild( nFirst ); >+ nPaging.appendChild( nPrevious ); >+ nPaging.appendChild( nNext ); >+ nPaging.appendChild( nLast ); >+ >+ $(nFirst).click( function () { >+ oSettings.oApi._fnPageChange( oSettings, "first" ); >+ fnCallbackDraw( oSettings ); >+ } ); >+ >+ $(nPrevious).click( function() { >+ oSettings.oApi._fnPageChange( oSettings, "previous" ); >+ fnCallbackDraw( oSettings ); >+ } ); >+ >+ $(nNext).click( function() { >+ oSettings.oApi._fnPageChange( oSettings, "next" ); >+ fnCallbackDraw( oSettings ); >+ } ); >+ >+ $(nLast).click( function() { >+ oSettings.oApi._fnPageChange( oSettings, "last" ); >+ fnCallbackDraw( oSettings ); >+ } ); >+ >+ /* Disallow text selection */ >+ $(nFirst).bind( 'selectstart', function () { return false; } ); >+ $(nPrevious).bind( 'selectstart', function () { return false; } ); >+ $(nNext).bind( 'selectstart', function () { return false; } ); >+ $(nLast).bind( 'selectstart', function () { return false; } ); >+ }, >+ >+ /* >+ * Function: oPagination.four_button.fnUpdate >+ * Purpose: Update the list of page buttons shows >+ * Returns: - >+ * Inputs: object:oSettings - dataTables settings object >+ * function:fnCallbackDraw - draw function which must be called on update >+ */ >+ "fnUpdate": function ( oSettings, fnCallbackDraw ) >+ { >+ if ( !oSettings.aanFeatures.p ) >+ { >+ return; >+ } >+ >+ /* Loop over each instance of the pager */ >+ var an = oSettings.aanFeatures.p; >+ for ( var i=0, iLen=an.length ; i<iLen ; i++ ) >+ { >+ var buttons = an[i].getElementsByTagName('span'); >+ if ( oSettings._iDisplayStart === 0 ) >+ { >+ buttons[0].className = "paginate_disabled_first"; >+ buttons[1].className = "paginate_disabled_previous"; >+ } >+ else >+ { >+ buttons[0].className = "paginate_enabled_first"; >+ buttons[1].className = "paginate_enabled_previous"; >+ } >+ >+ if ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() ) >+ { >+ buttons[2].className = "paginate_disabled_next"; >+ buttons[3].className = "paginate_disabled_last"; >+ } >+ else >+ { >+ buttons[2].className = "paginate_enabled_next"; >+ buttons[3].className = "paginate_enabled_last"; >+ } >+ } >+ } >+}; >\ No newline at end of file >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt >index f1554f0..0fa1753 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/readingrec.tt >@@ -1,21 +1,16 @@ > [% INCLUDE 'doc-head-open.inc' %] > <title>Circulation History for [% INCLUDE 'patron-title.inc' %]</title> > [% INCLUDE 'doc-head-close.inc' %] >-<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tablesorter.min.js"></script> >-<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tablesorter.pager.js"></script> >+<link rel="stylesheet" type="text/css" href="/intranet-tmpl/prog/en/css/datatables.css" /> >+<script type="text/javascript" src="/intranet-tmpl/prog/en/lib/jquery/plugins/jquery.dataTables.min.js"></script> >+<script type="text/javascript" src="/intranet-tmpl/prog/en/js/datatables.js"></script> > <script type="text/javascript" id="js">$(document).ready(function() { >- $.tablesorter.addParser({ >- id: 'articles', >- is: function(s) {return false; }, >- format: function(s) { return s.toLowerCase().replace(/^(the|an|a) /,''); }, >- type: 'text' >- }); >- $.tablesorter.defaults.widgets = ['zebra']; >- $("#table_readingrec").tablesorter({[% IF ( dateformat_metric ) %] >- dateFormat: 'uk',[% END %] >- sortList: [[8,1]], >- headers: { 1: { sorter: 'articles' }, 9: { sorter: 'shortDate'} } >- }).tablesorterPager({container: $("#pagertable_readingrec"),positionFixed: false,size: 20}); >+ $(document).ready(function() { >+ $("#table_readingrec").dataTable({ >+ "sPaginationType": "four_button", >+ "sDom": '<"top pager"ilpf>t<"bottom pager"ip>' >+ }); >+ }); > }); </script> > </head> > <body> >@@ -34,9 +29,6 @@ > [% IF ( loop_reading ) %] > <form action="/cgi-bin/koha/members/readingrec.pl" method="get"><input type="hidden" name="borrowernumber" id="borrowernumber" value="[% borrowernumber %]" /></form> > >-<div id="pagertable_readingrec"> >-[% INCLUDE 'table-pager.inc' perpage='20' %] >-</div> > <table id="table_readingrec"> > <thead> > <th>Date</th> >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-home.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-home.tt >index 6fbf31f..100a0c7 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-home.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/serials/serials-home.tt >@@ -11,7 +11,8 @@ > "aoColumnDefs": [ > { "aTargets": [ -1, -2, -3 ], "bSortable": false, "bSearchable": false }, > ], >- "sPaginationType": "full_numbers" >+ "sPaginationType": "full_numbers", >+ "sDom": '<"top pager"ilpf>t<"bottom pager"ip>' > } ) ); > > srlt.fnAddFilters("filter", 750); >-- >1.7.6.1 >
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 6836
:
5284
|
5291
|
5294
|
6340
|
6387
|
6467
|
6468
|
6522
|
6523
|
6524
|
7112
|
7120
|
7121
|
7122
|
7123
|
7124
|
7243
|
7244
|
7298
|
7299
|
7300
|
7301
|
7302