After row.remove(), and when trying to add row.add, it doesn't work

Jini · August 2016

On the screen that I am trying to present, there are two data tables.
One is the list of the purchased products, and the other is the table which collects the contents of the previous table by different payment methods.
For the collecting table, the contents of the filtered data of list table should be reflected so I did row.remove, then calculated the below contents by categories and did row.add to present the screen.

The first appearing screen has no problem, but after filtering the list table, the warning message which says there are no matching data of the list table is shown.

When printing log, the calculated contents has no problem but row.add is not activated.

Please find the right help for this problem.

     nn.on( 'draw', function () {  // 하단 테이블이 갱신될때마다 호출됨. 

        // 기존 테이블 내용은 날린다.

        mTable.rows().remove();
    
        var amtDt = "";
        var finishCd = "";
         priceSum = 0;
         amtCnt = new Array(0,0,0,0);
         amtSum = new Array(0,0,0,0);
         amtStatCnt = new Array(0,0,0,0);
         amtStatSum = new Array(0,0,0,0);
        
        var oTable = $("#account_spending_list").dataTable();
        var anNodes = $("#account_spending_list tbody tr");

        for (var i = 0; i < anNodes.length; ++i) {
            var d = oTable.fnGetData( anNodes[i] );
        
            var AMT_DT = d['AMT_DT'].substring(0,10);
            var FINISH_CD = d['FINISH_CD'];     // 마감상태 
            var PRICE = d['PRICE'].replace(/[^\d]+/g, '');
            var AMT_TYPE = d['AMT_TYPE'];       // 결제형태 
            var AMT_STATE = d['AMT_STATE'];  // 결제상태 
             
            
            if ( i == 0 ) {  // 초기값 셋팅.
                amtDt = AMT_DT;
                finishCd = FINISH_CD;
                PRICE = Number(PRICE);
                AMT_STATE = Number(AMT_STATE);
                priceSum = PRICE;
                 
                var amtT = Number(AMT_TYPE.substring(2,3)) - 1;
                if (  AMT_STATE != 4 ) {
                    amtCnt[amtT]++;
                    amtSum[amtT] += PRICE;
                    console.log("==== amtSum[amtT] : " + amtSum[amtT] );
                }
                if ( AMT_STATE == 0 ) {
                    amtStatCnt[0]++;
                    amtStatSum[0] += PRICE;
                } else if ( AMT_STATE == 1 ) {
                    amtStatCnt[1]++;
                    amtStatSum[1] += PRICE;
                } else if ( AMT_STATE == 4 ) {
                    amtStatCnt[2]++;
                    amtStatSum[2] += PRICE;
                }   
                
            } else {
                if ( amtDt == AMT_DT ) {
                
                    if ( finishCd == FINISH_CD ) {
                        PRICE = Number(PRICE);
                        AMT_STATE = Number(AMT_STATE);
                        priceSum = priceSum + PRICE;
                        var amtT = Number(AMT_TYPE.substring(2,3)) - 1;
                        if (  AMT_STATE != 4 ) {
                            amtCnt[amtT]++;
                            amtSum[amtT] += PRICE;
                            console.log("==== amtSum[amtT] : " + amtSum[amtT] );
                        }

                        if ( AMT_STATE == 0 ) {
                            amtStatCnt[0]++;
                            amtStatSum[0] += PRICE;
                        } else if ( AMT_STATE == 1 ) {
                            amtStatCnt[1]++;
                            amtStatSum[1] += PRICE;
                        } else if ( AMT_STATE == 4 ) {
                            amtStatCnt[2]++;
                            amtStatSum[2] += PRICE;
                        }   
                        //dataSum( PRICE, AMT_TYPE, AMT_STATE );
                        console.log("AMT_STATE=" + AMT_STATE);
                        console.log("amtStatCnt[2]=" + amtStatCnt[2]);
                    } else {
                        //마감상태가 다르므로 이전 상태는 계산해서 기록한다.
                        tAppend(amtDt, priceSum, amtCnt, amtSum, amtStatCnt, amtStatSum, FINISH_CD);
                    
                        //데이타 수집
//                      priceSum = priceSum + PRICE;
                        dataSum( PRICE, AMT_TYPE, AMT_STATE );
                        amtDt = AMT_DT;
                        finishCd = FINISH_CD;
                    }
                    
                } else {
                    //날짜가  다르므로 이전 상태는 계산해서 기록한다.
                    tAppend(amtDt, priceSum, amtCnt, amtSum, amtStatCnt, amtStatSum,FINISH_CD);
                    
                    //데이타 수집
//                      priceSum = priceSum + PRICE;
                    dataSum( PRICE, AMT_TYPE, AMT_STATE );
                    amtDt = AMT_DT;
                    finishCd = FINISH_CD;
                } 
                
            }

        }
        
        tAppend(amtDt, priceSum, amtCnt, amtSum, amtStatCnt, amtStatSum,finishCd); 
        
    } );


} );
    

