Re: How to use Core.UI.Table.Sort?

Marc Bonsels <[email protected]> Wed, 13 May 2015 12:09:56 +0200
Newsgroups gmane.comp.otrs.devel
Message-ID <[email protected]> 
Hi Moritz,

I think the documentation is a bit misleading here. It sounds as it was 
optional to put a hidden field with class SortData which actually 
contains the data relevant for sorting. But following the code, Init() 
always looks for elements with class SortData and gets it's content by 
using .val() which only works for form fields. Please see my attached 
patch for a working example.

Marc


Am 13.05.15 um 11:04 schrieb Moritz Lenz:
> Hi all,
>
> I tried to make some tables in the Admin interface sortable with 
> Javascript.
>
> I tried the patch that's in the attachment, on top of the following 
> commit on the master branch:
>
> commit f0278db35026e6aad260e5559eab45c314f393df
> Author: Moritz Lenz <[email protected]>
> Date:   Wed May 13 10:57:16 2015 +0200
>
>     Try to make the AdminQueue-Table sortable
>
> 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.
>
> What am I missing here? Or is this a bug in the table sorter?
>
> 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.
>
> Cheers,
> Moritz
>
>
> _______________________________________________
> 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


-- 
--

Marc Bonsels
Research & Development
  
OTRS AG
Norsk-Data-Straße 1
61352 Bad Homburg
Germany

T: +49 (0) 6172 681988 0
F: +49 (0) 9421 56818 18
I:  http://www.otrs.com/

Business location: Bad Homburg, Country Court: Bad Homburg, HRB 10751, VAT ID: DE256610065
Chairman: Burchard Steinbild, Managing Board: André Mindermann (CEO), Christopher Kuhn, Sabine Riedel

_______________________________________________
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
sort.patch (text/plain, 2.6 KB) 
diff --git a/Kernel/Config/Files/Ticket.xml b/Kernel/Config/Files/Ticket.xml
index 630feaf..d5ba27a 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..42daed7 100644
--- a/Kernel/Output/HTML/Standard/AdminQueue.tt
+++ b/Kernel/Output/HTML/Standard/AdminQueue.tt
@@ -50,7 +50,7 @@
                 <table class="DataTable">
                     <thead>
                         <tr>
-                            <th>[% Translate("Name") | html %]</th>
+                            <th class="QueueName Sortable"><a href="#">[% Translate("Name") | html %]</a></th>
                             <th>[% Translate("Group") | html %]</th>
                             <th>[% Translate("Comment") | html %]</th>
                             <th>[% Translate("Validity") | html %]</th>
@@ -68,8 +68,9 @@
 [% RenderBlockEnd("NoDataFoundMsg") %]
 [% RenderBlockStart("OverviewResultRow") %]
                         <tr>
-                            <td>
+                            <td class="QueueName">
                                 <a class="AsBlock" href="[% Env("Baselink") %]Action=[% Env("Action") %];Subaction=Change;QueueID=[% Data.QueueID | uri %]">[% Data.Name | html %]</a>
+                                <input type="hidden" class="SortData" value="[% Data.Name | html %]" />
                             </td>
                             <td>[% Data.GroupName | html %]</td>
                             <td title="[% Data.Comment | html %]">[% Data.Comment | truncate(26) | html %]</td>
@@ -372,3 +373,18 @@
     <div class="Clear"></div>
 </div>
 [% RenderBlockEnd("Overview") %]
+
+[% WRAPPER JSOnDocumentComplete %]
+<script type="text/javascript">//<![CDATA[
+        Core.UI.Table.Sort.Init($('.DataTable'), function () {
+            $(this).find('tr')
+                .removeClass('Even')
+                .filter(':even')
+                .addClass('Even')
+                .end()
+                .removeClass('Last')
+                .filter(':last')
+                .addClass('Last');
+        });
+//]]></script>
+[% END %]