DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Help on styling hover, selected row, and row boarder.

Help on styling hover, selected row, and row boarder.

zionistzionist Posts: 19Questions: 3Answers: 0
in Free community support

hi guys i would like to have a highlight color when a row is hovered on and a selected color when a row is selected plus is would like to have row borders too. below is my code.

"html code"

<cfquery name="expenses" datasource="moRentals">
select *
FROM Dashboard, Drivers, Machine
</cfquery>
<cfquery dbtype="query" name="results">
select ID, hireDate, machineID, driverid, distanceMoved, description, expense, revenue, expenseReason, subTotal, driver_id, fname + ' ' + lname AS fullname, picture, machine_ID, machineNumber, mileage

FROM expenses
WHERE driverid = driver_id 
AND machineID = machine_ID
ORDER BY hireDate

</cfquery>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mo Rentals using CFGRID</title>
<link rel="stylesheet" type="text/css" href="css/dataTableStyles.css" />
<link type="text/css" href="css/jquery-ui-1.8.4.custom.css" rel="stylesheet" />

<style>

-th->-span-{">-th->-span-{" href="#theadRow->-th->-span-{">theadRow > th > span {

margin-right: 2em;
display: block;

}
.hideElement {
display: none;
}
input.datepicker {
width: 7em;
}
div.dateControlBlock {
float: right;
}
</style>

$(document).ready( function () { $('#expenseList').dataTable(); } );

</head>

<body>

Filter From: To:
Date Machine Operator Name Income Expenditure Profit
image #DATEFORMAT(results.hireDate, "mm/dd/yyyy")# #results.machineNumber# #results.fullname# UGX #NumberFormat(results.revenue, ',')# UGX #NumberFormat(results.expense, ',')# UGX #NumberFormat(results.subTotal, ',')# image



// The plugin function for adding a new filtering routine $.fn.dataTableExt.afnFiltering.push( function(oSettings, aData, iDataIndex){ var dateStart = parseDateValue($("#dateStart").val()); var dateEnd = parseDateValue($("#dateEnd").val()); // aData represents the table structure as an array of columns, so the script access the date value // in the first column of the table via aData[0] var evalDate= parseDateValue(aData[1]); if (evalDate >= dateStart && evalDate <= dateEnd) { return true; } else { return false; } }); // Function for converting a mm/dd/yyyy date value into a numeric string for comparison (example 08/12/2010 becomes 20100812 function parseDateValue(rawDate) { var dateArray= rawDate.split("/"); var parsedDate= dateArray[2] + dateArray[0] + dateArray[1]; return parsedDate; } $(function() { // Implements the dataTables plugin on the HTML table var $dTable= $("table.dataTablesTable").dataTable( { "iDisplayLength": 200, "bStateSave": false, "oLanguage": { "sLengthMenu": 'Show <select>2550100200 entries' }, "aaSorting": [[0,'asc']], "aoColumns": [ { "sType": "date" }, null, null ] }); // The dataTables plugin creates the filtering and pagination controls for the table dynamically, so these // lines will clone the date range controls currently hidden in the baseDateControl div and append them to // the feedbackTable_filter block created by dataTables $dateControls= $("#baseDateControl").children("div").clone(); $("#feedbackTable_filter").prepend($dateControls); // Implements the jQuery UI Datepicker widget on the date controls $('.datepicker').datepicker( {showOn: 'button', buttonImage: 'assets/calendar.gif', buttonImageOnly: true} ); // Create event listeners that will filter the table whenever the user types in either date range box or // changes the value of either box using the Datepicker pop-up calendar $("#dateStart").keyup ( function() { $dTable.fnDraw(); } ); $("#dateStart").change( function() { $dTable.fnDraw(); } ); $("#dateEnd").keyup ( function() { $dTable.fnDraw(); } ); $("#dateEnd").change( function() { $dTable.fnDraw(); } ); });

</body>
</html>

"css code"

@charset "utf-8";
/* CSS Document */
.dataTablesTable {
font-size:100%;
border:1px solid #fff !important;
}

.dataTablesTable tr {padding:5px 0; border-top: 1px solid #666;}
.dataTablesTable td,th {padding:10px 0; text-align:left; }
.dataTablesTable th {text-transform:uppercase;}

/*.dataTablesTable th {
padding-right:20px;
background-color:#ffffcc;
color:#000;
font-size:14px;
font-weight:bold;
padding:3px 3px;
}

.dataTablesTable td {
vertical-align:top;
}*/

.dataTables_length {
float:left;
margin-right:10ex;}

.dataTables_filter {
margin-bottom:1em;
}

.dataTables_filter input {
width:40ex;
}

.dataTables_info {
float:left;
margin-right:5ex;
margin-top:2px;
}

/* Pagination nested */
.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
height: 19px;
width: 19px;
margin-left: 3px;
float: left;
margin-top:3px;
}

.paginate_disabled_previous {
background-image: url('images/dataTables/back_disabled.jpg');
}

.paginate_enabled_previous {
background-image: url('images/dataTables/back_enabled.jpg');
}

.paginate_disabled_next {
background-image: url('images/dataTables/forward_disabled.jpg');
}

.paginate_enabled_next {
background-image: url('images/dataTables/forward_enabled.jpg');
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* DataTables sorting
*/

table.display thead th {
padding: 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
* cursor: hand;
}

.sorting_asc {
background: url('images/dataTables/sort_ascBY.jpg') no-repeat center right;
}

.sorting_desc {
background: url('images/dataTables/sort_descBY.jpg') no-repeat center right;
}

.sorting {
background: url('images/dataTables/sort_bothGY.jpg') no-repeat center right;
}

Answers

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.