function  dataSum( PRICE, AMT_TYPE, AMT_STATE ) {
    
    priceSum = priceSum + PRICE;        
    var amtT = Number(AMT_TYPE.substring(2,3)) - 1;
    amtCnt[amtT]++;
    amtSum[amtT] += PRICE;
    // if ( AMT_TYPE == "001" ) {
//                          amtCnt[0]++;
//                          amtSum[0] += PRICE;
//                      } else if ( AMT_TYPE == "002" ) {
//                          amtCnt[1]++;
//                          amtSum[1] += PRICE;
//                      } else if ( AMT_TYPE == "003" ) {
//                          amtCnt[2]++;
//                          amtSum[2] += PRICE;
//                      } else if ( AMT_TYPE == "004" ) {
//                          amtCnt[3]++;
//                          amtSum[3] += PRICE;
//                      }
    
    if ( AMT_STATE == "0" ) {
        amtStatCnt[0]++;
        amtStatSum[0] += PRICE;
    } else if ( AMT_TYPE == "1" ) {
        amtStatCnt[1]++;
        amtStatSum[1] += PRICE;
    } else if ( AMT_TYPE == "4" ) {
        amtStatCnt[2]++;
        amtStatSum[2] += PRICE;
    }               
}
    
function  tAppend(amtDt, priceSum, amtCnt, amtSum, amtStatCnt, amtStatSum,FINISH_CD) {
    // 값을 추가해준다.
    var arrCnt = 0; 
    var priceAll = 0; 
    for ( var i=0; i<4; i++ ) {
        if ( amtCnt[i] > 0 ) {
            priceAll += amtSum[i];
            arrCnt++;
        }
    }   
    var priceAll = priceAll+"("+arrCnt+")";
    
    var cashStr = amtSum[0]+"("+amtCnt[0]+")";
    var cardStr = amtSum[1]+"("+amtCnt[1]+")";
    var leftStr = amtSum[2]+"("+amtCnt[2]+")";
    var bankStr = amtSum[3]+"("+amtCnt[3]+")";
    var payCancel = amtStatSum[2]+"("+amtStatCnt[2]+")";
    
    console.log("amtDt="+amtDt);
    console.log("priceSum="+priceAll);
    console.log("cashStr="+cashStr);
    console.log("cardStr="+cardStr);
    console.log("leftStr="+leftStr);
    console.log("bankStr="+bankStr);
    console.log("payCancel="+payCancel);
    console.log("FINISH_CD="+FINISH_CD);
    

    //row.add 
    mTable.row.add( {
        "AMT_DATE" : amtDt,
        "TOTAL" : priceAll,
        "CASH" : cashStr,
        "CARD" : cardStr,
        "CREDIT" : leftStr,
        "BANK_TRAN" : bankStr,
        "CANCEL" : payCancel,
        "FINISH_CD" : FINISH_CD
    } ).draw();

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · August 2016

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page, if you can't provide a link to your own page can be found here.

Thanks,
Allan

Jini · August 2016

Thank you for your quick reply and your answer.

And due to lack of experience with data table, I didn't acknowledge that there are rules of these. I apologize for that.

As I found on the link page that you gave me, there were some ways to link for checking the source file including using JS Fiddle so I tried the methods,

but couldn't manage to make it because I am not aware of the methods for these.

I am truely sorry but if this problem could be solved by writing the URL of the source file, I hope this will work.

Source URL -> http://jnpetrol.posissuer.com/csx/pages_account_spending_list_joy.php

The problem that I have is that, like it is written above, in the process of linking the two databases, Row.add part is not working properly.

One table shows the list of the information on the product sale, and the other table shows calculatioin and collection of the payment methods on the information of list table.

When showing the first screen, the problem doesn't appear, but when filtering the information on the list table, after row.remove, row.add method doesn't work.

//var mTable = $('#account_spending').DataTable() -> counting table
//var nn = $('#account_spending_list').DataTable() -> sales infomation list table

nn.on( 'draw', function () {

mTable.rows().remove();
.
.
.
var anNodes = $("#account_spending_list tbody tr");

for (var i = 0; i < anNodes.length; ++i) { ... }

//Counting...

mTable.row.add( {
"AMT_DATE" : amtDt,
"TOTAL" : priceAll,
"CASH" : cashStr,
"CARD" : cardStr,
"CREDIT" : leftStr,
"BANK_TRAN" : bankStr,
"CANCEL" : payCancel,
"FINISH_CD" : FINISH_CD
} ).draw();

==================================================

I am sorry that I couldn't ask you by the rules you have.

But I really I want to solve this problem in short time. Please help me and I really appriciate your help. Thank you.

allan · August 2016

A link to the page showing the issue is all that is needed!

Can you also give me details on what I need to do to trigger the error please?

Allan

Jini · August 2016

I thought it would be helpful for you if I revise the screen contents.

There are two tables like I explained previously.

The below table (Payment Information) is the one showing the history of purchase and payment methods of the purchased product,
and the upper table(Counting table) is the one showing the result of calculation and collection of the contents on the below table(Payment Information), by categories of payment methods and payment status(complete, ready, cancel etc.) .

So contents of both tables should be matched by calculation.

My problem doesn't show up when operating the screen for the first time.
But when I filter the below table(Payment Information), the contents of the upper table(Counting Table) don't show up.

For example, there are 5 contents of the history of purchase, date of 2nd August,
In this list, there are two history of purchase by cash. (3,5000,000: Cancel & 50,000:Complete)

When I search the Cash list of below table, the printed contents of below table should be on screen on the upper table, Cash payment category and Cancel payments. But they don't .

So it made me think that Row.add method doesn't work.

Thank you for your help.

allan · August 2016

The row.add() call is working, but there is a custom filter which is being applied to the table and that is causing the row to be filtered out:

$.fn.dataTable.ext.search.push(
  
    function( settings, data, dataIndex ) {

    var min = $('#minDate').val();
    var max = $('#maxDate').val();
  
    if ( min == "" && max == "" ) return true;

        var rowDate = data[2].split(" ")[0]; // use data for the age column
 
    //alert(min+" |  "+max+" | "+rowDate );
    
    if ( min <= rowDate && rowDate <= max ) return true;
    else return false;
 /*
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && rowDate <= max ) ||
             ( min <= rowDate   && isNaN( max ) ) ||
             ( min <= rowDate   && rowDate <= max ) )
        {
            return true;
        }
        return false;
        */
    }
);

} );

The date information for the first table is in data[0] not data[2], hence it isn't working correctly on that table.

You probably need to add a check into your filtering function to make it operate only on the second table:

if ( settings.nTable.id !== 'account_spending_list' ) {
  return true;
}

Allan

Jini · August 2016

Thank you. Because of your help I could solve the problem and get better understanding of source.

I really appriciate your help.

After row.remove(), and when trying to add row.add, it doesn't work

After row.remove(), and when trying to add row.add, it doesn't work

Answers

Howdy, Stranger!

Categories

DataTables

After row.remove(), and when trying to add row.add, it doesn't work

After row.remove(), and when trying to add row.add, it doesn't work

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables