Jquery DataTable 초기화

무료이면서 기능이 괜찮은 그리드 중에서 Jquery DataTable을 사용하는 일이 있었습니다.
그런데 이상한 에러가 있네요.
DB이 데이터를 매핑하여 화면에 보여지는데 두개 이상의 Row값을 매핑하여 화면에 보여주고 다시 새로운 두개 이상의 Row값으로 매핑하면 괜찬은데, 하나의 Row값을 매핑하고 다시 새로운 두개 이상의 Row값으로 매핑하면 기존의 하나의 데이터가 사라지지 않는 이상한 에거가 나타 납니다.

이럴경우는 어떻게 해야 할까요?
하여 오늘은 Jquery DataTable 초기화에 대해서 알아보겠습니다.




결론부터 미리 말씀드리자면 clear().draw()을 통한 초기화를 해주면 됩니다.

아래는 제가 구현했던 소스를 올려봅니다.

▶ 자바스크립트 DataTable 초기화 부분

---

function fnGetRemark() {
            var Order_M_Idx = "<%=EncryptKey(this.GetKeyId())%>";  // 제품장비/악세사리 주문 마스터 테이블 일련번호

            var items = [
                {
                    Order_M_IDX: Order_M_Idx
                }
            ];

            var options = {
                type: "POST",
                url: "<%= HttpContext.Current.Request.Url.AbsolutePath %>/GetRemarkList",
                data: "{'items':" + JSON.stringify(items) + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                success: function (response) {
                    if (response.d != "") {
                        var parsed = JSON.parse(response.d);

                        if (parsed != null) {
                            fntRemark(parsed);
                        }
                    }
                    else {
                        fntRemark("");
                    }
                },
                error: function (msg) { fntRemark(""); alert(msg.d); },
            };
            jQuery.ajax(options);
        }

        function fntRemark(parsed) {
            var rHelperCar;
            rHelperCar = void 0;

            // dataTable 초기화
            var table = $('#tableRemark').DataTable();
            table.clear().draw();

            $('#tableRemark').DataTable({
                "bDestroy": true,
                "bPaginate": false,
                "bFilter": false,
                "bInfo": false,
                "order": [],
                data: parsed,
                columns: [
                            { data: 'Remark_Idx' },
                            { data: 'Remark' },
                            { data: 'UserNm' },
                            { data: 'RegDate' }
                ],
                "columnDefs": [
                            {
                                "targets": [ 0 ],
                                "visible": false
                            }
                ],
                preDrawCallback: function () {
                    if (!rHelperCar) {
                        rHelperCar = new ResponsiveDatatablesHelper($('#tableRemark'), breakpointDefinition);
                    }
                },
                rowCallback: function (nRow, aData) {
                    rHelperCar.createExpandIcon(nRow);

                    // Row Click 이벤트
                    $(nRow).on('click', function() {
                        fnRemarkCreate(aData['Remark_Idx']);
                    });
                },
                drawCallback: function (oSettings) {
                    rHelperCar.respond();
                }
            });

            // Grid cursor
            $("#tableRemark tr").css('cursor', 'pointer');
        }

파란색의 초기화 부분으로 해결이 가능했습니다.




다음으로 해출된 Ajax를 처리하는 cs 부분 입니다.(닷넷만 해당 합니다.)

▶ .Net CS

---

using System.Web.Script.Serialization;
[System.Web.Services.WebMethod]
        public static string GetRemarkList(object items)
        {
            if (HttpContext.Current.Session["UserId"] == null) return "";

            string result = string.Empty;

            // 리스트 형식
            List<object> lstItems = new JavaScriptSerializer().ConvertToType<List<object>>(items);

            for (int i = 0; i < lstItems.Count; i++)
            {
                Biz.FW.FWXmlAutoBiz oBiz = null;
                Hashtable ht = new Hashtable();
                DataSet dsData = null;

                foreach (KeyValuePair<string, object> kvp in (IEnumerable)lstItems[i])
                {
                    if (kvp.Key == "Order_M_IDX")
                        ht.Add(kvp.Key, DecryptKey(kvp.Value, true));
                    else
                        ht.Add(kvp.Key, kvp.Value.ToString());
                }
             
                oBiz = new Biz.FW.FWXmlAutoBiz();
                dsData = oBiz.XmlGetData("uspRemarkList", ht);

                if (dsData != null && dsData.Tables.Count > 0 && dsData.Tables[0].Rows.Count > 0)
                {
                    var list = new List<Dictionary<string, object>>();

                    foreach (DataRow row in dsData.Tables[0].Rows)
                    {
                        var dict = new Dictionary<string, object>();

                        foreach (DataColumn col in dsData.Tables[0].Columns)
                        {
                            if (col.ColumnName == "Remark_Idx")
                                dict[col.ColumnName] = EncryptKey(row[col]).ToString();
                            else if (col.ColumnName == "Remark")
                                dict[col.ColumnName] = Convert.ToString(row[col]).Replace("\n", "<br />");
                            else
                                dict[col.ColumnName] = (Convert.ToString(row[col]));
                        }

                        list.Add(dict);
                    }

                    JavaScriptSerializer serializer = new JavaScriptSerializer();
                    result = serializer.Serialize(list);
                }
            }

            return result;
        }




이상으로 Jquery DataTable 초기화에 대해서 알아보았습니다.
오늘도 행복하고 좋은 하루 되세요~~~^^