Displaying REST JSON data in DataTables?

mn

I'm trying to display some Solr data in a DataTable. I've gone through the examples and questions/answers on this site, but am still stuck on actually displaying the returned data in the DT v.1.10.4.

The DT examples say different things about how much of a table needs declared. Some say to work up a full table layout; others say DT will do everything for you if making an AJAX call. For my example, I've declared a simple one as:

I then write a custom query to Solr and try to bind the results to DT. The Solr query works, and I create a JSON object of values where the odd entries are facet values (e.g., "Bananas") and the even entries are facet counts (e.g., 100). However, in the call to fnCallback(grid1Data), I get "TypeError: c is undefined" from line 36 in jquery.dataTables.min.js (show below), and also, the grid displays empty on the web page. (Assuming the two issues are related.)

var table = $("#grid1").dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "aaData": grid1Data,
                "sDom": 'Rlfrtip',
                "sAjaxSource": baseUrl,
                  "aoColumns": [{
                    "sTitle": "Name",
                    "sWidth": "250px"
                }, {
                    "sTitle": "Count",
                    "sWidth": "250px"
                } ],
                "fnServerData": function (sSource, aoData, fnCallback) {
                    echo = aoData[0].value;

                    var jqXHR = $.ajax({
                        dataType: 'jsonp',
                        url: baseUrl,
                        data: {'wt':'json', 'q':'*:*', 'fq':'opt1:dr*', 'fq':'field2:field2value', 'facet':true,'facet.field':'fieldname','facet.limit':10 },
                        jsonp:'json.wrf',

                        success: function (data) {
                            grid1Data = {};
                            var values = data.facet_counts.facet_fields.fieldname;

                            $.each(values, function (index, value) {
                                if (index % 2 == 0){
                                    grid1Data[value] = values[index +1];
                                };
                            });

                            fnCallback(grid1Data);   // "TypeError: c is undefined." 
                        },
                        error: function (xhr, status, error) {
                            alert(xhr.status);
                            alert(error);
                        }
                    });
                }
            });

jquery.dataTables.min.js[36]:

b.recordsTotal,d=b.iTotalDisplayRecords!==l?b.iTotalDisplayRecords:b.recordsFiltered;if(c){if(1*c<a.iDraw)return;a.iDraw=1*c}na(a);a._iRecordsTotal=parseInt(e,10);a._iRecordsDisplay=parseInt(d,10);c=ra(a,b);e=0;for(d=c.length;e<d;e++)I(a,c[e]);a.aiDisplay=a.aiDisplayMaster.slice();a.bAjaxDataGet=!1;L(a);a._bInitComplete||sa(a,b);a.bAjaxDataGet=!0;B(a,!1)}function ra(a,b){var c=g.isPlainObject(a.ajax)&&a.ajax.dataSrc!==l?a.ajax.dataSrc:a.sAjaxDataProp;return"data"===c?b.aaData||b[c]:""!==c?W(c)(b):

Any idea what I'm doing wrong and how to fix it?

Thanks!

allan

Have you fully implemented server-side processing since you have enabled it (in legacy mode)?

Beyond that, we would need a link to the page showing the issue, as required in the forum rules.

Allan