SlickGrid AJAX data

Question

I'm trying to get AJAX working with SlickGrid. The example given is hardcoded for Digg.

Also, I don't think the cache is working in that example. And because of the Digg rate limiting, it's hard to really get feel for how it works. How can I setup SlickGrid to get data from my database with paging.

Solution 1

I just went through this, so here's how I did it:

1. Copy content of example6-ajax-loading.html (in the SlickGrid download) into your html file - let's call it mygrid.html (Or into your code that generates html. In my case I'm using CodeIgniter, so I copied into mygrid_view.php).

2. Copy slick.remotemodel.js to yourRemoteModel.js.

3. In "mygrid.html" make sure you have the correct path to all the javascript files. Change slick.remotemodel.js to yourRemoteModel.js. Eliminate any duplicate scripts - for exmaple, if you already are pulling in a recent version of jQuery then eliminate the line in "mygrid.html" that pulls in jquery-1.4.3.min.js.

4. In "mygrid.html", change the initialization of the 'columns' variable to match the data you want to display from your database. Pay attention to the field property. This must agree with the property names that will be returned in the JSON response from your server. (*see note about this at the end).

5. In yourRemoteModel.js, change the url variable to point to your server, passing appropriate arguments. In my case I pass page and rows paramters to my server like this:

   var url = myServerUrl+"?page="+fromPage+"&rows="+(((toPage - fromPage) * PAGESIZE) + PAGESIZE);

6. In yourRemoteModel.js, change the jsonp call to ajax - unless you need to do this cross-domain, in which case you'll want to stay with jsonp, otherwise you can change it to look like this:

           req = $.ajax({
               url: url,
               dataType: 'json',
               success: onSuccess,
               error: function(){
                   onError(fromPage, toPage)
               }
               });
   

7. In yourRemoteModel.js, you must now customize the onSuccess() function. Follow the pattern of the example, setting from and to be the integer offsets into the data records, setting data.length to be the total number of records, and then setting the data array. This code is dependent on what the JSON response from your server looks like.

8. Now write the code on the server to generate the JSON response. As you can see from step 7, this needs to include the record (or page) offset into the data, and an indication of how many records are being returned, as well as an array of the records themselves. Remember that each field of each record must have a property name that matches the 'field' setting in your column definitions (from step 4 above). Take a look at the response from Digg as an example:

http://services.digg.com/search/stories?query=apple&offset=0&appkey=http://slickgrid.googlecode.com&type=javascript&callback=cb

And that should do it!

*Note: in my case I didn't want to use the bandwidth to return all those property names repeated for every record in the JSON response, so instead I return an array of the record values. I then set the field property in the column description (step 4 above) to be an integer offset into this array. So in the column descriptions, instead of field:'someFieldName", I use field:3, then in my remote model, onSuccess() function I'm setting data[from+i] = resp.record[i].data (where .data is an array in the JSON response of the field values in the record). So far this seems to be working well for me (but might be harder to debug if something goes wrong).

Solution 2

See this pull request A functional AJAX Data Store Example now using HackerNews instead of Digg. You can download this Slickgrid and look example6-ajax-loading.

Here has important observations about paging+ajax+slickgrid: Google Groups: SlickGrid Pagination + Ajax + DataView