Bug 9436 [Revised] Use DataTables on cities administration page

Replace the tablesorter plugin with the DataTables plugin on the
cities administration page.

To test, open the cities administration page (Administration
-> Cities and towns). Confirm that table sorting works correctly.

Revision corrects template path to datatables assets.
Further revision corrects conflict with Bug 9630

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
Comment: Sorting works. 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>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt
index 65de2be..acb4f22 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/cities.tt
@@ -1,15 +1,10 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Administration &rsaquo; [% IF ( add_form ) %]Cities &rsaquo; [% IF ( cityid ) %] Modify city[% ELSE %] New city[% END %][% ELSE %][% IF ( delete_confirm ) %]Cities &rsaquo; Confirm deletion of city[% ELSE %] Cities[% END %][% END %]</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>
-<script type="text/javascript" id="js">$(document).ready(function() {
-       $.tablesorter.defaults.widgets = ['zebra'];
-       $("#table_cities").tablesorter({
-               sortList: [[1,0]],
-               headers: { 5: { sorter: false},6: { sorter: false}}
-       }).tablesorterPager({container: $("#pagertable_cities"),positionFixed: false,size: 20});
-}); </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">
 //<![CDATA[
     function Check(f) {
@@ -19,6 +14,16 @@
             document.Aform.submit();
         }
     }
+    $(document).ready(function() {
+        $("#table_cities").dataTable($.extend(true, {}, dataTablesDefaults, {
+            "aoColumnDefs": [
+                { "aTargets": [ -1, -2 ], "bSortable": false, "bSearchable": false },
+            ],
+            "aaSorting": [[ 1, "asc" ]],
+            "iDisplayLength": 10,
+            "aLengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
+        }));
+    });
 //]]>
 </script>
 </head>
@@ -125,9 +130,6 @@
        [% END %]
 
 [% IF ( loop ) %]
-<div id="pagertable_cities">
-[% INCLUDE 'table-pager.inc' perpage='20' %]
-</div>
 <table id="table_cities">
                <thead>
                        <th>City ID</th>