Rows not active with Editor and Bootstrap
Rows not active with Editor and Bootstrap
egberte
Posts: 13Questions: 1Answers: 0
I just setup a simple table with Editor and Table tools. I am following this example:
https://editor.datatables.net/release/DataTables/extras/Editor/examples/bootstrap.html
Everything looks pretty close but the row selection is broken. The class "Active" is not applied to the row when selected and the Editor Edit/Delete remain disabled. Manually adding the style in the console works for the styling but not Editor.
I've tried altering the order of the js includes but it didn't make a difference. Wondering if I have to get a more new version of datatables. Editor is current.
HTML
[code]
<!DOCTYPE html>
Export Set Management
<!-- Bootstrap core CSS -->
<!-- Font Awesome Icons -->
<!-- Google Fonts -->
<!-- dataTables CSS (All grids) -->
<!-- Tabletools -->
<!-- <!-- Editor commented as it seems unneccesary-->
<!-- Bootstrap for dataTables -->
<!-- aPriori CSS -->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<![endif]-->
<!-- Fixed navbar -->
Toggle navigation
Home
Reports
View
Tools
eegbertson
Account Settings
Help
Sign out
<!--/.nav-collapse -->
Manage Export Sets
<!--/row-->
Engine
Browser
Engine
Browser
<!--/row-->
© aPriori 2013
<!--/.container-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- dataTables -->
<!-- tableTools -->
<!-- dataTables Editor -->
<!-- Bootstrap -->
<!-- dataTables bootstrap -->
<!-- Editor bootstrap -->
<!-- aPriori -->
<!-- On page scripts -->
[/code]
the local page js:
[code]
(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.datatableseditor.php",
"domTable": "#exportsetList",
"fields": [
{
"label": "Engine",
"name": "engine",
"type": "text"
},
{
"label": "Browser",
"name": "browser",
"type": "text"
}
]
} );
$('#exportsetList').dataTable( {
"sDom": "Tfrtip",
"sAjaxSource": "php/table.datatableseditor.php",
"aoColumns": [
{
"mData": "engine"
},
{
"mData": "browser"
}
],
"oTableTools": {
"sRowSelect": "single",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
} );
}(jQuery));
[/code]
https://editor.datatables.net/release/DataTables/extras/Editor/examples/bootstrap.html
Everything looks pretty close but the row selection is broken. The class "Active" is not applied to the row when selected and the Editor Edit/Delete remain disabled. Manually adding the style in the console works for the styling but not Editor.
I've tried altering the order of the js includes but it didn't make a difference. Wondering if I have to get a more new version of datatables. Editor is current.
HTML
[code]
<!DOCTYPE html>
Export Set Management
<!-- Bootstrap core CSS -->
<!-- Font Awesome Icons -->
<!-- Google Fonts -->
<!-- dataTables CSS (All grids) -->
<!-- Tabletools -->
<!-- <!-- Editor commented as it seems unneccesary-->
<!-- Bootstrap for dataTables -->
<!-- aPriori CSS -->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<![endif]-->
<!-- Fixed navbar -->
Toggle navigation
Home
Reports
View
Tools
eegbertson
Account Settings
Help
Sign out
<!--/.nav-collapse -->
Manage Export Sets
<!--/row-->
Engine
Browser
Engine
Browser
<!--/row-->
© aPriori 2013
<!--/.container-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- dataTables -->
<!-- tableTools -->
<!-- dataTables Editor -->
<!-- Bootstrap -->
<!-- dataTables bootstrap -->
<!-- Editor bootstrap -->
<!-- aPriori -->
<!-- On page scripts -->
[/code]
the local page js:
[code]
(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.datatableseditor.php",
"domTable": "#exportsetList",
"fields": [
{
"label": "Engine",
"name": "engine",
"type": "text"
},
{
"label": "Browser",
"name": "browser",
"type": "text"
}
]
} );
$('#exportsetList').dataTable( {
"sDom": "Tfrtip",
"sAjaxSource": "php/table.datatableseditor.php",
"aoColumns": [
{
"mData": "engine"
},
{
"mData": "browser"
}
],
"oTableTools": {
"sRowSelect": "single",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
} );
}(jQuery));
[/code]
This discussion has been closed.
Replies
Allan
It is these lines int he CSS which should be adding background colouring information: https://github.com/DataTables/Plugins/blob/master/integration/bootstrap/3/dataTables.bootstrap.css#L104
Possibly you have something else in your stylesheets overriding. The browser's inspector should be able to tell you if that is the case.
Allan