Missing Sort direction icons
Missing Sort direction icons
I've been working with DataTables for a few weeks now, and so far i've really been impressed. However, I've been having trouble getting some of the minor stuff to work correctly. I've spent the past several days (off and on) trying to figure out why the sort icons in the table headers aren't displaying. Also, I'm not sure if this is related or not, but I've noticed that the pagination buttons are either missing their icons or don't have the proper css "cursor: pointer" attribute applied (depending on the chosen format). Any ideas on what I'm missing here would be appreciated. Sample code is below.
[code]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SearchBox.aspx.cs" Inherits="SearchBox" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Dynamic Search
/* Global variable for the DataTables object */
var oTable;
$(document).ready(function(){
addAutoComplete();
addDataTable();
});
function addAutoComplete(){
$("#empl_Name").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
url: "SearchBox.aspx/EmployeeNames",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{ partial: '" + request.term +"'}",
success: function(msg) {
response($.map(msg.d,function(employeeName){
return{
label: employeeName,
value: employeeName
}
}
)
)
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown);
}
})
},
minLength: 2,
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
}
function addDataTable(){
TableToolsInit.sSwfPath = "swf/ZeroClipboard.swf"
oTable = $("#tblData").dataTable({
bJQueryUI: true,
bPaginate: true,
bLengthChange: true,
bFilter: true,
bSort: true,
bInfo: true,
bAutoWidth: false,
sPaginationType: "full_numbers",
"sDom": 'T<"clear"><"H"lfr>t<"F"ip>',
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$(nRow).mouseover(function(){$(this).addClass("ui-state-hover")});
$(nRow).mouseout(function(){$(this).removeClass("ui-state-hover")});
return nRow;
}
});
}
[/code]
[code]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SearchBox.aspx.cs" Inherits="SearchBox" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Dynamic Search
/* Global variable for the DataTables object */
var oTable;
$(document).ready(function(){
addAutoComplete();
addDataTable();
});
function addAutoComplete(){
$("#empl_Name").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
url: "SearchBox.aspx/EmployeeNames",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{ partial: '" + request.term +"'}",
success: function(msg) {
response($.map(msg.d,function(employeeName){
return{
label: employeeName,
value: employeeName
}
}
)
)
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown);
}
})
},
minLength: 2,
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
}
function addDataTable(){
TableToolsInit.sSwfPath = "swf/ZeroClipboard.swf"
oTable = $("#tblData").dataTable({
bJQueryUI: true,
bPaginate: true,
bLengthChange: true,
bFilter: true,
bSort: true,
bInfo: true,
bAutoWidth: false,
sPaginationType: "full_numbers",
"sDom": 'T<"clear"><"H"lfr>t<"F"ip>',
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$(nRow).mouseover(function(){$(this).addClass("ui-state-hover")});
$(nRow).mouseout(function(){$(this).removeClass("ui-state-hover")});
return nRow;
}
});
}
[/code]
This discussion has been closed.
Replies
function loadMatches(){
$.ajax({
type: "POST",
url: "SearchBox.aspx/EmployeeDetails",
data: "{ name: '" + $("#empl_Name" ).val()+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
oTable.fnClearTable();
$.each(msg.d, function(key, value) {
fnAddRow(value);
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest);
alert(textStatus);
alert(errorThrown);
}
});
}
function fnAddRow(data)
{
oTable.fnAddData( [[
data.employeeName,
data.supervisor,
data.extension,
data.state,
data.employeeNum ]] );
}
Name
Supervisor
Extension
State
Employee Number
[/code]
Allan
After looking at it in firebug, it looks like it's got the images positioned correctly (when hovering over css_right ui-icon ui-icon-carat-2-n-s in the firebug trace, it highlights an empty space in the far right corner of the appropriate header), but there doesnt appear to be an associated image.
Part of the firebug trace:
[code]
Name
Supervisor
Extension
State
Employee Number
[/code]
I did manage to track down the problem with the "cursor: pointer" attribute. It turns out that there are a bunch of .paging_full_numbers css classes in demo_table.css, and the one being applied was missing that attribute. Changing it to the below fixed the issue.
.paging_full_numbers {
width: 400px;
height: 22px;
line-height: 22px;
cursor: pointer;
}
Edit: After looking into it a bit further, it turns out the themeroller images were in the wrong path ([root]/images vs [root]/css/images). The images applied in demo_table.css were, however, in the correct directory, explaining why it would only work when bJQueryUI was set to false. Whoops!