From 3e720331382fdd15c6f78b19753b16b5b01ce820 Mon Sep 17 00:00:00 2001 From: Owen Leonard <oleonard@myacpl.org> Date: Wed, 20 Mar 2013 15:50:05 -0400 Subject: [PATCH 1/1] Bug 9879 - Use DataTables on suggestions management page Replace the tablesorter plugin with the DataTables plugin on the suggestions management page. Table sorting has been coverted from using multiple specific IDs to a more efficient class-based selector. Unrelated change: Prevent page-jumping when checkbox links are clicked. To test, open the suggestions management page (Acquisitions -> Suggestions). Confirm that table sorting, paging, and searching works correctly. Signed-off-by: Frederic Durand <frederic.durand@unilim.fr> Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com> --- .../prog/en/modules/suggestion/suggestion.tt | 50 ++++++++++---------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt index 5165f83..fcb8eca 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/suggestion/suggestion.tt @@ -16,16 +16,14 @@ </title> [% INCLUDE 'doc-head-close.inc' %] [% INCLUDE 'calendar.inc' %] -[% IF ( op_else ) %] <script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tablesorter.min.js"></script> +[% IF ( op_else ) %] +<link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" /> +<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.dataTables.min.js"></script> +[% INCLUDE 'datatables-strings.inc' %] +<script type="text/javascript" src="[% themelang %]/js/datatables.js"></script> <script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.checkboxes.min.js"></script> <script type="text/javascript"> // <![CDATA[ -$.tablesorter.addParser({ - id: 'articles', - is: function(s) {return false; }, - format: function(s) { return s.toLowerCase().replace(/^(the|an|a) /,''); }, - type: 'text' -}); /** * displayOther. * This function display the select or an textaera to write a reason. @@ -36,26 +34,32 @@ function displayOther(id,show,hide){ } $(document).ready(function() { $('#suggestiontabs').tabs({ - select: function(ui) { - $("#loadingtab").show(); - }, - show: function(ui) { - $("#loadingtab").hide(); + // Correct table sizing for tables hidden in tabs + // http://www.datatables.net/examples/api/tabs_and_scrolling.html + "show": function(event, ui) { + var oTable = $('div.dataTables_wrapper>table', ui.panel).dataTable(); + if ( oTable.length > 0 ) { + oTable.fnAdjustColumnSizing(); + } } - }); - $.tablesorter.defaults.widgets = ['zebra']; - + }); + $(".sorted").dataTable($.extend(true, {}, dataTablesDefaults, { + "aoColumnDefs": [ + { "aTargets": [ 0, -1, -2 ], "bSortable": false, "bSearchable": false }, + ], + "aLengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]], + "iDisplayLength": 20, + "sPaginationType": "four_button" + })); [% FOREACH suggestion IN suggestions %] // functions for [% suggestion.suggestiontype %] interactions - $("#[% suggestion.suggestiontype %]t").tablesorter({[% IF ( dateformat == 'metric' ) %] - dateFormat: 'uk',[% END %] - headers: {0:{sorter: false}, 1: { sorter: 'articles' },5:{sorter: false},6:{sorter: false},7:{sorter: false}, 8:{sorter: false},9:{sorter: false},10:{sorter: false}} - }); - $("#CheckAll[% suggestion.suggestiontype %]").click(function(){ + $("#CheckAll[% suggestion.suggestiontype %]").click(function(e){ $("#[% suggestion.suggestiontype %]t").checkCheckboxes(); + e.preventDefault(); }); - $("#UncheckAll[% suggestion.suggestiontype %]").click(function(){ + $("#UncheckAll[% suggestion.suggestiontype %]").click(function(e){ $("#[% suggestion.suggestiontype %]t").unCheckCheckboxes(); + e.preventDefault(); }); $("#other_reason[% suggestion.suggestiontype %]").hide(); $("input[name*=other_reason[% suggestion.suggestiontype %]]").focus(function(){ $(this).val(""); }); @@ -359,8 +363,6 @@ $(document).ready(function() { calcNewsuggTotal(); }); <h1>Suggestions management</h1> [% UNLESS ( notabs ) %] -<div id="sorting" class="overlay">Sorting...</div> -<div id="loadingtab" class="overlay">Loading tab...</div> <div id="suggestiontabs" class="toptabs"> <ul class="ui-tabs-nav"> [% FOREACH suggestion IN suggestions %] @@ -383,7 +385,7 @@ $(document).ready(function() { calcNewsuggTotal(); }); [% IF ( suggestion.suggestions_loop ) %] <p><a id="CheckAll[% suggestion.suggestiontype %]" href="#">Check all</a> | <a id="UncheckAll[% suggestion.suggestiontype %]" href="#">Uncheck all</a></p> - <table id="[% suggestion.suggestiontype %]t"> + <table id="[% suggestion.suggestiontype %]t" class="sorted"> <thead> <tr><th> </th> <th>Suggestion</th> -- 1.7.10.4