Solved

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

Posted on 2014-02-07
12
2,725 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
  • 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
 
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

910 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now