[dev] How to use Core.UI.Table.Sort?

[Moritz Lenz]

Hi all,

I tried to make some tables in the Admin interface sortable with Javascript.



commit f0278db35026e6aad260e5559eab45c314f393df
Author: Moritz Lenz <ml...@noris.net>
Date:   Wed May 13 10:57:16 2015 +0200

    Try to make the AdminQueue-Table sortable



What am I missing here? Or is this a bug in the table sorter?



Cheers,
Moritz

>From f0278db35026e6aad260e5559eab45c314f393df Mon Sep 17 00:00:00 2001
From: Moritz Lenz <ml...@noris.net>
Date: Wed, 13 May 2015 10:57:16 +0200
Subject: [PATCH] Try to make the AdminQueue-Table sortable

---
 Kernel/Config/Files/Ticket.xml            | 4 ++++
 Kernel/Output/HTML/Standard/AdminQueue.tt | 9 +++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/Kernel/Config/Files/Ticket.xml b/Kernel/Config/Files/Ticket.xml
index 2ac4a0e..d8376f7 100644
--- a/Kernel/Config/Files/Ticket.xml
+++ b/Kernel/Config/Files/Ticket.xml
@@ -8793,6 +8793,10 @@
                     <Block>Queue</Block>
                     <Prio>100</Prio>
                 </NavBarModule>
+                <Loader>
+                    <JavaScript>thirdparty/jquery-tablesorter-2.0.5/jquery.tablesorter.js</JavaScript>
+                    <JavaScript>Core.UI.Table.Sort.js</JavaScript>
+                </Loader>
             </FrontendModuleReg>
         </Setting>
     </ConfigItem>
diff --git a/Kernel/Output/HTML/Standard/AdminQueue.tt b/Kernel/Output/HTML/Standard/AdminQueue.tt
index 88b19f3..da10591 100644
--- a/Kernel/Output/HTML/Standard/AdminQueue.tt
+++ b/Kernel/Output/HTML/Standard/AdminQueue.tt
@@ -47,10 +47,15 @@
                 <h2>[% Translate("List") | html %]</h2>
             </div>
             <div class="Content">
+[% WRAPPER JSOnDocumentComplete %]
+<script type="text/javascript">//<![CDATA[
+    Core.UI.Table.Sort.Init($('.DataTable'));
+//]]></script>
+[% END %]
                 <table class="DataTable">
                     <thead>
                         <tr>
-                            <th>[% Translate("Name") | html %]</th>
+                            <th class="Name Sortable"><a href="#">[% Translate("Name") | html %]</a></th>
                             <th>[% Translate("Group") | html %]</th>
                             <th>[% Translate("Comment") | html %]</th>
                             <th>[% Translate("Validity") | html %]</th>
@@ -68,7 +73,7 @@
 [% RenderBlockEnd("NoDataFoundMsg") %]
 [% RenderBlockStart("OverviewResultRow") %]
                         <tr>
-                            <td>
+                            <td class="Name">
                                 <a class="AsBlock" href="[% Env("Baselink") %]Action=[% Env("Action") %];Subaction=Change;QueueID=[% Data.QueueID | uri %]">[% Data.Name | html %]</a>
                             </td>
                             <td>[% Data.GroupName | html %]</td>
-- 
2.1.4

I tried the patch that's in the attachment, on top of the following commit on the master branch: After applying the patch (and rebuilding the config), when I click on the "Name" column in AdminQueue, I get the down-facing triangle that indicates that the table is sorted by this column, and when pressing agian, I get the up-facing triangle, but the table isn't sorted at all, all rows stay just how they are. I've tried to model the HTML after the sortable table in AgentTicketZoom.tt, since there's no documentation in the Javascript about how the HTML should look like.

smime.p7s
Description: S/MIME cryptographic signature

_______________________________________________
OTRS mailing list: dev - Webpage: http://otrs.org/
Archive: http://lists.otrs.org/pipermail/dev
To unsubscribe: http://lists.otrs.org/cgi-bin/listinfo/dev