Hi,
I'm using Editor 1.2.2. with DataTables 1.9.4 and also using Twitter Bootstrap for my table and forms. I can't figure out why, when I select any row, the Edit and Delete buttons disappear. The New button remains visible and clickable, as it should. What I want is this functionality: http://editor.datatables.net/release/DataTables/extras/Editor/examples/bootstrap.html . I currently have only single rows selectable but I may want multiple. When one is selected, all 3 buttons should be available. If I want to allow multiples, then only New and Delete should be available when multiple rows are selected. Here is my code:
I'm using Editor 1.2.2. with DataTables 1.9.4 and also using Twitter Bootstrap for my table and forms. I can't figure out why, when I select any row, the Edit and Delete buttons disappear. The New button remains visible and clickable, as it should. What I want is this functionality: http://editor.datatables.net/release/DataTables/extras/Editor/examples/bootstrap.html . I currently have only single rows selectable but I may want multiple. When one is selected, all 3 buttons should be available. If I want to allow multiples, then only New and Delete should be available when multiple rows are selected. Here is my code:
<script src="/js/data_tables/pagination.js"></script> <script> $.extend( $.fn.dataTableExt.oStdClasses, { "sWrapper": "dataTables_wrapper form-inline" } ); $.extend( true, $.fn.DataTable.TableTools.classes, { "container": "btn-group", "buttons": { "normal": "btn", "disabled": "btn disabled" }, "collection": { "container": "DTTT_dropdown dropdown-menu", "buttons": { "normal": "", "disabled": "disabled" } } } ); $(document).ready(function() { var editor = new $.fn.dataTable.Editor( { "ajaxUrl": "", "domTable": "##userDataTable", "display": "envelope", "fields": [ { "label": "Username:", "name": "user_name" }, { "label": "Password:", "name": "password" }, { "label": "Hint:", "name": "hint" }, { "label": "Name:", "name": "name" }, { "label": "Company:", "name": "company" }, { "label": "Address:", "name": "address" }, { "label": "Address 2:", "name": "address2" }, { "label": "City:", "name": "city" }, { "label": "State:", "name": "state" }, { "label": "Zip:", "name": "zip" }, { "label": "Country:", "name": "country", "default": "United States" }, { "label": "Email:", "name": "email" }, { "label": "Phone:", "name": "phone" }, { "label": "Fax:", "name": "fax" }, { "label": "User Type:", "name": "user_type", "type": "select", "ipOpts": [ { "label": "Operator", "value": "operator" }, { "label": "Manager", "value": "manager" }, { "label": "Super User", "value": "super_user" }, { "label": "Administrator", "value": "administrator" } ] }, { "label": "Status:", "name": "status", "default": "Active" } ] } ); var oTable = $('##userDataTable').dataTable( { "sDom": "<'row-fluid'<'span4'T><'span4'l><'span4'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "sPaginationType": "bootstrap", "oLanguage": { "sLengthMenu": "_MENU_ records per page", "sInfoFiltered": "(_MAX_ total)" }, "aoColumns": [ { "mData": "name" }, { "mData": "user_name" }, { "mData": "user_type" }, { "mData": "email" } ], "aoColumnDefs": [ { "aDataSort": [ 2, 0, 1 ], "aTargets": [ 2 ] } ], "oTableTools": { "sRowSelect": "single", "sSelectedClass": "row_selected", "aButtons": [ { "sExtends": "editor_create", "editor": editor }, { "sExtends": "editor_edit", "editor": editor }, { "sExtends": "editor_remove", "editor": editor } ] } } ); $('##userDataTable_filter input').addClass('search-query'); } );