Merge branch 'master' of github.com:mleibman/SlickGrid

mleibman · Jul 11, 2013 · c8cd940 · c8cd940
2 parents bf8524b + 25bcca7
commit c8cd940
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 21 deletions.
diff --git a/examples/example6-ajax-loading.html b/examples/example6-ajax-loading.html
@@ -37,10 +37,10 @@
 <body>
 <div style="width:700px;float:left;">
   <div class="grid-header" style="width:100%">
-    <label>Digg stories</label>
+    <label>Hackernews stories</label>
         <span style="float:right;display:inline-block;">
           Search:
-          <input type="text" id="txtSearch" value="apple">
+          <input type="text" id="txtSearch" value="github">
         </span>
   </div>
   <div id="myGrid" style="width:100%;height:600px;"></div>
@@ -55,8 +55,7 @@ <h2>Demonstrates:</h2>
 
   <h2>WARNING:</h2>
   <ul>
-    <li>Digg API uses request rate limiting. You may occasionally get an error if you do a frequent
-      scrolling/resorting/searching.
+    <li>API access to Hackernews provided through ThriftDB has some latency when paging through results. Be patient.
     </li>
   </ul>
 </div>
@@ -77,15 +76,25 @@ <h2>WARNING:</h2>
   var loader = new Slick.Data.RemoteModel();
 
   var storyTitleFormatter = function (row, cell, value, columnDef, dataContext) {
-    return "<b><a href='" + dataContext["link"] + "' target=_blank>" +
-        dataContext["title"] + "</a></b><br/>" + dataContext["description"];
+    s ="<b><a href='" + dataContext["url"] + "' target=_blank>" +
+              dataContext["title"] + "</a></b><br/>";
+    desc = dataContext["text"];
+    if (desc) { // on Hackernews many stories don't have a description
+        s += desc;
+    }
+    return s;
+  };
+
+  var dateFormatter = function (row, cell, value, columnDef, dataContext) {
+    return (value.getMonth()+1) + "/" + value.getDate() + "/" + value.getFullYear();
   };
 
 
   var columns = [
     {id: "num", name: "#", field: "index", width: 40},
-    {id: "story", name: "Story", width: 580, formatter: storyTitleFormatter, cssClass: "cell-story"},
-    {id: "diggs", name: "Diggs", field: "diggs", width: 60, sortable: true}
+    {id: "story", name: "Story", width: 520, formatter: storyTitleFormatter, cssClass: "cell-story"},
+    {id: "date", name: "Date", field: "create_ts", width: 60, formatter: dateFormatter, sortable: true},
+    {id: "points", name: "Points", field: "points", width: 60, sortable: true}
   ];
 
   var options = {
@@ -145,6 +154,10 @@ <h2>WARNING:</h2>
       }
     });
 
+    loader.setSearch($("#txtSearch").val());
+    loader.setSort("create_ts", -1);
+    grid.setSortColumn("date", false);
+
     // load the first page
     grid.onViewportChanged.notify();
   })

diff --git a/slick.remotemodel.js b/slick.remotemodel.js
@@ -1,14 +1,14 @@
 (function ($) {
   /***
    * A sample AJAX data store implementation.
-   * Right now, it's hooked up to load all Apple-related Digg stories, but can
-   * easily be extended to support and JSONP-compatible backend that accepts paging parameters.
+   * Right now, it's hooked up to load Hackernews stories, but can
+   * easily be extended to support any JSONP-compatible backend that accepts paging parameters.
    */
   function RemoteModel() {
     // private
     var PAGESIZE = 50;
     var data = {length: 0};
-    var searchstr = "apple";
+    var searchstr = "";
     var sortcol = null;
     var sortdir = 1;
     var h_request = null;
@@ -53,6 +53,10 @@
         from = 0;
       }
 
+      if (data.length > 0) {
+        to = Math.min(to, data.length - 1);
+      }
+
       var fromPage = Math.floor(from / PAGESIZE);
       var toPage = Math.floor(to / PAGESIZE);
 
@@ -67,12 +71,10 @@
         return;
       }
 
-      var url = "http://services.digg.com/search/stories?query=" + searchstr + "&offset=" + (fromPage * PAGESIZE) + "&count=" + (((toPage - fromPage) * PAGESIZE) + PAGESIZE) + "&appkey=http://slickgrid.googlecode.com&type=javascript";
+      var url = "http://api.thriftdb.com/api.hnsearch.com/items/_search?filter[fields][type][]=submission&q=" + searchstr + "&start=" + (fromPage * PAGESIZE) + "&limit=" + (((toPage - fromPage) * PAGESIZE) + PAGESIZE);
 
-      switch (sortcol) {
-        case "diggs":
-          url += ("&sort=" + ((sortdir > 0) ? "digg_count-asc" : "digg_count-desc"));
-          break;
+      if (sortcol != null) {
+          url += ("&sortby=" + sortcol + ((sortdir > 0) ? "+asc" : "+desc"));
       }
 
       if (h_request != null) {
@@ -88,7 +90,7 @@
         req = $.jsonp({
           url: url,
           callbackParameter: "callback",
-          cache: true, // Digg doesn't accept the autogenerated cachebuster param
+          cache: true,
           success: onSuccess,
           error: function () {
             onError(fromPage, toPage)
@@ -105,11 +107,17 @@
     }
 
     function onSuccess(resp) {
-      var from = this.fromPage * PAGESIZE, to = from + resp.count;
-      data.length = parseInt(resp.total);
+      var from = resp.request.start, to = from + resp.results.length;
+      data.length = Math.min(parseInt(resp.hits),1000); // limitation of the API
+
+      for (var i = 0; i < resp.results.length; i++) {
+        var item = resp.results[i].item;
+
+        // Old IE versions can't parse ISO dates, so change to universally-supported format.
+        item.create_ts = item.create_ts.replace(/^(\d+)-(\d+)-(\d+)T(\d+:\d+:\d+)Z$/, "$2/$3/$1 $4 UTC"); 
+        item.create_ts = new Date(item.create_ts);
 
-      for (var i = 0; i < resp.stories.length; i++) {
-        data[from + i] = resp.stories[i];
+        data[from + i] = item;
         data[from + i].index = from + i;
       }