data Table Editor issue

anurag.shah

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}();
    }
    

allan

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.shah

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}();
}

allan

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