Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82268

jQuery 1.8.2, DataTables 1.9.4 and jEditable

$
0
0
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 :

<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

Viewing all articles
Browse latest Browse all 82268

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>