浏览代码

HUE-5191 [useradmin] Paginate the list of results

Enrico Berti 9 年之前
父节点
当前提交
e9f438b

+ 5 - 14
apps/useradmin/src/useradmin/templates/layout.mako

@@ -81,22 +81,13 @@ def is_selected(section, matcher):
 
   <script type="text/javascript">
     $(document).ready(function () {
-      $("#filterInput").keyup(function () {
-        var shown = 0;
-        $(".datatables tfoot").hide();
-        $.each($(".tableRow"), function (index, value) {
-          if ($(value).data("search").toLowerCase().indexOf($("#filterInput").val().toLowerCase()) == -1 && $("#filterInput").val() != "") {
-            $(value).hide();
-          }
-          else {
-            $(value).show();
-            shown++;
-          }
-        });
-        if (shown == 0) {
-          $(".datatables tfoot").show();
+
+      $("#filterInput").jHueDelayedInput(function () {
+        if (mainDataTable) {
+          mainDataTable.fnFilter($("#filterInput").val().toLowerCase());
         }
       });
+
       $('[data-rel="tooltip"]').tooltip({
         placement: 'right'
       });

+ 13 - 9
apps/useradmin/src/useradmin/templates/list_groups.mako

@@ -122,24 +122,28 @@ ${layout.menubar(section='groups')}
   </form>
 </div>
 
+<script src="${ static('desktop/ext/js/datatables-paging-0.1.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/knockout.min.js') }" type="text/javascript" charset="utf-8"></script>
 
 <script type="text/javascript" charset="utf-8">
-  var viewModel;
+  var viewModel = {
+    availableGroups: ko.observableArray(${ groups_json | n,antixss }),
+    chosenGroups: ko.observableArray([])
+  };
+
+  var mainDataTable;
 
   $(document).ready(function () {
-    viewModel = {
-      availableGroups: ko.observableArray(${ groups_json | n,antixss }),
-      chosenGroups: ko.observableArray([])
-    };
 
     ko.applyBindings(viewModel);
 
-    $(".datatables").dataTable({
-      "bPaginate": false,
-      "bLengthChange": false,
+    mainDataTable = $(".datatables").dataTable({
+      "sPaginationType":"bootstrap",
+      "iDisplayLength":100,
+      "bLengthChange":false,
+      "sDom": "<'row'r>t<'row-fluid'<'dt-pages'p><'dt-records'i>>",
       "bInfo": false,
-      "bFilter": false,
+      "bFilter": true,
       "bAutoWidth": false,
       "aoColumns": [
         %if user.is_superuser:

+ 3 - 2
apps/useradmin/src/useradmin/templates/list_permissions.mako

@@ -75,12 +75,13 @@ ${layout.menubar(section='permissions')}
 </div>
 
 <script type="text/javascript" charset="utf-8">
+  var mainDataTable;
   $(document).ready(function () {
-    $(".datatables").dataTable({
+    mainDataTable = $(".datatables").dataTable({
       "bPaginate": false,
       "bLengthChange": false,
       "bInfo": false,
-      "bFilter": false,
+      "bFilter": true,
       "aoColumns": [
         null,
         null,

+ 12 - 8
apps/useradmin/src/useradmin/templates/list_users.mako

@@ -138,22 +138,26 @@ ${layout.menubar(section='users')}
 
 </div>
 
+<script src="${ static('desktop/ext/js/datatables-paging-0.1.js') }" type="text/javascript" charset="utf-8"></script>
 <script src="${ static('desktop/ext/js/knockout.min.js') }" type="text/javascript" charset="utf-8"></script>
 
 <script type="text/javascript" charset="utf-8">
+  var viewModel = {
+    availableUsers: ko.observableArray(${ users_json | n,antixss }),
+    chosenUsers: ko.observableArray([])
+  };
+  var mainDataTable;
   $(document).ready(function () {
-    var viewModel = {
-      availableUsers: ko.observableArray(${ users_json | n,antixss }),
-      chosenUsers: ko.observableArray([])
-    };
 
     ko.applyBindings(viewModel);
 
-    $(".datatables").dataTable({
-      "bPaginate": false,
-      "bLengthChange": false,
+    mainDataTable = $(".datatables").dataTable({
+      "sPaginationType":"bootstrap",
+      "iDisplayLength":100,
+      "bLengthChange":false,
+      "sDom": "<'row'r>t<'row-fluid'<'dt-pages'p><'dt-records'i>>",
       "bInfo": false,
-      "bFilter": false,
+      "bFilter": true,
       "aoColumns": [
         %if user.is_superuser:
             { "bSortable": false },