Solved

How do I sort a column with images using jQuery Data tables

Posted on 2014-02-07
12
2,937 Views
Last Modified: 2014-02-07
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
Comment
Question by:capturetheflag
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
12 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39841686
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
 
LVL 1

Author Comment

by:capturetheflag
ID: 39841831
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39841867
could you post the HTML for the table too ?
(right click in the page browser, choose view source)
0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 1

Author Comment

by:capturetheflag
ID: 39841909
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39842040
I'm looking for the tbody of the table, three lines is good
0
 
LVL 1

Author Comment

by:capturetheflag
ID: 39842064
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
 
LVL 1

Author Comment

by:capturetheflag
ID: 39842203
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39842246
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
 
LVL 1

Author Comment

by:capturetheflag
ID: 39842267
Hello leakim971,

I tried the jsfiddle  demo.  The header sort option does not work on any of the columns.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39842335
there's no sort attached to the other columns
you should take time to understand the code from now
0
 
LVL 1

Author Comment

by:capturetheflag
ID: 39842562
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
 
LVL 1

Author Closing Comment

by:capturetheflag
ID: 39842564
Thanks Woo! Hoo!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How do I allow for non standard CSV file 9 45
javascript duplicates 9 25
Disabling a Faux Submit Button 4 41
Jquery syntax 12 29
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question