Hi,
I'm having difficulty getting jEditable to work with DataTables 1.9.4
I already have a working table, including ColVi, TableTools, ColumnFilterWidgets. Adding jEditable breaks it :
I've tried everything : Firebug keeps on telling me that $(...).editable is not a function :(
Can you help ?
TIA,
Rup
I'm having difficulty getting jEditable to work with DataTables 1.9.4
I already have a working table, including ColVi, TableTools, ColumnFilterWidgets. Adding jEditable breaks it :
<apex:page controller="Store" sidebar="false"> <style type="text/css" title="currentStyle"> @import "{!URLFOR($Resource.DataTables, 'media/css/jquery.dataTables.css')}"; @import "{!URLFOR($Resource.DataTables, 'media/css/DataTablesAdvancedExample.css')}"; @import "{!URLFOR($Resource.DataTables, 'extras/ColVis/media/css/ColVis.css')}"; @import "{!URLFOR($Resource.DataTables, 'extras/TableTools/media/css/TableTools.css')}"; @import "{!URLFOR($Resource.DataTables, 'extras/ColumnFilterWidgets/media/css/ColumnFilterWidgets.css')}"; </style> <script src="{!URLFOR($Resource.DataTables, 'media/js/jquery.js')}"></script> <script src="{!URLFOR($Resource.DataTables, 'media/js/jquery.dataTables.min.js')}"></script> <script src="{!URLFOR($Resource.DataTables, 'extras/FixedHeader/js/FixedHeader.min.js')}"></script> <script src="{!URLFOR($Resource.DataTables, 'extras/ColVis/media/js/ColVis.min.js')}"></script> <script src="{!URLFOR($Resource.DataTables, 'extras/TableTools/media/js/ZeroClipboard.js')}"></script> <script src="{!URLFOR($Resource.DataTables, 'extras/TableTools/media/js/TableTools.min.js')}"></script> <script src="{!URLFOR($Resource.DataTables, 'extras/ColumnFilterWidgets/media/js/ColumnFilterWidgets.js')}"></script> <script scr="http://datatables.net/examples/examples_support/jquery.jeditable.js"></script> <script type="text/javascript" charset="UTF-8"> $(document).ready( function () { ///////////////// TABLE DES COMMANDES /////////////////////// var oTable = $('#detaillants').dataTable( { "sDom" : 'WT<"clear">lfrtip' //"sDom" : 'T<"clear">rt' ,"oTableTools": { "sSwfPath": "{!URLFOR($Resource.DataTables, 'extras/TableTools/media/swf/copy_csv_xls_pdf.swf')}", //"sRowSelect": "multi", "aButtons": [ { "sExtends": "copy", "bSelectedOnly": true } ] } ,"sPaginationType" : "full_numbers" ,"iDisplayLength" : 25 ,"bAutoWidth" : true // Hide column filters for these columns ,"oColumnFilterWidgets": { "aiExclude": [ 0, 4, 5, 6, 7 ] } // Center some of the columns // Display integers without decimals ,"aoColumnDefs": [ { "sClass": "center", "aTargets": [ 2, 3, ] },{ "bUseRendered": false, "mRender": function ( data, type, row ) { return parseInt( data, 11 ); }, "aTargets": [ 4, 6 ] },{ // Column 0 is invisible (Id) "bVisible" : false, "aTargets" : [ 0 ] } ] ,"aaSorting": [[ 2, "asc" ]] // sort on product code by default (multi-warehouse) ,"oLanguage" : { "sSearch" : "Rechercher:", "sLengthMenu" : "Afficher _MENU_ enregistrements par page", "sZeroRecords" : "Aucun enregistrement ne correspond", "sInfo" : "Enregistrements affichés : n° _START_ à _END_ sur _TOTAL_", "sInfoEmpty" : "", "sInfoFiltered": "(filtre actif sur _MAX_ enregistrements)" } ///////////////// jEDITABLE /////////////////////// , "fnDrawCallback": function () { $('td', this.fnGetNodes()).editable( function (value, settings) { console.log(this); console.log(value); console.log(settings); return(value); }, { "callback": function( sValue, y ) { var aPos = oTable.fnGetPosition( this ); oTable.fnUpdate( sValue, aPos[0], aPos[1] ); } , "submitdata": function ( value, settings ) { return { "row_id": oTable.fnGetData( this.parentNode )[0] , "column": oTable.fnGetPosition( this )[2] }; } , "height": "14px" }); } }); new FixedHeader(oTable); }); </script> <apex:PageBlock title="" > <!-- DETAILLANTS --> <table cellpadding="0" cellspacing="0" border="0" class="display" id="detaillants" style="margin-top:20px;"> <thead> <tr> <th>Id</th> <th>Account Name</th> <th>Product Line</th> <th>Business Unit</th> <th>Qty</th> <th>Value</th> <th>Qty</th> <th>Value</th> </tr> </thead> <tbody> <apex:repeat var="lstOfObjs" value="{!Lines}"> <apex:repeat value="{!lstOfObjs}" var="item"> <tr> <td>{!item.Id} </td> <td>{!item.Account__r.Name} </td> <td>{!item.ProductLine_Name__c} </td> <td>{!item.BusinessUnit_Name__c} </td> <td>{!item.Ordered_Quantity__c} </td> <td>{!item.Net_Order_Value_CustCurr__c} </td> <td>{!item.Ordered_Quantity__c} </td> <td>{!item.Net_Order_Value_CustCurr__c} </td> </tr> </apex:repeat> </apex:repeat> </tbody> <tfoot> </tfoot> </table> <br/><br/><br/><br/><br/><br/> </apex:PageBlock> </apex:page>
I've tried everything : Firebug keeps on telling me that $(...).editable is not a function :(
Can you help ?
TIA,
Rup