data Table Editor issue

data Table Editor issue

anurag.shahanurag.shah Posts: 2Questions: 1Answers: 0
edited December 2017 in Free community support

hi..

how to use the fn.dataTable.Editor functionality on visual force page. Please find below sample code (highlighted code is not working)

 function prepareEditTable_{!tableID}(initializeFunction,drawCallbackFunction)
    {
       
        // Prepare data in case of JSON based response
        if(columnData_{!tableID} && datatableRowData_{!tableID} )
        {
            getColumnData_{!tableID}(columnData_{!tableID},columnHeader_{!tableID});
            getBody_{!tableID}(datatableRowData_{!tableID});
        }
        
        var finalDomValue='<<"left"{!enableLength}><"right"{!enablePagination}>><"width100 viewWidth"t><<"left"i><"right"{!enablePagination}>>';
        if('{!customDom}')
        {
            finalDomValue="{!customDom}";                  
        }
       
      
         **  
   dynamicTable_{!tableID} = new {!jqueryVariable}.fn.dataTable.Editor( {
       "table": {!tableID},
        "fields": [columnArray_{!tableID}]
       } );       **
       
  
       
       //editor.inline( $('#{!tableID} tbody tr:first-child td:first-child') );
        
      
        dynamicTable_{!tableID} =  {!jqueryVariable}('#{!tableID}').DataTable(
        {     
            "dom": "Bfrtip", 
            "data": dataArray_{!tableID},
            "columns": columnArray_{!tableID},
            "columnDefs": [
                {"targets": [0], "searchable": {!col1_searchable}, "orderable":  {!col1_orderable}, "visible":  true},
                {"targets": [1], "searchable": {!col2_searchable}, "orderable":  {!col2_orderable}, "visible": true }
            ],            
            "order": [  [{!orderColumn}, '{!orderDirection}']  ],
            "ordering":{!orderingBool},
            "paging":{!pagingbarBool},
            "pagingType": "{!pagingationType}",
            "bSearchable": true,
            "lengthMenu": {!pagingArray},
            "dom": finalDomValue,
            "info": {!info},
            "initComplete": initializeFunction,
            "drawCallback": drawCallbackFunction,
            "retrieve": true,
            "keys": {
                "columns": ":not(:first-child)",
                "keys": [ 9 ],
                "editor": "editor",
                "editOnFocus": true
            },
            "select": {
                "style":    'os',
                "selector": 'td:first-child'
            },
            "fnInitComplete": function(){ }
        });
    
        hideLoading_{!tableID}();
    }
    

Answers

  • allanallan Posts: 61,650Questions: 1Answers: 10,093 Site admin

    In what way is it not working? Are you getting any errors shown in the console? Can you link to the page please?

    Allan

  • anurag.shahanurag.shah Posts: 2Questions: 1Answers: 0

    Thanks @allan , I have found the solution of my issue, data is loaded.

    inline editing is not working, and prompt response will be helpful.
    Error message...

    dataTables.editor.min.js:933 Uncaught Cannot automatically determine field name from data source
    **
    **individual @ dataTables.editor.min.js:933Editor._dataSource @ dataTables.editor.min.js:649Editor.inline @ dataTables.editor.min.js:438_editor @ dataTables.keyTable.min.js:12(anonymous function) @ dataTables.keyTable.min.js:8dispatch @ jquery.min.1.11.3.js:4r.handle @ jquery.min.1.11.3.js:4trigger @ jquery.min.1.11.3.js:4triggerHandler @ jquery.min.1.11.3.js:4(anonymous function) @ dataTables.keyTable.min.js:13iterator @ jquery.dataTables.min.js:99_emitEvent @ dataTables.keyTable.min.js:13_focus @ dataTables.keyTable.min.js:15(anonymous function) @ dataTables.keyTable.min.js:7dispatch @ jquery.min.1.11.3.js:4r.handle @ jquery.min.1.11.3.js:4

    Please find below code...

    VF components.

    <c:BaseDataTable_POC_CMP_HUM jqueryvariable="vCaseDetail"
    tableid="caseLoggedClaimsDataTable"
    tablecontainerid="caseLoggedClaimsDataTable_div"
    enablesearch="f"
    rowdata=""
    columnname="{!columnName}"
    columnHeader="{!columnHeader}"
    htmlColumnName="LastModified"
    objname="Attachment_Log__c"
    col1_accordian="false"
    col1_editDelete="false"
    pagingbarBool="true"
    info="true"
    sort="true"
    keyword="false"
    orderColumn="1"
    orderDirection="desc"
    orderingBool="true"
    />
    </div>
    <script>
    var vGetCaseLoggedClaimsData = '{!$RemoteAction.CaseLoggedClaimsDataTable_C_RT_HUM.getCaseLoggedClaimsData}';
    var vCaseId = '{!CaseRecordId}';
    var SHOW_ALL_CHILDREN_FLAG = true;
    var CHILD_DISPLAY_STATE_OVERRIDE = true;
    Visualforce.remoting.timeout = '{!$Label.HUMMemWebActivityTimeout}'; // Set timeout at page level
    </script>

    ----------------------------------- Scripts -----------------------------------------------

    function prepareTable_{!tableID}(initializeFunction,drawCallbackFunction)
    {
    alert('welcome to prepareEditTable');
    // Prepare data in case of JSON based response
    if(columnData_{!tableID} && datatableRowData_{!tableID} )
    {
    getColumnData_{!tableID}(columnData_{!tableID},columnHeader_{!tableID});
    getBody_{!tableID}(datatableRowData_{!tableID});
    }

        var finalDomValue='<<"left"{!enableLength}><"right"{!enablePagination}>><"width100 viewWidth"t><<"left"i><"right"{!enablePagination}>>';
        if('{!customDom}')
        {
            finalDomValue="{!customDom}";                  
        }
    
       //editor.inline( $('#{!tableID} tbody tr:first-child td:first-child') );
    
       alert('welcome to ' + editor );
    
       editor = new {!jqueryVariable}.fn.dataTable.Editor( {
           table:dynamicTable_{!tableID},
            fields: [ {
                label: columnArray_{!tableID},
                name: dataArray_{!tableID}
             }
        ],
        formOptions: {
            inline: {
                onBlur: 'submit'
            }
        }
       }); 
    
    
       alert('welcome again ' + dynamicTable_{!tableID});
    
        dynamicTable_{!tableID} = new {!jqueryVariable}('#{!tableID}').DataTable(
        {     
            "dom": "Bfrtip", 
            data: dataArray_{!tableID},
           "columns": columnArray_{!tableID},
    
    
            keys: {
            keys: [ 9 ],
            editor: editor,
            editOnFocus: true
        },
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
            "fnInitComplete": function(){ }
        });
    
    
    
    
    
        hideLoading_{!tableID}();
    }
    
  • allanallan Posts: 61,650Questions: 1Answers: 10,093 Site admin

    That error message should link to this page which details what is causing the problem and also how to resolve it.

    Without being able to see the column array contents I can't say exactly which field is causing the problem, but that tech note documents how to debug and resolve it.

    Allan

This discussion has been closed.