[Koha-patches] [PATCH] Bug 9431 - Use DataTables on Patron Category Administration page

[Owen Leonard]

Replace the tablesorter plugin with the DataTables plugin on the
patron category administration page. Structural changes were made to the
table markup for validity and to deal with a DataTables bug which
prevents it from properly parsing a <th> with a colspan.

To test, open the Authorized Values page (Administration -> Patron
types and categories). Confirm that table sorting works correctly.
---
 .../prog/en/modules/admin/categorie.tt             |   37 ++++++++++++--------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/categorie.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/categorie.tt
index 6c3114f..1e1c433 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/categorie.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/categorie.tt
@@ -5,23 +5,28 @@
 [% IF ( delete_confirmed ) %]Category deleted[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
 [% INCLUDE 'calendar.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>
-<script type="text/javascript" id="js">$(document).ready(function() {
-	$("#table_categorie").tablesorter({
-		sortList: [[0,0]],
-		widgets: ['zebra'],
-		headers: { 11: { sorter: false}}
-	}).tablesorterPager({container: $("#pagertable_categorie"),positionFixed: false,size: 20});
+<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>
+[% INCLUDE 'datatables-strings.inc' %]
+<script type="text/javascript" src="/intranet-tmpl/prog/en/js/datatables.js"></script>
+<script type="text/javascript" id="js">
+//<![CDATA[
+    $(document).ready(function() {
+        $("#table_categorie").dataTable($.extend(true, {}, dataTablesDefaults, {
+            "aoColumnDefs": [
+                { "aTargets": [ -1, -2 ], "bSortable": false, "bSearchable": false },
+            ],
+            "aaSorting": [[ 1, "asc" ]],
+            "iDisplayLength": 20,
+            "sPaginationType": "four_button"
+        }));
+
     $( "#enrolmentperioddate" ).datepicker({ minDate: 1 }); // Require that "until date" be in the future
 
     if ( $("#branches option:selected").length < 1 ) {
         $("#branches option:first").attr("selected", "selected");
     }
-}); </script>
-<script type="text/javascript">
-//<![CDATA[
-	//
+});
 	function isNotNull(f,noalert) {
 		if (f.value.length ==0) {
    return false;
@@ -294,10 +299,10 @@ Confirm deletion of category [% categorycode |html %][% END %]</legend>
 	[% END %]
 [% IF ( loop ) %]
 <div id="pagertable_categorie">
-[% INCLUDE 'table-pager.inc' perpage='20' %]
 </div>
         <table id="table_categorie">
 		<thead>
+        <tr>
 			<th scope="col">Code</th>
 			<th scope="col">Category name</th>
 			<th scope="col">Type</th>
@@ -312,8 +317,11 @@ Confirm deletion of category [% categorycode |html %][% END %]</legend>
             <th scope="col">Messaging</th>
             [% END %]
             <th scope="col">Branches limitations</th>
-			<th scope="col" colspan="2">  </th>
+            <th scope="col">  </th>
+            <th scope="col">  </th>
+        </tr>
 		</thead>
+        <tbody>
 		[% FOREACH loo IN loop %]
 			<tr>
                         <td>[% loo.categorycode |html %]</td>
@@ -386,6 +394,7 @@ Confirm deletion of category [% categorycode |html %][% END %]</legend>
                         <td><a href="[% loo.script_name %]?op=delete_confirm&categorycode=[% loo.categorycode |uri %]">Delete</a></td>
 		</tr>
 		[% END %]
+        </tbody>
 	</table>
 [% ELSE %]
 	<div class="dialog alert">No categories have been defined. <a href="/cgi-bin/koha/admin/categorie.pl?op=add_form">Create a new category</a>.</div>
-- 
1.7.9.5