Resetting iDisplayStart whil doing Sorting

Mercy

Hi allan,

I am using Datatables plugin for displaying a table of data.

I am running into lot of issues.

1. When I am trying to load datatable with new data, I'm getting Javascript error in fnAdjustColumnSizing() as oFeatures is null or not an object.

2. The iDisplayStart is reset to 0 whenever I do sorting.

(Example Scenario: Consider I have 12 entries in my table. The first 10 entries will be displayed in First page. When i click on "Next" button the iDisplayStart is set to 10. The remaining 2 entries are displayed in the second(next) page. When i click on Sort icon in any of the columns in second page, iDisplayStart is reset to zero. I have gone through the discussions regarding this in this blog. But I am unable to fit those solutions for my requirements)

Kindly guide me in this regard.

var columnValues = [];
var columnData = [];
var dataTableParameters = {};
function ShowSearchData(searchData) {
if (oTable != "") {
//Delete the data table object
$("#" + resultsDatatable).dataTable().fnDestroy();
//Remove all the DOM elements
$("#" + resultsDatatable).empty();
InitializeDataTable(searchData);
}
else {
InitializeDataTable(searchData);
}
}

/*
* This function is used to initialize Datatable
*/
function InitializeDataTable(searchData) {
GetColumnNames(searchData);
oTable = $("#resultsDatatable").dataTable({
// Options
"bRetrieve": true,
"bDestroy": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bSort": true,
"bFilter": false,
"sScrollX": "98%",
"bScrollCollapse": true,
"bServerSide": true,
"sServerMethod": "POST",
"sAjaxSource": "/Search/GetColumnValues",
"fnServerData": function (sSource, aoData, fnCallback) {
GetValueFromaoData(aoData, "sEcho");
GetValueFromaoData(aoData, "iDisplayLength");
GetValueFromaoData(aoData, "iDisplayStart");
GetValueFromaoData(aoData, "sSortDir_0");
GetValueFromaoData(aoData, "iSortCol_0");
$.ajax({
type: "POST",
url: sSource,
dataType: "json",
data: { "dataTableParameters": JSON.stringify(dataTableParameters).replace(/[\[\]]/g, ''), "searchData": JSON.stringify(searchData) },
async: false,
success: function (resp) {
if (resp != null) {
var respObject = $.parseJSON(resp);
//Getting column values
columnData = [];
for (var rowCount = 0; rowCount < respObject.aaData.length; rowCount++) {
for (var values in respObject.aaData[rowCount]) {
columnValues.push(respObject.aaData[rowCount][values]);
}
columnData.push(columnValues);
columnValues = [];
}
}
var mapJsonResult = {};
mapJsonResult["iTotalRecords"] = respObject.iTotalRecords,
mapJsonResult["iTotalDisplayRecords"] = respObject.iTotalRecords,
mapJsonResult["aaData"] = columnData;
fnCallback(mapJsonResult);
},
});
},
"aoColumns": columnHeaders,
});
showSection("results", "resultsToggle");
$(window).bind('resize', function () {
AdjustColumnSizing(oTable);
});
// Fix datatables resize - doesn't do anything when scroll on?
// http://www.datatables.net/ref#fnAdjustColumnSizing
// http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html
// http://www.datatables.net/forums/discussion/15150/column-formatting-issue

// Make some elements non selectable
$('.dataTables_scrollHead').disableSelection();
$('.dataTables_paginate').disableSelection();
}

/*
* This function is used to get value from aoData
*/
function GetValueFromaoData(aoData, keyName) {
var aoDataLength = aoData.length;
for (var aoDataCount = 0; aoDataCount < aoData.length; aoDataCount++) {
if (aoData[aoDataCount].name == keyName) {
switch (keyName) {
case "sEcho":
dataTableParameters["sEcho"] = aoData[aoDataCount].value;
break;
case "iDisplayLength":
dataTableParameters["iDisplayLength"] = aoData[aoDataCount].value;
break;
case "iDisplayStart":
dataTableParameters["iDisplayStart"] = aoData[aoDataCount].value;
break;
case "sSortDir_0":
dataTableParameters["sSortDir"] = aoData[aoDataCount].value;
break;
case "iSortCol_0":
dataTableParameters["iSortCol"] = aoData[aoDataCount].value;
break;
}
}
}
}

/*
* This function is used to get the column names from the datatable
*/
var columnHeaders = [];
function GetColumnNames(searchData) {
var searchQuery = { 'searchData': searchData };
//Getting the Column Headers of the table
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Search/GetColumnNames",
data: JSON.stringify(searchQuery),
dataType: "json",
async: false,
success: function (resp) {
columnHeaders = [];
if (resp != null) {
//Getting the column names
for (var headerCount = 0; headerCount < resp.length; headerCount++) {
columnHeaders.push({ "sTitle": resp[headerCount] });
}
}
},
});
}