[Groonga-commit] groonga/gcs [master] Implement pager on web dashboard. Closes #33

Back to archive index

null+****@clear***** null+****@clear*****
2012年 7月 10日 (火) 12:47:06 JST


Yoji SHIDARA	2012-07-10 12:47:06 +0900 (Tue, 10 Jul 2012)

  New Revision: 5da889451e1e6c72bd1292765912014ae094f8e0
  https://github.com/groonga/gcs/commit/5da889451e1e6c72bd1292765912014ae094f8e0

  Log:
    Implement pager on web dashboard. Closes #33

  Modified files:
    public/javascripts/gcs.js
    views/index.jade
    views/layout.jade

  Modified: public/javascripts/gcs.js (+38 -7)
===================================================================
--- public/javascripts/gcs.js    2012-07-10 10:34:27 +0900 (56c698b)
+++ public/javascripts/gcs.js    2012-07-10 12:47:06 +0900 (79fd616)
@@ -1,7 +1,36 @@
-function renderResults(data) {
+function renderResults(data, perPage) {
   var template = $('script#results-template').text();
   var rendered = jade.compile(template)(data);
+  var found = data.hits.found;
+  var start = data.hits.start;
+  var returned = data.hits.hit.length;
+  var nextStart = start + perPage;
+  var previousStart = data.hits.start - perPage;
   $('#results').html(rendered);
+
+  if (previousStart < 0) {
+    $('#pager .previous').addClass('disabled');
+    $('#pager .previous a').click(function() { return false; });
+  } else {
+    $('#pager .previous a').click(function() {
+      $('form#search input[name="start"]').val(previousStart);
+      searchExecute();
+    });
+  }
+
+  if (nextStart >= data.hits.found) {
+    $('#pager .next').addClass('disabled');
+    $('#pager .previous a').click(function() { return false; });
+  } else {
+    $('#pager .next a').click(function() {
+      $('form#search input[name="start"]').val(nextStart);
+      searchExecute();
+    });
+  }
+
+  var from = start + 1;
+  var to = start + returned;
+  $('#showing').text('Showing ' + from + ' to ' + to + ' of ' + found + ' Results');
 }
 
 function renderRequestInformation(data) {
@@ -10,22 +39,24 @@ function renderRequestInformation(data) {
   $('#request-information').html(rendered);
 }
 
-function onSearch() {
+function searchExecute() {
   var query = $('form#search input[name="query"]').val();
   var domain = $('form#domain input[name="domain-name"]').val();
   var searchEndpoint = 'http://search-' + domain + '-00000000000000000000000000.localhost:7575/2011-02-01/search';
-  var params = {q: query};
+  var perPage = 5;
+  var start = parseInt($('form#search input[name="start"]').val() || '0', 10);
+  var params = {q: query, size: perPage, start: start};
   var urlForRawRequest = searchEndpoint + '?' + jQuery.param(params);
   renderRequestInformation({urlForRawRequest: urlForRawRequest});
 
-  $('#results').hide();
+  $('#results').empty();
   $.ajax({
     type: 'GET',
     url: searchEndpoint,
     data: params,
     dataType: 'jsonp',
     success: function(data) {
-      renderResults(data);
+      renderResults(data, perPage);
       $('#results').show();
     }
   });
@@ -33,6 +64,6 @@ function onSearch() {
 }
 
 $(document).ready(function($) {
-  $('form#domain').submit(onSearch);
-  $('form#search').submit(onSearch);
+  $('form#domain').submit(searchExecute);
+  $('form#search').submit(searchExecute);
 });

  Modified: views/index.jade (+1 -0)
===================================================================
--- views/index.jade    2012-07-10 10:34:27 +0900 (c17ffef)
+++ views/index.jade    2012-07-10 12:47:06 +0900 (9e8add1)
@@ -1,6 +1,7 @@
 form#search.form-search
   input.search-query(type="text", name="query", value="")
   input.btn(type="submit", value="Search")
+  input(type="hidden", name="start", value="")
 
 #request-information
 #results

  Modified: views/layout.jade (+7 -1)
===================================================================
--- views/layout.jade    2012-07-10 10:34:27 +0900 (27778d1)
+++ views/layout.jade    2012-07-10 12:47:06 +0900 (1835a60)
@@ -12,11 +12,17 @@ html
       |  span view raw:
       |  a(href=urlForRawRequest, target='_blank')= urlForRawRequest
     script#results-template(type="text/html")
+      |p#showing
+      |.pager#pager
+      |  li.previous
+      |    a(href="#") &larr; Previous
+      |  li.next
+      |    a(href="#") Next &rarr;
       |table.table.table-bordered
       |  if hits.hit.length > 0
       |    each record, index in hits.hit
       |      tr.id-row
-      |        td= index + 1
+      |        td= hits.start + index + 1
       |        td.id-cell(colspan="2")= record.id
       |      each value, columnName in record.data
       |        tr
-------------- next part --------------
HTML$B$NE:IU%U%!%$%k$rJ]4I$7$^$7$?(B...
下载 



Groonga-commit メーリングリストの案内
Back to archive index