update kol data list

Controllers/ApiController.cs

@@ -56,6 +56,33 @@ namespace Journeys_WantHome.Controllers
             this._httpContextAccessor = httpContextAccessor;
         }
 
+        [Route("kolList")]
+        public ActionResult KolList(IFormCollection obj) {
+            kolListResult ret = new kolListResult();
+
+            authToken token = new authToken(this._httpContextAccessor);
+            if (token.user_isLogin == false)
+            {
+                HttpContext.Response.Cookies.Delete("token_key");
+                ret.ret = "no";
+                ret.err_code = "99999";
+                ret.message = "非登入狀態!";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            List<kol> kols = conn.Query<kol>("select * from kol order by kol_modifydate desc").ToList();
+
+            foreach (kol kolItem in kols)
+            {
+                kolDetial objItem = new kolDetial(kolItem);
+
+                ret.kolList.Add(objItem);
+            }
+
+            ret.ret = "yes";
+            return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+        }
+
         [Route("kolAddEditDelGet")]
         public ActionResult kolAddEditDelGet(IFormCollection obj) {
             kolResult ret = new kolResult();
@@ -72,6 +99,37 @@ namespace Journeys_WantHome.Controllers
 
             string method = obj["method"].ToString();
             string kol_uid = obj["kol_uid"].ToString();
+
+            if (method == "del") {
+                conn.Execute("delete kol where kol_uid = @kol_uid", new { kol_uid = kol_uid});
+                conn.Execute("delete kolMakeup where kol_uid = @kol_uid", new { kol_uid = kol_uid });
+                conn.Execute("delete kolStyle where kol_uid = @kol_uid", new { kol_uid = kol_uid });
+                conn.Execute("delete kolFansType where kol_uid = @kol_uid", new { kol_uid = kol_uid });
+                conn.Execute("delete kolMedia where kol_uid = @kol_uid", new { kol_uid = kol_uid });
+                conn.Execute("delete kolCooperateType where kol_uid = @kol_uid", new { kol_uid = kol_uid });
+
+                ret.ret = "yes";
+
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
+            if (method == "get")
+            {
+                kol kolData = conn.QueryFirstOrDefault<kol>("select * from kol where kol_uid = @kol_uid", new { kol_uid = kol_uid });
+
+                if (kolData == null)
+                {
+                    ret.ret = "no";
+                    ret.message = "找不到此kol_uid資料!";
+                    ret.err_code = "0003";
+                    return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+                }
+
+                ret.kol = new kolDetial(kolData);
+                ret.ret = "yes";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
             string kol_name = obj["kol_name"].ToString();
             string kol_descript = obj["kol_descript"].ToString();
             string kol_contact1 = obj["kol_contact1"].ToString();
@@ -99,6 +157,163 @@ namespace Journeys_WantHome.Controllers
                 return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
             }
 
+            if (method == "edit") {
+                string err_msg = "";
+
+                if (kol_name == "")
+                {
+                    err_msg = "請輸入KOL頻道名稱!\n";
+                }
+
+                if (kol_photo == "")
+                {
+                    err_msg += "請選擇KOL的照片!\n";
+                }
+
+                if (err_msg != "")
+                {
+                    ret.ret = "no";
+                    ret.err_code = "0002";
+                    ret.message = err_msg;
+                    return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+                }
+
+                kol newKol = conn.QueryFirstOrDefault<kol>("select * from kol where kol_uid = @kol_uid", new { kol_uid = kol_uid});
+
+                //newKol.kol_uid = kol_uid;
+                newKol.kol_name = kol_name;
+                newKol.kol_descript = kol_descript;
+                newKol.kol_photo = kol_photo;
+                newKol.kol_contact1 = kol_contact1;
+                newKol.kol_contact2 = kol_contact2;
+                newKol.kol_men_ratio = kol_men_ratio;
+                newKol.kol_women_ratio = kol_women_ratio;
+                newKol.kol_13_17 = kol_13_17;
+                newKol.kol_18_24 = kol_18_24;
+                newKol.kol_25_34 = kol_25_34;
+                newKol.kol_35_44 = kol_35_44;
+                newKol.kol_45_54 = kol_45_54;
+                newKol.kol_55_64 = kol_55_64;
+                newKol.kol_65 = kol_65;
+                newKol.kol_modifydate = DateTime.Now;
+                newKol.kol_modify_userId = token.user_id;
+
+                string[] kolMakeupArr = kolMakeupStr.Split(',');
+
+                List<kolMakeup> kolMakeups = new List<kolMakeup>();
+                foreach (string makeup in kolMakeupArr)
+                {
+                    optionItem item = conn.QueryFirstOrDefault<optionItem>("select * from optionItem where optionItem_ishide = 'N' and optionItem_uid = @optionItem_uid", new { optionItem_uid = makeup });
+
+                    if (item != null)
+                    {
+                        kolMakeup makeupObj = new kolMakeup();
+                        makeupObj.kolMakeup_uid = "kmk_" + GlobalClass.CreateRandomCode(12);
+                        makeupObj.kol_uid = kol_uid;
+                        makeupObj.option_uid = item.option_uid;
+                        makeupObj.optionItem_uid = item.optionItem_uid;
+                        kolMakeups.Add(makeupObj);
+                    }
+                }
+
+                string[] kolStyleArr = kolStyleStr.Split(",");
+
+                List<kolStyle> kolStyles = new List<kolStyle>();
+                foreach (string style in kolStyleArr)
+                {
+                    optionItem item = conn.QueryFirstOrDefault<optionItem>("select * from optionItem where optionItem_ishide = 'N' and optionItem_uid = @optionItem_uid", new { optionItem_uid = style });
+
+                    if (item != null)
+                    {
+                        kolStyle styleObj = new kolStyle();
+                        styleObj.kolStyle_uid = "ks_" + GlobalClass.CreateRandomCode(12);
+                        styleObj.kol_uid = kol_uid;
+                        styleObj.option_uid = item.option_uid;
+                        styleObj.optionItem_uid = item.optionItem_uid;
+                        kolStyles.Add(styleObj);
+                    }
+
+                }
+
+                string[] kolFansTypeArr = kolFansTypeStr.Split(",");
+
+                List<kolFansType> kolFansTypes = new List<kolFansType>();
+                foreach (string fansType in kolFansTypeArr)
+                {
+                    optionItem item = conn.QueryFirstOrDefault<optionItem>("select * from optionItem where optionItem_ishide = 'N' and optionItem_uid = @optionItem_uid", new { optionItem_uid = fansType });
+
+                    if (item != null)
+                    {
+                        kolFansType fansObj = new kolFansType();
+                        fansObj.kolFansType_uid = "kft_" + GlobalClass.CreateRandomCode(12);
+                        fansObj.kol_uid = kol_uid;
+                        fansObj.option_uid = item.option_uid;
+                        fansObj.optionItem_uid = item.optionItem_uid;
+                        kolFansTypes.Add(fansObj);
+                    }
+                }
+
+                dynamic mediaJsonObj;
+
+                try
+                {
+                    mediaJsonObj = JsonConvert.DeserializeObject(mediaArrayJson);
+                }
+                catch (Exception ex)
+                {
+                    ret.ret = "no";
+                    ret.err_code = "0003";
+                    ret.message = "media json error" + ex.Message;
+                    return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+                }
+
+                List<kolMedia> medias = new List<kolMedia>();
+
+                foreach (dynamic item in mediaJsonObj)
+                {
+                    kolMedia mediaObj = new kolMedia();
+
+                    mediaObj.kolMedia_uid = "km_" + GlobalClass.CreateRandomCode(12);
+                    mediaObj.kol_uid = kol_uid;
+                    mediaObj.option_uid = item.option_uid;
+                    mediaObj.optionItem_uid = item.optionItem_uid;
+                    mediaObj.kolMedia_fansNum = int.Parse(item.kolMedia_fansNum.ToString());
+                    mediaObj.kolMedia_accountName = item.kolMedia_accountName;
+                    mediaObj.kolMedia_displayName = item.kolMedia_displayName;
+                    mediaObj.kolMedia_url = item.kolMedia_url;
+
+                    medias.Add(mediaObj);
+                }
+
+                conn.Execute("delete kolMakeup where kol_uid = @kol_uid", new { kol_uid = kol_uid});
+                conn.Execute("delete kolStyle where kol_uid = @kol_uid", new { kol_uid = kol_uid });
+                conn.Execute("delete kolFansType where kol_uid = @kol_uid", new { kol_uid = kol_uid });
+                conn.Execute("delete kolMedia where kol_uid = @kol_uid", new { kol_uid = kol_uid });
+
+                conn.Insert(kolMakeups);
+                conn.Insert(kolStyles);
+                conn.Insert(kolFansTypes);
+                conn.Insert(medias);
+
+                try
+                {
+                    conn.Update(newKol);
+                    conn.Close();
+
+                    ret.kol = new kolDetial(kol_uid);
+                }
+                catch (Exception ex)
+                {
+                    ret.ret = "no";
+                    ret.err_code = "1001";
+                    ret.message = ex.Message;
+                    return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+                }
+
+                ret.ret = "yes";
+                return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
+            }
+
             if (method == "add") {
                 string err_msg = "";
                 
@@ -250,6 +465,8 @@ namespace Journeys_WantHome.Controllers
                 return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
             }
 
+            
+
             return Content(JsonConvert.SerializeObject(ret), "application/json;charset=utf-8");
         }
 
@@ -364,6 +581,13 @@ namespace Journeys_WantHome.Controllers
         
     }
 
+    public class kolListResult {
+        public string ret { get; set; } = "";
+        public string err_code { get; set; } = "";
+        public string message { get; set; } = "";
+
+        public List<kolDetial> kolList { get; set; } = new List<kolDetial>();
+    }
     public class kolResult { 
         public string ret { get; set; } = "";
         public string err_code { get; set; } = "";

Views/Home/KolList.cshtml

@@ -38,9 +38,12 @@
                 <table id="dt-responsive" class="table dt-responsive nowrap w-100">
                     <thead>
                         <tr>
+                            <th> 相片 </th>
                             <th> 名稱 </th>
                             <th> 組成類型 </th>
-                            <th> KOL類型 </th>  
+                            <th> 聯絡方式1 </th> 
+                            <th> 聯絡方式2 </th>
+                            <th> 最後修改時間 </th>
                             <th>  </th>
                         </tr>
                     </thead>

wwwroot/assets/javascript/custom/kollist.js

@@ -1,7 +1,9 @@
 
 var mediaTr;
 var delMedia;
-
+var mainTable;
+var mainRowID;
+var mainPos;
 $(document).ready(function () {
     delMedia = '';
 
@@ -9,7 +11,7 @@ $(document).ready(function () {
     loadKolMakeupCheckboxItem();
     loadKolStyleCheckboxItem();
     loadKolFansTypeCheckboxItem();
-
+    loadDataTable();
     $('#kolSaveBtn').on('click', function () {
         var method = $('#method').val();
         var kol_uid = $('#kol_uid').val();
@@ -91,6 +93,8 @@ $(document).ready(function () {
             return;
         }
 
+        mainTable = $('#dt-responsive').dataTable();
+
         var formData = {
             method: method,
             kol_uid: kol_uid,
@@ -119,9 +123,18 @@ $(document).ready(function () {
             type: "post",
             data: formData,
             success: function (data, textStatus, jqXHR) {
+                var obj = data.kol;
                 if (data.ret == "yes") {
-                    
 
+                    if (method == "add") {
+                        mainTable.fnAddData(obj);
+                    }
+
+                    if (method == "edit") {
+                        mainTable.fnUpdate(obj, mainPos);
+                    }
+
+                    $('#clientNewModal').modal('toggle');
                 } else {
                     alert(data.message);
 
@@ -225,6 +238,211 @@ $(document).ready(function () {
         $('#clientNewModal').modal('toggle');
     });
 
+    function loadDataTable() {
+        var dataTables = {
+            init: function init() {
+
+                this.bindUIActions();
+            },
+            bindUIActions: function bindUIActions() {
+
+                // event handlers
+                this.table = this.handleDataTables();
+
+                // add buttons
+                //this.table.buttons().container().appendTo('#dt-buttons').unwrap();
+            },
+            handleDataTables: function handleDataTables() {
+                //$('#myTable').append("<tfoot><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tfoot>");
+                return $('#dt-responsive').DataTable({
+                    dom: '<\'text-muted\'Bif>\n        <\'table-responsive\'trl>\n        <\'mt-4\'p>',
+                    lengthChange: true,
+                    lengthMenu: [[25, 50, 100, -1], [25, 50, 100, "All"]],
+                    pageLength: 25,
+                    buttons: [
+                        //{
+                        //    text: '休假設定',
+                        //    action: function (e, dt, node, config) {
+                        //        vacationBtnFun();
+
+                        //    }
+                        //},
+                        //'excelHtml5'
+                    ],
+                    language: {
+                        paginate: {
+                            previous: '<i class="fa fa-lg fa-angle-left"></i>',
+                            next: '<i class="fa fa-lg fa-angle-right"></i>'
+                        },
+                        buttons: {
+                            copyTitle: 'Data copied',
+                            copyKeys: 'Use your keyboard or menu to select the copy command'
+                        }
+                    },
+                    autoWidth: false,
+                    ajax: {
+                        url: '/Api/kolList',
+                        type: 'POST',
+                        data: function (d) {
+                            Object.assign(d, {
+                                bar_area: $('#bar_area').val(),
+                                is_lottery: $('#isLottery').val()
+                            });
+
+                            return d;
+                        },
+                        dataSrc: 'kolList'
+                    },
+                    rowId: 'kol_uid',
+                    deferRender: true,
+                    initComplete: function () {
+                        $('#dt-responsive').on('click', 'a', function () {
+                            buttonClick2(this);
+                        });
+
+                        $('#dt-responsive').on('click', 'button', function () {
+                            buttonClick2(this);
+                        });
+
+                        $('#dt-responsive').on('click', 'input[name="selectedRow[]"]', function () {
+                            checkboxClick(this);
+                        });
+                    },
+                    order: [[5, 'desc']],
+                    info: true,
+                    search: "搜尋:",
+                    searching: true,
+                    columns: [{ data: 'kol_photo', className: 'align-middle', orderable: false, searchable: false },
+                        { data: 'kol_name', className: 'align-middle text-left', orderable: true, searchable: true },
+                        { data: 'kol_descript', className: 'align-middle text-left', orderable: true, searchable: true },
+                        { data: 'kol_contact1', className: 'align-middle text-left', orderable: false, searchable: true },
+                        { data: 'kol_contact2', className: 'align-middle text-left', orderable: false, searchable: true },
+                        { data: 'kol_modifydate', className: 'align-middle text-left', orderable: false, searchable: true },
+                        { data: 'kol_uid', className: 'align-middle text-center', orderable: false, searchable: false }],
+                    columnDefs: [
+                        {
+                            targets: 0,
+                            className: 'align-middle text-center',
+                            orderable: false,
+                            searchable: false,
+                            render: function render(data, type, row, meta) {
+                                var ret = '';
+                                ret += '<div class="user-avatar user-avatar-xxl">';
+                                ret += '    <img src="' + row.kol_photo + '" alt="">';
+                                ret += '</div>';
+                                return ret;
+                                //return row.gift_city + row.gift_area + row.gift_address;
+                                //var editRet = '<a id="table-btn" class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="edit" data-uid="' + row.quotation_serial + '"><i class="fa fa-pencil-alt"></i></a>          <a id="table-btn" class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="setting" data-uid="' + row.quotation_serial + '"><i class="fas fa-cog"></i></a>';
+
+                                //if (row.quotationUser_perm == "A" || row.quotationUser_perm == "D" || row.quotationUser_perm == "admin" || row.quotationUser_perm == "pro") {
+                                //    editRet = editRet + '          <a  id="table-btn" class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="del" data-uid="' + row.quotation_serial + '"><i class="far fa-trash-alt"></i></a>';
+                                //}
+                                //return editRet;
+                            }
+                        }
+                        , {
+                            targets: 2,
+                            orderable: false,
+                            searchable: false,
+                            render: function render(data, type, row, meta) {
+                                var ret = '';
+
+                                $.each(row.makeups, function (key, value) {
+                                    ret += value.optionItem_name + '/';
+                                }); 
+
+                                ret = ret.replace(/^\/+|\/+$/g, '');
+
+                                return ret;
+
+                                //return '<a href="javascript: void(0); " data-method="edit" data-uid="' + row.company_uid + '">' + row.company_name + '</a>';
+                            }
+                        }
+                        , {
+                            targets: 5,
+                            orderable: false,
+                            searchable: false,
+                            render: function render(data, type, row, meta) {
+                                return (new Date(row.kol_modifydate)).format("yyyy/MM/dd hh:mm:ss");
+                            }
+                        }
+                        , {
+                            targets: 6,
+                            orderable: false,
+                            searchable: false,
+                            render: function render(data, type, row, meta) {
+                                var ret = '';
+
+                                ret += '<button type="button" data-uid="' + row.kol_uid + '" data-method="edit" class="btn btn-sm btn-icon btn-secondary" ><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button>';
+                                ret += '<button type="button" data-uid="' + row.kol_uid + '" data-method="del" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>';
+                                return ret;
+                            }
+                        }
+                        //, {
+                        //    targets: 2,
+                        //    orderable: false,
+                        //    searchable: false,
+                        //    render: function render(data, type, row, meta) {
+                        //        return row.company_serial;
+                        //    }
+                        //}, {
+                        //    targets: 3,
+                        //    orderable: false,
+                        //    searchable: false,
+                        //    render: function render(data, type, row, meta) {
+
+                        //        if (row.company_enabled == "Y") {
+                        //            return '<label class="switcher-control switcher-control-lg"><input type="checkbox" class="switcher-input" checked disabled> <span class="switcher-indicator"></span> <span class="switcher-label-on">啟用</span> <span class="switcher-label-off">停用</span></label>';
+                        //        } else {
+                        //            return '<label class="switcher-control switcher-control-lg"><input type="checkbox" class="switcher-input" disabled> <span class="switcher-indicator"></span> <span class="switcher-label-on">啟用</span> <span class="switcher-label-off">停用</span></label>';
+                        //        }
+                        //    }
+                        //}, {
+                        //    targets: 4,
+                        //    orderable: false,
+                        //    searchable: false,
+                        //    render: function render(data, type, row, meta) {
+                        //        return (new Date(row.company_createdate)).format("yyyy/MM/dd hh:mm:ss");
+                        //    }
+                        //}, {
+                        //    targets: 5,
+                        //    orderable: false,
+                        //    searchable: false,
+                        //    render: function render(data, type, row, meta) {
+                        //        var editRet = '<a class="btn btn-sm btn-secondary" href="javascript: void(0);" data-method="edit" data-uid="' + row.company_uid + '" ><i class="fa fa-pencil-alt"></i></a>          <a  class="btn btn-sm btn-secondary" style="display: none;" href="javascript: void(0);" data-method="del" data-uid="' + row.company_uid + '" ><i class="far fa-trash-alt"></i></a>';
+
+
+                        //        return editRet;
+                        //    }
+                        //}
+
+                    ],
+
+                });
+            },
+            handleSearchRecords: function handleSearchRecords() {
+                var self = this;
+
+                $('#table-search, #filterBy').on('keyup change focus', function (e) {
+                    var filterBy = $('#filterBy').val();
+                    var hasFilter = filterBy !== '';
+                    var value = $('#table-search').val();
+
+                    self.table.search('').columns().search('').draw();
+
+                    if (hasFilter) {
+                        self.table.columns(filterBy).search(value).draw();
+                    } else {
+                        self.table.search(value).draw();
+                    }
+
+                });
+            }
+        }
+
+        dataTables.init();
+    }
+
 
     var url = "/Api/KolPhotoUpload";
 
@@ -262,8 +480,130 @@ $(document).ready(function () {
         $('#progress-avatar').removeClass('show').children().css('width', 0);
     }); // File upload using button
     // =============================================================
+
+
 });
 
+
+function buttonClick2(obj) {
+    var type = obj.getAttribute('data-method');
+    var uid = obj.getAttribute('data-uid');
+
+    mainTable = $('#dt-responsive').dataTable();
+    mainRowID = $('#' + uid);
+
+    mainPos = mainTable.fnGetPosition($('#' + uid)[0]);
+
+    if (type == "del") {
+        if (confirm('確定刪除此筆資料? 刪除後將無任何方法回復!')) {
+            var formData = {
+                method: "del",
+                kol_uid: uid
+            }
+
+            $.ajax({
+                url: "/Api/kolAddEditDelGet",
+                type: "post",
+                data: formData,
+                success: function (data, textStatus, jqXHR) {
+                    if (data.ret == "yes") {
+                        var row = mainTable.api().row(mainRowID).remove().draw(false);
+                        alert('刪除完成!');
+
+                    } else {
+                        alert(data.message);
+
+                        if (data.err_code == "9999") {
+                            location.href = "/Home/Index";
+                        }
+                    }
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    alert('網路或伺服器發生錯誤，請稍後重試!');
+                }
+            });
+        }
+    }
+
+    if (type == "edit") {
+        $('#method').val('edit');
+        $('#kol_uid').val(uid);
+
+        var formData = {
+            method: "get",
+            kol_uid: uid
+        }
+
+        $.ajax({
+            url: "/Api/kolAddEditDelGet",
+            type: "post",
+            data: formData,
+            success: function (data, textStatus, jqXHR) {
+                if (data.ret == "yes") {
+                    cleanModalData();
+
+                    var obj = data.kol;
+                    $('#method').val('edit');
+                    $('#kol_uid').val(uid);
+                    $('#kol_name').val(obj.kol_name).trigger('change');
+                    $('#kol_descript').val(obj.kol_descript).trigger('change');
+                    $('#kol_contact1').val(obj.kol_contact1).trigger('change');
+                    $('#kol_contact2').val(obj.kol_contact2).trigger('change');
+                    $('#kol_men_ratio').val(obj.kol_men_ratio).trigger('change');
+                    $('#kol_women_ratio').val(obj.kol_women_ratio).trigger('change');
+                    $('#kol_13_17').val(obj.kol_13_17).trigger('change');
+                    $('#kol_18_24').val(obj.kol_18_24).trigger('change');
+                    $('#kol_25_34').val(obj.kol_25_34).trigger('change');
+                    $('#kol_35_44').val(obj.kol_35_44).trigger('change');
+                    $('#kol_45_54').val(obj.kol_45_54).trigger('change');
+                    $('#kol_55_64').val(obj.kol_55_64).trigger('change');
+                    $('#kol_65').val(obj.kol_65).trigger('change');
+                    $('#fileupload-avatar').parent().children('img').prop('src', obj.kol_photo);
+
+                    $.each(obj.makeups, function (key, value) {
+                        $("input:checkbox[value='" + value.optionItem_uid + "']").prop('checked', true);
+                    });
+
+                    $.each(obj.styles, function (key, value) {
+                        $("input:checkbox[value='" + value.optionItem_uid + "']").prop('checked', true);
+                    });
+
+                    $.each(obj.fansTypes, function (key, value) {
+                        $("input:checkbox[value='" + value.optionItem_uid + "']").prop('checked', true);
+                    });
+                    $.each(obj.medias, function (key, value) {
+                        var trHtml = "";
+                        trHtml += '<tr>';
+                        trHtml += '     <td class="align-middle">  ' + value.optionItem_name + ' </td>';
+                        trHtml += '     <td class="align-middle"> ' + value.kolMedia_url + ' </td>';
+                        trHtml += '     <td class="align-middle"> ' + value.kolMedia_accountName + ' </td>';
+                        trHtml += '     <td class="align-middle"> ' + value.kolMedia_displayName + ' </td>';
+                        trHtml += '     <td class="align-middle"> ' + value.kolMedia_fansNum + ' </td>';
+                        trHtml += '     <td class="align-middle text-right">';
+                        trHtml += '         <button type="button" data-uid="' + value.kolMedia_uid + '" media-uid="' + value.optionItem_uid + '" data-method="edit" onclick="buttonClick(this);" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button>';
+                        trHtml += '         <button type="button" data-uid="' + value.kolMedia_uid + '" media-uid="' + value.optionItem_uid + '" data-method="del" onclick="buttonClick(this);" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>';
+                        trHtml += '     </td>';
+                        trHtml += '</tr>';
+
+                        $('#media_table tbody').append(trHtml);
+                        //$("input:checkbox[value='" + value.optionItem_uid + "']").prop('checked', true);
+                    });
+                    
+                    $('#clientNewModal').modal('toggle');
+                } else {
+                    alert(data.message);
+
+                    if (data.err_code == "9999") {
+                        location.href = "/Home/Index";
+                    }
+                }
+            },
+            error: function (jqXHR, textStatus, errorThrown) {
+                alert('網路或伺服器發生錯誤，請稍後重試!');
+            }
+        });
+    }
+}
 function buttonClick(obj) {
     mediaTr = $(obj).closest('tr');