Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3382
  • Last Modified:

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.

        <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%>
		&nbsp;
		<%end if%>
        </td>

Open in new window



Here is the java script code.

<script type="text/javascript">
$(document).ready(function () {
	
	$("#category_list").dataTable({
		bJQueryUI: true	
	});
		
});
</script>

Open in new window

0
capturetheflag
Asked:
capturetheflag
  • 7
  • 5
1 Solution
 
leakim971PluritechnicianCommented:
Check this page : http://datatables.net/examples/plug-ins/dom_sort.html
$.fn.dataTableExt.afnSortData['dom-checkbox'] = 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';
	} );
}

Open in new window

0
 
capturetheflagAuthor Commented:
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.

<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>

Open in new window


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
		]
});
                                            

Open in new window

0
 
leakim971PluritechnicianCommented:
could you post the HTML for the table too ?
(right click in the page browser, choose view source)
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
capturetheflagAuthor Commented:
hello leakim971;

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>

Open in new window


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>

Open in new window

0
 
leakim971PluritechnicianCommented:
I'm looking for the tbody of the table, three lines is good
0
 
capturetheflagAuthor Commented:
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 &nbsp; </td>
    <td align="left">AA1</td> 
	</tr>

Open in new window

0
 
capturetheflagAuthor Commented:
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>

Open in new window

0
 
leakim971PluritechnicianCommented:
Chect this test page : http://jsfiddle.net/8yPNt/

<!DOCTYPE html>
<html>
<head>
<script src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript">

	$.fn.dataTableExt.afnSortData['dom-Active'] = function(oSettings, iColumn) {
		return $.map(oSettings.oApi._fnGetTrNodes(oSettings), function(tr, i) {
			var checked = $("img:eq(1)", 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
			]
		});
	});

</script>
</head>
</body>
	<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>
			<tbody>
				<tr>
					<td scope="row"><a class="modalLink" href="update_personnel.asp?personnel_id=14&user_id=AA1"><img src="edit.png" border="0" alt="Edit" title="Edit"/></a></td>
					<td>
						<img src="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 &nbsp; </td>
					<td align="left">AA1</td> 
				</tr>
				<tr>
					<td scope="row"><a class="modalLink" href="update_personnel.asp?personnel_id=14&user_id=AA1"><img src="edit.png" border="0" alt="Edit" title="Edit"/></a></td>
					<td>
						<img src="cancel.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 &nbsp; </td>
					<td align="left">AA1</td> 
				</tr>
				<tr>
					<td scope="row"><a class="modalLink" href="update_personnel.asp?personnel_id=14&user_id=AA1"><img src="edit.png" border="0" alt="Edit" title="Edit"/></a></td>
					<td>
						<img src="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 &nbsp; </td>
					<td align="left">AA1</td> 
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

Open in new window

0
 
capturetheflagAuthor Commented:
Hello leakim971,

I tried the jsfiddle  demo.  The header sort option does not work on any of the columns.
0
 
leakim971PluritechnicianCommented:
there's no sort attached to the other columns
you should take time to understand the code from now
0
 
capturetheflagAuthor Commented:
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.
0
 
capturetheflagAuthor Commented:
Thanks Woo! Hoo!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now