Solved

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

Posted on 2014-02-07
12
2,889 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
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

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

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 …
This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

756 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