capturetheflag
asked on
How do I sort a column with images using jQuery Data tables
Hello,
in my column in every row I show a check.png image or a cancel.png depending on a check, I would like sort this column by the type of image,, how can I do that? I am using Classic ASP with JQuery data tables.
Here is the ASP code. Thanks for the help.
Here is the java script code.
in my column in every row I show a check.png image or a cancel.png depending on a check, I would like sort this column by the type of image,, how can I do that? I am using Classic ASP with JQuery data tables.
Here is the ASP code. Thanks for the help.
<td>
<%if rs("active_flag") = "Y" then%>
<img src="images/icons/check.png" border="0" title="This category is currently active." alt="This category is currently active."/>
<%elseif rs("active_flag") = "N" then%>
<img src="images/icons/cancel.png" bsorder="0" title="This category is currently inactive." alt="This category is currently inactive."/>
<%else%>
<%end if%>
</td>
Here is the java script code.
<script type="text/javascript">
$(document).ready(function () {
$("#category_list").dataTable({
bJQueryUI: true
});
});
</script>
ASKER
Hello leakim971,
Thanks for your help. I read the link and used your code but, it does not work. What am I missing? Here is the code for the column headers. I am concerned with the 'Active' column.
Here is how I used the code you have given me.
Thanks for your help. I read the link and used your code but, it does not work. What am I missing? Here is the code for the column headers. I am concerned with the 'Active' column.
<thead>
<tr>
<th scope="col">Edit</th>
<th scope="col">Active</th>
<th scope="col" align="left">Name</th>
<th scope="col" align="left">Nemis ID</th>
</tr>
</thead>
Here is how I used the code you have given me.
$.fn.dataTableExt.afnSortData['dom-Active'] = function ( oSettings, iColumn )
{
return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
var checked = $("img:eq(0)", tr).attr("src").indexOf("check.png") >= 0;
return checked ? '1' : '0';
} );
}
$("document").ready(function () {
$("#personnel_list").dataTable({
bJQueryUI: true,
})
"aoColumns": [
null,
{ "sSortDataType": "dom-Active" },
null,
null
]
});
could you post the HTML for the table too ?
(right click in the page browser, choose view source)
(right click in the page browser, choose view source)
ASKER
hello leakim971;
Here is the HTML code.
Here is the java script code
Here is the HTML code.
<div id="personnel_list_area" style="margin-top: 2em; background-color: #CCC">
<table id="personnel_list" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th scope="col">Edit</th>
<th scope="col">Active</th>
<th scope="col" align="left">Name</th>
<th scope="col" align="left">Nemis ID</th>
</tr>
</thead>
Here is the java script code
<script type="text/javascript">
$("document").ready(function () {
$("#personnel_list").dataTable({
bJQueryUI: true
});
$( "#username" ).autocomplete({
source: "source3.asp",
minLength: 2
});
$("#insert_button").click(function(){
window.location.href = "personnel.asp?username=" + $('#username').val()+"&action=insert";
});
});
</script>
I'm looking for the tbody of the table, three lines is good
ASKER
Here is the tbody code,
<tbody>
<tr>
<td scope="row"><a class="modalLink" href="update_personnel.asp?personnel_id=14&user_id=AA1"><img src="images/icons/edit.png" border="0" alt="Edit" title="Edit"/></a></td>
<td>
<img src="images/icons/check.png" border="0" alt="This associated contract type is currently active." title="This associated contract type is currently active."/>
</td>
<td align="left">A1, A1 </td>
<td align="left">AA1</td>
</tr>
ASKER
Here is some HTML tbody code from a similar data table;
<tbody>
<tr>
<td scope="row"><a class="modalLink" href="update_categories.asp?category_id=6"><img src="images/icons/edit.png" border="0" title="Edit the category description, details, and active status." alt="Edit the category description, details, and active status."/></a></td>
<td>
<img src="images/icons/cancel.png" bsorder="0" title="This category is currently inactive." alt="This category is currently inactive."/>
</td>
<td>123 TEST Category</td>
<td>this is Wednesday</td>
</tr>
<tr>
<td scope="row"><a class="modalLink" href="update_categories.asp?category_id=18"><img src="images/icons/edit.png" border="0" title="Edit the category description, details, and active status." alt="Edit the category description, details, and active status."/></a></td>
<td>
<img src="images/icons/cancel.png" bsorder="0" title="This category is currently inactive." alt="This category is currently inactive."/>
</td>
<td>123abc2</td>
<td>1112223332 More data</td>
</tr>
<tr>
<td scope="row"><a class="modalLink" href="update_categories.asp?category_id=51"><img src="images/icons/edit.png" border="0" title="Edit the category description, details, and active status." alt="Edit the category description, details, and active status."/></a></td>
<td>
<img src="images/icons/check.png" border="0" title="This category is currently active." alt="This category is currently active."/>
</td>
<td>222</td>
<td>232dfdsfsadf</td>
</tr>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hello leakim971,
I tried the jsfiddle demo. The header sort option does not work on any of the columns.
I tried the jsfiddle demo. The header sort option does not work on any of the columns.
there's no sort attached to the other columns
you should take time to understand the code from now
you should take time to understand the code from now
ASKER
Hello leakim971,
The light bulb just went on! Thanks, for the help.
I will be doing more data table stuff and would like to contact you in the future.
The light bulb just went on! Thanks, for the help.
I will be doing more data table stuff and would like to contact you in the future.
ASKER
Thanks Woo! Hoo!
Open in new window