Bug 9431 [Revised] Use DataTables on Patron Category Administration page
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 Patron Category Administration page (Administration -> Patron types and categories). Confirm that table sorting works correctly. Revision adds a "natural sort" plugin to the main datatables configuration JavaScript file to enable sorting of columns like those in this table which include mixed numeric and text data. Allows correct numeric sorting of data like "0 years, 1 years, 2 years, 18 years," etc. Further revision corrects template path to datatables assets. Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com> Comment: Sorting works. No errors. Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com> Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
This commit is contained in:
Jared Camins-Esakov
parent
43c340c53e
commit
baf95b1340
2 changed files with 82 additions and 14 deletions
|
|
@ -414,3 +414,60 @@ $.fn.dataTableExt.oSort['num-html-desc'] = function(a,b) {
|
|||
y = parseFloat( y );
|
||||
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
|
||||
};
|
||||
|
||||
(function() {
|
||||
|
||||
/*
|
||||
* Natural Sort algorithm for Javascript - Version 0.7 - Released under MIT license
|
||||
* Author: Jim Palmer (based on chunking idea from Dave Koelle)
|
||||
* Contributors: Mike Grier (mgrier.com), Clint Priest, Kyle Adams, guillermo
|
||||
* See: http://js-naturalsort.googlecode.com/svn/trunk/naturalSort.js
|
||||
*/
|
||||
function naturalSort (a, b) {
|
||||
var re = /(^-?[0-9]+(\.?[0-9]*)[df]?e?[0-9]?$|^0x[0-9a-f]+$|[0-9]+)/gi,
|
||||
sre = /(^[ ]*|[ ]*$)/g,
|
||||
dre = /(^([\w ]+,?[\w ]+)?[\w ]+,?[\w ]+\d+:\d+(:\d+)?[\w ]?|^\d{1,4}[\/\-]\d{1,4}[\/\-]\d{1,4}|^\w+, \w+ \d+, \d{4})/,
|
||||
hre = /^0x[0-9a-f]+$/i,
|
||||
ore = /^0/,
|
||||
// convert all to strings and trim()
|
||||
x = a.toString().replace(sre, '') || '',
|
||||
y = b.toString().replace(sre, '') || '',
|
||||
// chunk/tokenize
|
||||
xN = x.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),
|
||||
yN = y.replace(re, '\0$1\0').replace(/\0$/,'').replace(/^\0/,'').split('\0'),
|
||||
// numeric, hex or date detection
|
||||
xD = parseInt(x.match(hre), 10) || (xN.length != 1 && x.match(dre) && Date.parse(x)),
|
||||
yD = parseInt(y.match(hre), 10) || xD && y.match(dre) && Date.parse(y) || null;
|
||||
// first try and sort Hex codes or Dates
|
||||
if (yD)
|
||||
if ( xD < yD ) return -1;
|
||||
else if ( xD > yD ) return 1;
|
||||
// natural sorting through split numeric strings and default strings
|
||||
for(var cLoc=0, numS=Math.max(xN.length, yN.length); cLoc < numS; cLoc++) {
|
||||
// find floats not starting with '0', string or 0 if not defined (Clint Priest)
|
||||
var oFxNcL = !(xN[cLoc] || '').match(ore) && parseFloat(xN[cLoc]) || xN[cLoc] || 0;
|
||||
var oFyNcL = !(yN[cLoc] || '').match(ore) && parseFloat(yN[cLoc]) || yN[cLoc] || 0;
|
||||
// handle numeric vs string comparison - number < string - (Kyle Adams)
|
||||
if (isNaN(oFxNcL) !== isNaN(oFyNcL)) return (isNaN(oFxNcL)) ? 1 : -1;
|
||||
// rely on string comparison if different types - i.e. '02' < 2 != '02' < '2'
|
||||
else if (typeof oFxNcL !== typeof oFyNcL) {
|
||||
oFxNcL += '';
|
||||
oFyNcL += '';
|
||||
}
|
||||
if (oFxNcL < oFyNcL) return -1;
|
||||
if (oFxNcL > oFyNcL) return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
|
||||
"natural-asc": function ( a, b ) {
|
||||
return naturalSort(a,b);
|
||||
},
|
||||
|
||||
"natural-desc": function ( a, b ) {
|
||||
return naturalSort(a,b) * -1;
|
||||
}
|
||||
} );
|
||||
|
||||
}());
|
||||
|
|
@ -5,23 +5,30 @@
|
|||
[% 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="[% 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" id="js">
|
||||
//<![CDATA[
|
||||
$(document).ready(function() {
|
||||
$("#table_categorie").dataTable($.extend(true, {}, dataTablesDefaults, {
|
||||
"aoColumnDefs": [
|
||||
{ "aTargets": [ -1, -2 ], "bSortable": false, "bSearchable": false },
|
||||
{ "aTargets": [ 3,4,5 ], "sType": "natural" },
|
||||
],
|
||||
"aaSorting": [[ 1, "asc" ]],
|
||||
"aLengthMenu": [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
|
||||
"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;
|
||||
|
|
@ -276,10 +283,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>
|
||||
|
|
@ -294,8 +301,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>
|
||||
|
|
@ -368,6 +378,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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue