Solved

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

Posted on 2014-02-07
12
2,795 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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

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/…
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 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)

825 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