Sorting doesn't work
Sorting doesn't work
Hi
I am having trouble with automatic sorting.
In my app I am retrieving data from a sql server database table and pass it to my datatable using Json. Everything works fine except that the sorting function of dataTable doesn't work on this data. The data is displayed in the same order as it is in the database so default sorting doesn't work either. From what I noticed it seems that it cannot sort the data because when I click the column header processing tag appears and also when I am not on the first page it sends me to it.
here is my script
@section _scripts
{
var asInitVals = new Array();
$(document).ready(function () {
var oTable;
oTable = $('#locationTable').dataTable({
"bJQueryUI": true,
"bAutoWidth": true,
"bFilter": true,
"iDisplayLength": 3,
"sDom": "ft<'row gridFooterLayout'<'col-md-6'i><'col-md-6'p>>",
"sPaginationType": "bs_normal",
"bServerSide": true,
"sAjaxSource": "@Url.Action("LocationList","Admin")",
"bProcessing": true,
"bSort": true,
"oLanguage": {
"sSearch": "Search all columns:"
},
"aoColumns": [
{
"sName": "ID",
"sWidth": "80px",
"sClass": "center",
"bSearchable": false,
"bSortable": false,
"fnRender": function(oObj) {
return '';
}
},
{
"sName": "Nume",
"sType": "string-case",
"bSortable": true
},
{
"sName": "Type",
"sType": "string-case",
"bSortable":true
}
],
});
// oTable.fnSort([1, 'asc']);
$("tfoot input").keyup(function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, $("tfoot input").index(this));
});
$("tfoot input").each(function (i) {
asInitVals[i] = this.value;
});
$("tfoot input").focus(function () {
if (this.className == "search_init") {
this.className = "";
this.value = "";
}
});
$("tfoot input").blur(function (i) {
if (this.value == "") {
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
$('#').keyup(function () { oTable.fnDraw(); });
$('#collapse-panel').click(function () {
var classname = $(this).find('span').attr('class');
if (classname === "glyphicon glyphicon-chevron-down")
$(this).find('span').attr('class', 'glyphicon glyphicon-chevron-up');
else if (classname === "glyphicon glyphicon-chevron-up")
$(this).find('span').attr('class', 'glyphicon glyphicon-chevron-down');
});
});
}
and that's how controller looks:
public ActionResult LocationList(LocationDataTableModel param1)
{
var allLocations = _unitOfWork.LocationRepository.Query().Get().ToList();
var locationType = _unitOfWork.LocationTypeRepository.Query().Get().ToList();
var nameFilter = Convert.ToString(Request["sSearch_1"]);
IEnumerable filteredLoc;
if (!string.IsNullOrEmpty(nameFilter))
{
filteredLoc = allLocations.Where(c => (nameFilter == "" || c.Name.ToLower().Contains(nameFilter.ToLower())));
}
else
{
filteredLoc = allLocations;
}
var displayItems = filteredLoc.Skip(param1.iDisplayStart).Take(param1.iDisplayLength);
var result = displayItems.Select(m => new object[] { m.LocationId.ToString(CultureInfo.InvariantCulture), m.Name, m.LocationType.Name });
JsonResult xResult = Json(new
{
sEcho = param1.sEcho,
iTotalRecords = allLocations.Count(),
iTotalDisplayRecords = filteredLoc.Count(),
iSortingCols = 1,
aaData = result
}, JsonRequestBehavior.AllowGet);
return xResult;
}
I am having trouble with automatic sorting.
In my app I am retrieving data from a sql server database table and pass it to my datatable using Json. Everything works fine except that the sorting function of dataTable doesn't work on this data. The data is displayed in the same order as it is in the database so default sorting doesn't work either. From what I noticed it seems that it cannot sort the data because when I click the column header processing tag appears and also when I am not on the first page it sends me to it.
here is my script
@section _scripts
{
var asInitVals = new Array();
$(document).ready(function () {
var oTable;
oTable = $('#locationTable').dataTable({
"bJQueryUI": true,
"bAutoWidth": true,
"bFilter": true,
"iDisplayLength": 3,
"sDom": "ft<'row gridFooterLayout'<'col-md-6'i><'col-md-6'p>>",
"sPaginationType": "bs_normal",
"bServerSide": true,
"sAjaxSource": "@Url.Action("LocationList","Admin")",
"bProcessing": true,
"bSort": true,
"oLanguage": {
"sSearch": "Search all columns:"
},
"aoColumns": [
{
"sName": "ID",
"sWidth": "80px",
"sClass": "center",
"bSearchable": false,
"bSortable": false,
"fnRender": function(oObj) {
return '';
}
},
{
"sName": "Nume",
"sType": "string-case",
"bSortable": true
},
{
"sName": "Type",
"sType": "string-case",
"bSortable":true
}
],
});
// oTable.fnSort([1, 'asc']);
$("tfoot input").keyup(function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, $("tfoot input").index(this));
});
$("tfoot input").each(function (i) {
asInitVals[i] = this.value;
});
$("tfoot input").focus(function () {
if (this.className == "search_init") {
this.className = "";
this.value = "";
}
});
$("tfoot input").blur(function (i) {
if (this.value == "") {
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
$('#').keyup(function () { oTable.fnDraw(); });
$('#collapse-panel').click(function () {
var classname = $(this).find('span').attr('class');
if (classname === "glyphicon glyphicon-chevron-down")
$(this).find('span').attr('class', 'glyphicon glyphicon-chevron-up');
else if (classname === "glyphicon glyphicon-chevron-up")
$(this).find('span').attr('class', 'glyphicon glyphicon-chevron-down');
});
});
}
and that's how controller looks:
public ActionResult LocationList(LocationDataTableModel param1)
{
var allLocations = _unitOfWork.LocationRepository.Query().Get().ToList();
var locationType = _unitOfWork.LocationTypeRepository.Query().Get().ToList();
var nameFilter = Convert.ToString(Request["sSearch_1"]);
IEnumerable filteredLoc;
if (!string.IsNullOrEmpty(nameFilter))
{
filteredLoc = allLocations.Where(c => (nameFilter == "" || c.Name.ToLower().Contains(nameFilter.ToLower())));
}
else
{
filteredLoc = allLocations;
}
var displayItems = filteredLoc.Skip(param1.iDisplayStart).Take(param1.iDisplayLength);
var result = displayItems.Select(m => new object[] { m.LocationId.ToString(CultureInfo.InvariantCulture), m.Name, m.LocationType.Name });
JsonResult xResult = Json(new
{
sEcho = param1.sEcho,
iTotalRecords = allLocations.Count(),
iTotalDisplayRecords = filteredLoc.Count(),
iSortingCols = 1,
aaData = result
}, JsonRequestBehavior.AllowGet);
return xResult;
}
This discussion has been closed.
Replies
Allan