Row Selected gets Class "active" not "selected"
Row Selected gets Class "active" not "selected"
GeorgeIoak
Posts: 27Questions: 6Answers: 0
I'm using Jquery UI and Foundations CSS. The reason I'm using Jquery UI is because I have an autocomplete form on the page and without the Jquery UI the list of choices would show as a li list and not a formatted list of choices. I mention that because I'm not sure if that's where the trouble comes from. I added a fix in my style to apply the selected row styling on "active" rows and that works but I think since the row doesn't get the class of selected functions like 'fnGetSelectedData()` don't work.
Here's what's in my head:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>SAM's Registration</title>
<!-- <link rel="stylesheet" type="text/css" href="media/css/demo.css"> -->
<link href="media/css/jquery-ui.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="media/css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="media/css/dataTables.editor.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/foundation/dataTables.foundation.css">
<!-- <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css"> -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" >
<style type="text/css" class="init">
table.dataTable tr td:first-child {
text-align: center;
}
table.dataTable tr td:first-child:before {
content: "\f096"; /* fa-square-o */
font-family: FontAwesome;
}
table.dataTable tr.active td:first-child:before {
content: "\f046"; /* fa-check-square-o */
}
table.dataTable tr td.dataTables_empty:first-child:before {
content: "";
}
</style>
<script type="text/javascript" language="javascript" charset="utf-8" src="media/js/jquery.min.js"></script>
<script src="media/js/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="media/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="media/js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/foundation/dataTables.foundation.js"></script>
<script src="media/js/vendor/modernizr.js"></script>
<script src="media/js/foundation.min.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="media/js/table.allrecords.js"></script>
</head>
Is there something I've done wrong here? I notice that the TableTools dropdown for the SAVE button is also not formatted properly.
My full page links to AJAX data in MYSQL database so I'm not sure how to post an example link with live data.
Answers
There looks to be a nice old mix of the DataTables CSS, jQuery UI and Foundation there.
I think you can remove:
As the Foundation integration file provides styles for them.
If you make that change - does it then work?
I've not actually tested Editor with Foundation yet, that is something I want to add in future, but that shouldn't directly effect the TableTools buttons or the row selection.
The other thing is, how do you do the row selection? Is it just with the TableTools options?
Allan
Yes, if I remove those 2 I still get the autocomplete menu to display properly and the table tools drop down save menu works. The drop down menu is still a bullet list but each item gets highlighted and works when clicked on whereas before that didn't happen.
So removing those 2 files leaves only the formatting of the save-collection sButtonClass to be "incorrect".
As a side note, I struggled like crazy to get sSwfPath to work and never could. Finally I had to completely remove the setting and move the swf file to a swf folder on the same level as the initial html call.
Forgot to answer your other question, yes the row selection is with TableTools. I should have also said that removing those 2 CSS files does not change the selected row class, it is still active, not selected.