Rows not active with Editor and Bootstrap

Rows not active with Editor and Bootstrap

egberteegberte Posts: 13Questions: 1Answers: 0
edited February 2014 in TableTools
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]

Replies

  • allanallan Posts: 55,855Questions: 1Answers: 8,825 Site admin
    You need to include the DataTables / Bootstrap integration files: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3

    Allan
  • egberteegberte Posts: 13Questions: 1Answers: 0
    Aha. How did I miss this. I'll try it out shortly. Thanks Allan. I'm sure you hear this often but your tool is amazing. A donation is on the way.
  • egberteegberte Posts: 13Questions: 1Answers: 0
    On second look are these different than the files I referenced from Editor 1.2.4 (line 108/109 in the html above)?
  • allanallan Posts: 55,855Questions: 1Answers: 8,825 Site admin
    Ah sorry - I missed that you had those files! The dataTables.bootstrap.js and its css counterpart from the github repo you want to use in place of the ones for the download package as the ones in git are the latest updates. The dataTables.editor.bootstrap.js file from the download is okay.

    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
This discussion has been closed.