fnSortNeutral Issue?
fnSortNeutral Issue?
I am building a web application for work (http://www.orbitform.com/orbitform_srsc_2013/) and I am using the fnSortNeutral plugin to handle a situation where the users can clear all the filter and sort data currently used in the listing of the data.
The problem I am running into is as follows:
After the "Reset Page" button is click it performs the proper jQuery function to reset the values. This then sets the data back to the original sort when the data is initially loaded (See the Notes section). When I click on the "Company" table header it takes two clicks to do a descending sort. All of the other fields are able to be sorted properly with one click each. I've search around the js fiel to figure out where this was being set with no avail.
My question is: Is there anything in the fnSortNeutral plugin that might be causing this issue? Or is it something else?
If any one can assist me with this I would be grateful!
Kevin
Notes:
1. The "Company" field is used to do the initial sort of the page.
2. On the "Company" search box at the top I am using a regex to do search for the first characters that are entered into the form.
3. I also use DukeAstar's ListNav integration with DataTables.
4. I am pre-generating the table data prior to initializing the DataTables function.
5. Here is all of the jQuery code that does all of the magic:
[code]
var asInitVals = new Array();
$(document).ready(function()
{
$.fn.dataTableExt.oApi.fnSortNeutral = function ( oSettings )
{
/* Remove any current sorting */
oSettings.aaSorting = [];
/* Sort display arrays so we get them in numerical order */
oSettings.aiDisplay.sort( function (x,y) {
return x-y;
}
);
oSettings.aiDisplayMaster.sort( function (x,y) {
return x-y;
}
);
/* Redraw */
oSettings.oApi._fnReDraw( oSettings );
};
var oTable = $('#newTabTable').dataTable(
{
//"bProcessing": true,
//"bServerSide": true,
//"sAjaxSource": "prospect_leads.php"
"iDisplayLength": 200,
"aLengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]],
"aaSorting": [[ 1, "asc" ]],
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Global Field Search: "
},
"sDom": '<"alpha"Z><"info"lpi>rt<"info_bottom"pi>'
}
);
$("#kevin input").keyup(
function () {
//alert("^" + this.value);
var regex = '^' + this.value;
if($("#kevin input").index(this)== 0)
{
oTable.fnFilter(regex, 1, true);
} else if($("#kevin input").index(this)== 1)
{
oTable.fnFilter(this.value, 4, false);
}
//alert(key);
//oTable.fnFilter( this.value, 1, true);
//oTable.fnFilter(regex, key, true);
}
)
$("#kevin input").each(function(i) {
asInitVals[i] = this.value;
})
$("#kevin input").focus(function() {
if(this.className == "search_int")
{
this.className = "";
this.value = "";
}
})
$("#kevin input").blur( function ()
{
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("#kevin input").index(this)];
}
}
);
$("#clear").bind('click', function ()
{
oTable.fnFilter('',1);
oTable.fnFilter('',4);
$('.search_init').val("");
oTable.fnSortNeutral();
}
);
}
);
[/code]
The problem I am running into is as follows:
After the "Reset Page" button is click it performs the proper jQuery function to reset the values. This then sets the data back to the original sort when the data is initially loaded (See the Notes section). When I click on the "Company" table header it takes two clicks to do a descending sort. All of the other fields are able to be sorted properly with one click each. I've search around the js fiel to figure out where this was being set with no avail.
My question is: Is there anything in the fnSortNeutral plugin that might be causing this issue? Or is it something else?
If any one can assist me with this I would be grateful!
Kevin
Notes:
1. The "Company" field is used to do the initial sort of the page.
2. On the "Company" search box at the top I am using a regex to do search for the first characters that are entered into the form.
3. I also use DukeAstar's ListNav integration with DataTables.
4. I am pre-generating the table data prior to initializing the DataTables function.
5. Here is all of the jQuery code that does all of the magic:
[code]
var asInitVals = new Array();
$(document).ready(function()
{
$.fn.dataTableExt.oApi.fnSortNeutral = function ( oSettings )
{
/* Remove any current sorting */
oSettings.aaSorting = [];
/* Sort display arrays so we get them in numerical order */
oSettings.aiDisplay.sort( function (x,y) {
return x-y;
}
);
oSettings.aiDisplayMaster.sort( function (x,y) {
return x-y;
}
);
/* Redraw */
oSettings.oApi._fnReDraw( oSettings );
};
var oTable = $('#newTabTable').dataTable(
{
//"bProcessing": true,
//"bServerSide": true,
//"sAjaxSource": "prospect_leads.php"
"iDisplayLength": 200,
"aLengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]],
"aaSorting": [[ 1, "asc" ]],
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Global Field Search: "
},
"sDom": '<"alpha"Z><"info"lpi>rt<"info_bottom"pi>'
}
);
$("#kevin input").keyup(
function () {
//alert("^" + this.value);
var regex = '^' + this.value;
if($("#kevin input").index(this)== 0)
{
oTable.fnFilter(regex, 1, true);
} else if($("#kevin input").index(this)== 1)
{
oTable.fnFilter(this.value, 4, false);
}
//alert(key);
//oTable.fnFilter( this.value, 1, true);
//oTable.fnFilter(regex, key, true);
}
)
$("#kevin input").each(function(i) {
asInitVals[i] = this.value;
})
$("#kevin input").focus(function() {
if(this.className == "search_int")
{
this.className = "";
this.value = "";
}
})
$("#kevin input").blur( function ()
{
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("#kevin input").index(this)];
}
}
);
$("#clear").bind('click', function ()
{
oTable.fnFilter('',1);
oTable.fnFilter('',4);
$('.search_init').val("");
oTable.fnSortNeutral();
}
);
}
);
[/code]
This discussion has been closed.
Replies
Basically the problem is that fnSortNeutral is not a reset, but rather a complete lack of sorting - i.e. the order that it was originally read in as. That happens to be the same order as your company sort (due to the way it is read from the database I'd guess), but it is 'sorting' by DOM order, so your next click to sort on the company column does actually sort by the company, but it looks the same!
So what you want is not fnSortNeutral but rather just apply your original sorting - i.e.:
[code]
oTable.fnFilter( [[ 1, "asc" ]] );
[/code]
and that should do it.
Regards,
Allan