|
In this article we will explore single and multiple row selection jquery data table and mouse over in jquery data table.
Color change on mouse over.
Let's see how we can achieve both the features.
Step 1: Add jquery-1.4.2.min.js and jquery.dataTables.min.js in the head section of the aspx page. Both the js and complete source code can be downloaded from the Download link in the end of this article.
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
Step 2: Add below style in the header section of the page.
< style type="text/css">
.myGrid
{
width: 100%;
margin: 0px 0 0px 0;
border: solid 1px #525252;
border-collapse: collapse;
width: 600px;
}
.myGrid td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: Black;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
}
.myGrid th
{
color: #fff;
background: url(images/grid_header.png) repeat-x top;
font-family: Arial,Helvetica,sans-serif;
font-size: 0.9em;
}
.hoverRowColor
{
background-color: #C4E9F2;
}
.selectedRowColor
{
background-color: #1180EE;
}
</style>
Step 3: Place below html conten inside body tag.
< input type="checkbox" id="isSingle" />Single Row Selection
<table id="grid" class="myGrid">
<thead>
<tr>
<th>By</th>
<th>Recipie Name</th>
<th>Preparation Time</th>
<th>Cooking Time</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Loading....</td>
</tr>
</tbody>
</table>
Step 4: Place below javascript in the aspx page.
<script language="javascript" type="text/javascript">
$(document).ready(function() {
function renderTable(result) {
var dtData = [];
$.each(result, function() {
dtData.push([
this.by,
this.Recipiename,
this.preparationtime,
this.cookingtime
]);
});
$('#grid').dataTable({ //grid is the id of the table
'aaData': dtData,
'bPaginate': false,
'bInfo': false,
'bFilter': false
});
$('#grid tr').click(function() {
if ($('#isSingle').is(':checked')) { // When checkbox is checked only one row will be selected at a time
oTable = $('#grid').dataTable();
var nNodes = oTable.fnGetNodes();
for (i = 0; i < nNodes.length; i++) {
$(nNodes[i]).removeClass('selectedRowColor');
}
$(this).addClass('selectedRowColor');
}
else {
if ($(this).hasClass('selectedRowColor')){
$(this).removeClass('selectedRowColor');
}
else{
$(this).addClass('selectedRowColor');
}
}
});
$('#grid tr').hover(function() {
oTable = $('#grid').dataTable();
var nNodes = oTable.fnGetNodes();
for (i = 0; i < nNodes.length; i++) {
$(nNodes[i]).removeClass('hoverRowColor');
}
$(this).addClass('hoverRowColor');
});
$('#grid tr').mouseleave(function() {
oTable = $('#grid').dataTable();
var nNodes = oTable.fnGetNodes();
for (i = 0; i < nNodes.length; i++) {
$(nNodes[i]).removeClass('hoverRowColor')
}
});
}
$.ajax({
type: "POST",
url: "jQuery - Select Single or Multiple Row in DataTable.aspx/GetRecipie",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
renderTable(response.d);
},
failure: function(errMsg) {
$('#errorMessage').text(errMsg); //errorMessage is id of the div
}
});
});
</ script>
Step 5: Import below two namespaces in .cs file
using System.Data.SqlClient;
using System.Web.Services;
Step 6: Place GetRecipie in the .s method which will fetch the data from SQL and will return List of Recipie.
[WebMethod]
public static List<Recipie> GetRecipie()
{
string strQuery = "SELECT TOP 10 * FROM Recipie";
DataTable dtRecipie = null;
Recipie objRecipie;
string m_conString = "SQL ConnectionString"; //Replace with your sql connection string
SqlConnection con = GetConnection(m_conString);
using (con)
{
con.Open();
using (SqlDataAdapter sqlAdapter = new SqlDataAdapter(strQuery, con))
{
dtRecipie = new DataTable();
sqlAdapter.Fill(dtRecipie);
}
}
List<Recipie> drlist = new List<Recipie>();
foreach (DataRow row in dtRecipie.Rows)
{
objRecipie = new Recipie();
objRecipie.by = row["by"].ToString();
objRecipie.Recipiename = row["Recipiename"].ToString();
objRecipie.preparationtime = row["preparationtime"].ToString();
objRecipie.cookingtime = row["cookingtime"].ToString();
drlist.Add(objRecipie);
}
return drlist;
}
private static SqlConnection GetConnection(string m_conString)
{
SqlConnection con = new SqlConnection(m_conString);
return con;
}
Live Demo
This ends the article of jQuery - Row selection and change row color on mouseover.
|