Bug 9430 [Revised] Use DataTables on library transfer limits page
authorOwen Leonard <oleonard@myacpl.org>
Fri, 18 Jan 2013 19:55:59 +0000 (14:55 -0500)
committerJared Camins-Esakov <jcamins@cpbibliography.com>
Thu, 7 Mar 2013 15:50:19 +0000 (10:50 -0500)
Replace the tablesorter plugin with the DataTables plugin on the
library transfer limits page.

Also made minor changes to "check/uncheck all" function to prevent page
from jumping on click, and removed unused function.

To test, open the library transfer limits page (Administration ->
Library transfer limits). Confirm that table sorting works correctly for
all tables.

Test that the "check all/uncheck all" links still work correctly.

Revision corrects template path to datatables assets.

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
Comment: Work as described. No errors.
Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com>
Amended patch: Add the aLengthMenu key for DataTables + delete an unused
div block (used for pager)
Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
koha-tmpl/intranet-tmpl/prog/en/modules/admin/branch_transfer_limits.tt

index 1c2a7ac..04e4aed 100644 (file)
@@ -1,15 +1,16 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Administration &rsaquo; Library checkin and transfer policy</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="[% 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[
        $(document).ready(function(){
-               $("#CheckAll").click(function(){ $("#transferlimit_tabs").checkCheckboxes();});
-               $("#UncheckAll").click(function(){ $("#transferlimit_tabs").unCheckCheckboxes();});
-               $("#SwapAll").click(function(){ $("#transferlimit_tabs").toggleCheckboxes();});
+        $("#CheckAll").click(function(){ $("#transferlimit_tabs").checkCheckboxes(); return false; });
+        $("#UncheckAll").click(function(){ $("#transferlimit_tabs").unCheckCheckboxes(); return false; });
         $('#transferlimit_tabs').tabs();
 
                 $('#branchselect').change(function() {
                        $("#"+tid).unCheckCheckboxes();
                        return false;
                });
-               $(".sorted").tablesorter({
-                       sortList: [[0,0]],
-                       headers: { 1: { sorter: false}}
-               }).tablesorterPager({container: $(".pager"),positionFixed: false,size: 10});
+        $(".sorted").dataTable($.extend(true, {}, dataTablesDefaults, {
+            "aoColumnDefs": [
+                { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false },
+            ],
+            "iDisplayLength": 20,
+            "aLengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
+            "sPaginationType": "four_button"
+        }));
        });
 //]]>
 </script>
-<style type="text/css">td { text-align: center; }</style>
+<style type="text/css">td { text-align: center; } .sorted { min-width: 50%; }</style>
 </head>
 <body id="admin_branch_transfer_limits" class="admin">
 [% INCLUDE 'header.inc' %]
@@ -84,9 +89,6 @@
                <h4>Policy for [% codes_loo.limit_phrase %]: [% codes_loo.code %]</h4>
     <p><a id="CheckAll[% codes_loo.code %]table" class="checkall" href="#">Check all</a> | <a id="UncheckAll[% codes_loo.code %]table" class="uncheckall" href="#">Uncheck all</a></p>
        
-       <div id="pager[% codes_loo.code %]table">
-       [% INCLUDE 'table-pager.inc' perpage='20' %]
-       </div>
                <table id="[% codes_loo.code %]table" class="sorted">
                        <thead>
                                <tr>