Reworked data tables footer

Cadasta · Apr 7, 2017 · 94e0da0 · 94e0da0
1 parent cf53028
commit 94e0da0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/cadasta/core/static/css/main.scss b/cadasta/core/static/css/main.scss
@@ -513,6 +513,9 @@ body.map .content-single {
 
 .dataTables_wrapper {
   clear: both;
+  div.dataTables_info {
+    padding-top: 10px !important;
+  }
   .table-search { // search
     label {
       float: left;
@@ -527,22 +530,21 @@ body.map .content-single {
     font-size: 12px;
     float: left;
     display: inline-block;
-    padding-right: 10px;
+    padding-right: 20px;
     opacity: 0.8;
   }
   .table-num { // select number of entries per page
     font-size: 12px;
     float: left;
     display: inline-block;
     padding-top: 3px;
-    padding-left: 10px;
-    border-left: 1px solid $table-border-color;
+    padding-right: 20px;
     opacity: 0.8;
     .input-sm {
-      padding: 5px;
+      padding: 2px;
     }
     select {
-      width: 55px !important;
+      width: 100px !important;
     }
   }
   .table-pagination { // pagination
@@ -580,8 +582,10 @@ body.map .content-single {
   }
 }
 
-.detail div.dataTables_wrapper div.dataTables_filter input {
-  max-width: 100px;
+.detail div.dataTables_wrapper {
+  div.dataTables_filter input {
+    max-width: 100px;
+  }
 }
 
 @media (max-width: 500px) {
@@ -607,13 +611,7 @@ body.map .content-single {
     }
     .table-num { // select number of entries per page
       font-size: 10px;
-      padding-top: 0;
-      padding-left: 5px;
-      .input-sm {
-        padding: 2px;
-      }
       select {
-        width: 50px !important;
         font-size: 10px;
       }
     }

diff --git a/cadasta/templates/core/base.html b/cadasta/templates/core/base.html
@@ -201,13 +201,18 @@
     $(document).ready(function () {
       $('.datatable').DataTable({
         conditionalPaging: true,
-        "dom": '<"table-search clearfix"f>t<"table-entries"i><"table-num"l><"table-pagination"p>',
+        "dom": '<"table-search clearfix"f>t<"table-pagination"p><"table-entries"i><"table-num"l>',
         "language": {
           "emptyTable":     "{% trans "No data available in table" %}",
           "info":           "{% trans "Showing _START_ - _END_ of _TOTAL_" %}",
           "infoEmpty":      "{% trans "Showing 0 - 0 of 0" %}",
           "infoFiltered":   "{% trans "(filtered from _MAX_ total rows)" %}",
-          "lengthMenu":     "{% trans "Show _MENU_ rows" %}",
+          "lengthMenu":     '<select class="form-control input-sm">'+
+                            ' <option value="10">{% trans "10 per page" %}</option>'+
+                            ' <option value="25">{% trans "25 per page" %}</option>'+
+                            ' <option value="50">{% trans "50 per page" %}</option>'+
+                            ' <option value="100">{% trans "100 per page" %}</option>'+
+                            '</select>',
           "search": '<div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>',
           "searchPlaceholder": '{% trans "Search" %}',
           "zeroRecords":    "{% trans "No matching records found" %}",

diff --git a/cadasta/templates/search/search.html b/cadasta/templates/search/search.html
@@ -97,7 +97,7 @@ <h4>
   $('#search-results').DataTable().destroy();
   $('#search-results').DataTable({
     conditionalPaging: true,
-    dom: 't<"table-entries"i><"table-num"l><"table-pagination"p>',
+    dom: 't<"table-pagination"p><"table-entries"i><"table-num"l>',
     destroy: true,
     ordering: false,
     serverSide: true,
@@ -110,7 +110,12 @@ <h4>
     drawCallback: drawHandler,
     language: {
       info: 'Showing _START_ - _END_ of _TOTAL_',
-      lengthMenu: 'Show _MENU_ rows',
+      lengthMenu: '<select class="form-control input-sm">'+
+                  ' <option value="10">{% trans "10 per page" %}</option>'+
+                  ' <option value="25">{% trans "25 per page" %}</option>'+
+                  ' <option value="50">{% trans "50 per page" %}</option>'+
+                  ' <option value="100">{% trans "100 per page" %}</option>'+
+                  '</select>',
       paginate: {
         next: '<span class="glyphicon glyphicon-triangle-right"></span>',
         previous: '<span class="glyphicon glyphicon-triangle-left"></span>',