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