Ajax Sorl sort columns Datatable
Ajax Sorl sort columns Datatable

Description of problem:
Hello,
Columns don't sort me and page doesn't change on page.
Please help
DataTableWidget.js
(function ($) {
AjaxSolr.DataTableWidget = AjaxSolr.AbstractWidget.extend({
currentColumns: [],
currentData: [[]],
init: function () {
var self = this; // So we can use the this reference from inner function
// FIRST BUILD THE COLUMNS from the first row (change this in the future)
this.currentColumns = [];
$(this.target).DataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "https:....",
"fnServerData": function (sSource, aoData, fnCallback, settings) {
/* Add some extra data to the sender
aoData.push( { "id": "more_data", "value": "my_value" } );*/
self.manager.store.addByValue('rows', parseInt(settings._iDisplayLength));
self.manager.store.addByValue('q', '*:*');
self.manager.doRequest();
self.manager.setCallback(this, fnCallback);
},
"aoColumns": [
{aoData : "id" },
{aoData : "_text_" ,
"defaultContent": ""
}
]
});
},
afterRequest: function () {
}
});
function getSetting(aoData, settingName) {
var returnValue;
$.each(aoData, function (key, value) {
if (value.name == settingName) {
returnValue = value.value;
return false;
}
});
return returnValue;
}
})(jQuery);
DataTableManager.js
(function (callback) {
if (typeof define === 'function' && define.amd) {
define(['core/AbstractManager'], callback);
}
else {
callback();
}
}(function () {
AjaxSolr.DataTableManager = AjaxSolr.AbstractManager.extend({
fields: null,
datatable: null,
fnCallback: null,
convertedData: null,
executeRequest: function (servlet, string, handler, errorHandler, disableJsonp) {
var self = this;
if (this.proxyUrl) {
jQuery.post(this.proxyUrl, { query: this.store.string() }, function (data) { self.handleResponse(data); }, 'json');
} else {
jQuery.getJSON(this.solrUrl + servlet + '?' + this.store.string() + '&wt=json&json.wrf=?', {}, function (data) {
self.handleResponse(data);
if (typeof self.response.response.docs[0] != 'undefined') {
var currentColumns = [];
$.each(self.response.response.docs[0], function (key, row) {
currentColumns[currentColumns.length] = { "id": key };
});
// BUILD THE ROWS
var currentData = [];
$.each(self.response.response.docs, function (key, row) {
var newrow = [];
$.each(row, function (key, value) {
newrow[newrow.length] = value;
});
currentData[currentData.length] = newrow;
});
}
// COLUMNS
self.convertedData = {};
self.convertedData["iTotalDisplayRecords"] = self.response.response.numFound;
self.convertedData["iTotalRecords"] = self.response.response.numFound;
self.convertedData["aaData"] = currentData;
self.convertedData["aoColumns"] = currentColumns;
self.fnCallback(self.convertedData);
});
}
},
setCallback: function (dTable, dtFnCallback) {
this.datatable = dTable;
this.fnCallback = dtFnCallback;
}
});
}));
Answers
You have server-side processing enabled, so the sorting must be done by your server-side script. I’ve never written with Solr before myself, but I don’t see anything in your code above that would handle the sorting (or filtering for that matter).
Do you really need server-side processing? Have you got tens of thousands or more records?
Allan
Thanks.
I have 11.000 records.
In the end I was able to solve it:
var table = $(this.target).dataTable({
"bJQueryUI": true,
"pagingType": "full_numbers_no_ellipses",
"dom": "tr" +
"<'row'<'col-xs-6'l><'col-xs-6'p>>",
"drawCallback": function (settings) {
var api = this.api();
$('#pager-header').html(settings._iRecordsTotal);
// Output the data for the visible rows to the browser's console
// console.log(api.rows({ page: 'current' }).data());
},
"rowCallback": function (row, aoData) {
var description = "..."+ aoData[5][0].toString().substring(0,50)+"...";
var title = '<a href="'+aoData[3]+'">'+ aoData[4][0] +'</a>'+'<br>'+'
'+ description+'
'
$('td:eq(1)', row).html(title);
},
"bLengthChange": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": null,
"fnServerData": function (sSource, aoData, fnCallback, settings) {
// Rownumber
var rows = getSetting(aoData, 'iDisplayLength');
self.manager.store.addByValue('rows', settings._iDisplayLength);
// Filtering
if (typeof q != 'undefined') {
var q = getSetting(aoData, 'sSearch');
if (q.length > 0)
self.manager.store.addByValue('q', q);
else self.manager.store.addByValue('q', '*:*');
}
self.manager.store.addByValue('q', '*:*');
// Fields
self.manager.store.addByValue('fl', Mfields);
Thank you