如何使用Jquery数据表重新初始化表控制器列表

Question

我在我的代码中使用了两个带有outputField的表和另一个带有输入字段的表，并使用了jquery数据表我正在构建一个表。

按钮单击：编辑 - 在编辑模式下打开数据表（输入字段）取消 - 以只读模式（OutputField）打开数据表

说明：当我单击编辑按钮时，在EDIt模式下打开表格，如果我更改输入字段的某些值并单击取消，则在RO模式下渲染表格。

问题：如果再次点击“编辑”按钮，我在上一步中所做的更改仍然存在。

我想：表格列表应该从DB刷新，并应显示原始列表。

脚本标签：

<apex:outputPanel id="DtscriptId">
    <script>
    var j$ = jQuery.noConflict();

    var EditCheck = "{!EditCancelDispCheck}";
    var extdisplayPopup ="{!extdisplayPopup}";
    console.log('EditCheck'+extdisplayPopup);
    var table;
   if(EditCheck == 'false' || extdisplayPopup == 'false'){
        console.log('Inside Data Table Script1');
        document.getElementById("divextdataEditTableId").style.display = "none";
         document.getElementById("divextdataTableId").style.display = "block";
        table = $('#extdataTableId').DataTable();
    }

     if(EditCheck == 'true'){
        document.getElementById("divextdataTableId").style.display = "none";
       document.getElementById("divextdataEditTableId").style.display = "block";
        $("#extdataEditTableId").fadeTo(0,1.00);
       $('#extdataEditTableId').DataTable().destroy();

        $.fn.dataTable.ext.order['dom-select'] = function  ( settings, col )
        {
            return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
                return $('select', td).val();
            } );
        }
        /* Create an array with the values of all the input boxes in a column, parsed as numbers */
        $.fn.dataTable.ext.order['dom-text-numeric'] = function  ( settings, col )
        {
            return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
                return $('input', td).val().replace(/s/g,'') * 1;
            } );
        }
        /* Create an array with the values of all the input boxes in a column */
        $.fn.dataTable.ext.order['dom-text'] = function  ( settings, col )
        {
            return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
                return $('input', td).val().replace( /,/g, "." ).replace(/s/g,'') * 1;
            } );
        }
        /* Initialise the table with the required column ordering data types */
            $('#extdataEditTableId').DataTable( {
                "bDestroy" : true,
                "columns": [
                    null,
                    { "orderDataType": "dom-select" },
                    null,
                    null,
                    { "orderDataType": "dom-select" },
                    { "orderDataType": "dom-select" },
                    { "orderDataType": "dom-text-numeric" },
                    { "orderDataType": "dom-text"},
                    null
                ]
            } ); 
     }

    if(extdisplayPopup == 'true'){
        $("#extdataEditTableId").fadeTo(0,0.4);
    }  

    function renderFirstTable(){
        document.getElementById("divextdataEditTableId").style.display = "none";
        document.getElementById("divextdataTableId").style.display = "block";
        var dataTable = $('#extdataTableId').DataTable();
        dataTable.clear();

        <apex:repeat value="{!existingRowList}" var="i">
          dataTable.row.add([
            '{!i.Product__r.Name}',
            '{!i.OS__c}',
            '{!opportunitymarket}',
            '{!opportunitycountry}',
            '{!i.Quarter__c}',
            '{!i.Year__c}',
            '{!i.Quantity__c}',
            '{!i.Total__c}',
            '{!opportunitycurrency}'
            ]).draw();
        </apex:repeat>

     }

     </script>
</apex:outputPanel>

我想：有没有可能使用jquery刷新带有DB列表的编辑表并仅渲染脚本面板，因为如果我渲染表面板它会丢失它的jquery Datatable属性。

Answer 1

另一答案