Merge pull request #8298 from colemanw/CRM-18286

CRM-18286 - Use localStorage to remember datatable page length
civicrm · May 21, 2016 · 0749025 · 0749025
2 parents da82de8 + ea7597b
commit 0749025
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/js/Common.js b/js/Common.js
@@ -728,8 +728,20 @@ if (!CRM.vars) CRM.vars = {};
   };
 
   $.fn.crmAjaxTable = function() {
+    // Strip the ids from ajax urls to make pageLength storage more generic
+    function simplifyUrl(ajax) {
+      // Datatables ajax prop could be a url string or an object containing the url
+      var url = typeof ajax === 'object' ? ajax.url : ajax;
+      return typeof url === 'string' ? url.replace(/[&?]\w*id=\d+/g, '') : null;
+    }
+
     return $(this).each(function() {
-      //Declare the defaults for DataTables
+      // Recall pageLength for this table
+      var url = simplifyUrl($(this).data('ajax'));
+      if (url && window.localStorage && localStorage['dataTablePageLength:' + url]) {
+        $(this).data('pageLength', localStorage['dataTablePageLength:' + url]);
+      }
+      // Declare the defaults for DataTables
       var defaults = {
         "processing": true,
         "serverSide": true,
@@ -755,6 +767,12 @@ if (!CRM.vars) CRM.vars = {};
       };
       //Include any table specific data
       var settings = $.extend(true, defaults, $(this).data('table'));
+      // Remember pageLength
+      $(this).on('length.dt', function(e, settings, len) {
+        if (settings.ajax && window.localStorage) {
+          localStorage['dataTablePageLength:' + simplifyUrl(settings.ajax)] = len;
+        }
+      });
       //Make the DataTables call
       $(this).DataTable(settings);
     });

diff --git a/templates/CRM/Contact/Page/View/RelationshipSelector.tpl b/templates/CRM/Contact/Page/View/RelationshipSelector.tpl
@@ -24,9 +24,10 @@
  +--------------------------------------------------------------------+
 *}
 {* relationship selector *}
-
 <div class="crm-contact-relationship-{$context}">
-  <table class="crm-contact-relationship-selector-{$context} crm-ajax-table" data-page-length='10'>
+  <table
+    class="crm-contact-relationship-selector-{$context} crm-ajax-table"
+    data-ajax="{crmURL p="civicrm/ajax/contactrelationships" q="context=$context&cid=$contactId"}">
     <thead>
     <tr>
       <th data-data="relation" class='crm-contact-relationship-type'>{ts}Relationship{/ts}</th>
@@ -41,15 +42,4 @@
     </tr>
     </thead>
   </table>
-
-  {literal}
-    <script type="text/javascript">
-      (function($) {
-        var context = {/literal}"{$context}"{literal};
-        CRM.$('table.crm-contact-relationship-selector-' + context).data({
-          "ajax": {/literal}'{crmURL p="civicrm/ajax/contactrelationships" h=0 q="context=$context&cid=$contactId"}'{literal},
-        });
-      })(CRM.$);
-    </script>
-  {/literal}
 </div>