Display json data in j query data table

/////////////////////////////////////////////////////////////////////////////
/////// demo.aspx
//////////////////////////////////////////////////////////////////////////////


<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ClientTradeCallLogReport.aspx.cs" Inherits="Universal.ClientTradeCallLogReport" %>

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <link href="Content/sumoselect.css" rel="stylesheet" />
    <link href="Content/SubDataTable/demo_table_jui.css" rel="stylesheet" />
    <link href="Content/SubDataTable/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
    <link href="Content/SubDataTable/ColReorder.css" rel="stylesheet" />
    <link href="Content/SubDataTable/ColVis.css" rel="stylesheet" />
    <link href="Content/SubDataTable/Demo_Table.css" rel="stylesheet" />
    <link href="Content/SubDataTable/DatePickerAjax.css" rel="stylesheet" />
    <link href="Content/SubDataTable/dataTables.fixedHeader.css" rel="stylesheet" />
    <link href="Content/SubDataTable/jquery.dataTables_themeroller.css" rel="stylesheet" />
    <link href="Content/dataTables.tableTools.css" rel="stylesheet" />
    <%--  <link href="Content/jquery.dataTables.css" rel="stylesheet" />--%>

    <script src="Scripts/jquery.dataTables.js"></script>
    <script src="Scripts/jquery.dataTables.min.js"></script>
    <script src="Scripts/DataTable/dataTables.tableTools.js"></script>
    <script src="Scripts/DataTable/ColReorder.js"></script>
    <script src="Scripts/DataTable/ColVis.js"></script>
    <script src="Scripts/DataTable/scrolling.js"></script>
    <script src="Scripts/jquery.sumoselect.js"></script>
    <script src="Scripts/SampleCharts.js"></script>
 
   
    <script type="text/javascript">      
       function BindMultiselectddl(value1) {
            debugger;
            var formDate = $('.csFromDate').val();
            var toDate = $('.csToDate').val();
       if (value1 == 'TC') {
                $.ajax({
                    type: "POST",
                    url: "ClientTradeCallLogReport.aspx/ShowTradeConfirmationdata",
                    data: '{"FromDate":"' + formDate + '","ToDate":"' + toDate + '","BranchIDs":"' + SelectedBranches + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        debugger
                        $('#ClientTradeConfiramtion').dataTable().fnDestroy();
                        var empjson = JSON.parse(response.d);
                        if (empjson.length > 0) {
                            var tablecontent = "";
                            $.each(empjson, function (i, item) {
                                tablecontent += "<tr><td>" + empjson[i].TradeDate +
                                               "</td><td style='text-align:left'>" + empjson[i].BranchCode + "</td><td style='text-align:left;'>" + empjson[i].BranchShortName +
                                               "</td><td style='text-align:left;'>" + empjson[i].ClientCode + "</td><td style='text-align:left'>" + empjson[i].ClientName +
                                               "</td><td style='text-align:right'>" + empjson[i].CalledOn + "</td><td style='text-align:right'>" + empjson[i].CalledFrom +
                                               "</td><td style='text-align:left;'>" + empjson[i].StartTime + "</td><td style='text-align:left'>" + empjson[i].EndTime +
                                               "</td><td style='text-align:right'>" + empjson[i].LogId + "</td><td style='text-align:left'>" + empjson[i].ExchangeCode +
                                               "</td><td style='text-align:left'>" + empjson[i].CapitalTradingCode + "</td><td style='text-align:right'>" + empjson[i].CommTradingCode +
                                               "</td><td style='text-align:left'>" + empjson[i].PanNo + "</td><td style='text-align:left'>" + empjson[i].UserID +
                                               "</td><td style='text-align:left'>" + empjson[i].RegionShortName + "</td><td style='text-align:left;'>" + empjson[i].ZoneShortName + "</td></tr>";

                            });
                            $('#ClientTradeConfiramtion tbody').html(tablecontent);
                            var oTable;
                            /* Add the events etc before DataTables hides a column */
                            $(".csClientTradeConfiramtion thead input").keyup(function () {
                                /* Filter on the column (the index) of this element */
                                oTable.fnFilter(this.value, oTable.oApi._fnVisibleToColumnIndex(
                                    oTable.fnSettings(), $(".csClientTradeConfiramtion thead input").index(this)));
                            });
                            /*
                             * Support functions to provide a little bit of 'user friendlyness' to the textboxes
                             */
                            $(".csClientTradeConfiramtion thead input").each(function (i) {
                                this.initVal = this.value;
                            });

                            $(".csClientTradeConfiramtion thead input").focus(function () {
                                if (this.className == "search_init1") {
                                    this.className = "";
                                    this.value = "";
                                }
                            });

                            $(".csClientTradeConfiramtion thead input").blur(function (i) {
                                if (this.value == "") {
                                    this.className = "search_init1";
                                    this.value = this.initVal;
                                }
                            });
                            oTable = $('#ClientTradeConfiramtion').dataTable().fnDestroy();
                            oTable = $('#ClientTradeConfiramtion').dataTable({

                                "sScrollY": "200px",
                                "sScrollX": "100px",
                                "bPaginate": false,
                                "bJQueryUI": true,
                                "bProcessing": true,
                                "bRetrieve": true,
                                "bDestroy": true,
                                "oLanguage": {
                                    "sSearch": "Search all columns:"
                                },
                                "bSortCellsTop": true,


                            });
                            var tt = new $.fn.dataTable.TableTools(oTable, {
                                "dom": '<"pad5"CT><"clear"><lf<"clear">r<t>ip>',
                                "sSwfPath": "../Flash/copy_csv_xls_pdf.swf",
                                "aButtons": [
                                     {
                                         "sExtends": "copy",
                                         "mColumns": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
                                         "oSelectorOpts": { filter: 'applied', order: 'current' },
                                     },
                                    {
                                        "sExtends": "csv",
                                        "mColumns": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
                                        "oSelectorOpts": { filter: 'applied', order: 'current' },
                                    },
                                     {
                                         "sExtends": "xls",
                                         "mColumns": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
                                         "oSelectorOpts": { filter: 'applied', order: 'current' },
                                     },
                                    {
                                        "sExtends": "pdf",
                                        "sPdfOrientation": "landscape",
                                        "sPdfMessage": "Zone Report",
                                        "mColumns": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
                                        "oSelectorOpts": { filter: 'applied', order: 'current' },
                                    },
                                      {
                                          "sExtends": "print",
                                          "mColumns": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
                                          "oSelectorOpts": { filter: 'applied', order: 'current' },
                                      },

                                ]

                            });
                            $('.ui-state-default').removeClass('sorting_asc');
                            $('.ui-buttonset').html('');
                            $(tt.fnContainer()).insertAfter('#ClientTradeConfiramtion_filter');
                        }
                        else {
                            //$('#RegionTable tbody').html('<tr class="odd"><td valign="top" colspan="9" class="dataTables_empty">No data available in table</td></tr>');
                            $('#ClientTradeConfiramtion').dataTable().fnClearTable();
                            $('#ClientTradeConfiramtion').dataTable({

                                "sScrollY": "250px",
                                "sScrollX": "100px",
                                "bPaginate": false,
                                "bJQueryUI": true,
                                "bProcessing": true,
                                "bRetrieve": true,
                                "bDestroy": true,
                                "oLanguage": {
                                    "sSearch": "Search all columns:"
                                },
                                "bSortCellsTop": true,

                            });
                            $('.ui-state-default').removeClass('sorting_asc');
                        }
                        HideProgress();
                    },
                    error: function (response) {
                        // debugger;
                        var msg = response.d;
                    }
                });
            }
         
            window.testSelAll = $('.testSelAll').SumoSelect({ okCancelInMulti: true, selectAll: true });
        }
        function Tradeinforamtion(obj) {
            debugger;
            var TradeDate = $(this).find('td:first').text();
            if (TradeDate != "") {
                var dateAr = TradeDate.split('-');
                var newDate = dateAr[2] + '-' + dateAr[1] + '-' + dateAr[0];
            }
            var ddlBranchCode = $(this).find('td:eq(1)').text();
            var clientCode = $(this).find('td:eq(3)').text();
            if (newDate != null) {
                var newPageUrl = 'TradeandVoiceLogTab.aspx?TradeDate=' + newDate + '&BranchCode=' + ddlBranchCode + '&ClientCode=' + clientCode;
                window.open(newPageUrl, '_newtab');
            }
        }

     
        //$('form').live("submit", function () {
        //    ShowProgress();
        //});
    </script>

    <style type="text/css">
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            background-color: black;
            z-index: 99;
            opacity: 0.7;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            min-height: 100%;
            width: 100%;
        }
        /*.csddl {
            max-height: 100px;
            overflow-y: auto;
            overflow-x: hidden;
            height: 34px !important;
            margin-top: 0 !important;
        }*/

        /*table.csClientWithotLogTable > thead > tr > td >*/

        /*table.csClientWithotLogTable > thead > tr > td >*/
        /*input.csinput {
            width: 73px !important;
        }*/
        .csClientWithotLogTable {
            width: 1123px !important;
        }

        @media screen and (-webkit-min-device-pixel-ratio:0) {
            .appframe-wrapper {
                background-color: #fff;
                min-height: 540px !important;
            }
        }

        .appframe-wrapper {
            background-color: #fff;
            min-height: 545px\9 !important;
        }

        .dataTables_scrollBody {
            height: 340px !important;
        }

        .dropdown-menu {
            max-height: 300px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #caption {
            top: 7px !important;
            font-family: sans-serif !important;
        }
    </style>
    <div class="content page-container Content-ParenDiv" id="page-Module/Selling">
        <asp:UpdatePanel ID="upClientData" runat="server">
            <ContentTemplate>
                <div class="app-page container">
                    <div class="appframe-titlebar">
                        <div class="container">
                            <div class="row">
                                <div class=" col-sm-9">
                                    <h4 class="titlebar-left-item hide"><a><i style="margin-right: 10px; font-weight: bold; text-decoration: none;" class="icon-angle-left text-muted"></i></a></h4>
                                     <h5 class="titlebar-center-item "><span class="title-area csBredCrumbSpan"><span style="" class="title-icon text-muted"><i class="glyphicon glyphicon-envelope"></i></span>
                                        <a href="Home.aspx" class="csBredCrumbSpan" >
                                            <asp:Label ID="lblMenuName" runat="server" CssClass="title-text " Text="Reports"> </asp:Label></a> >
                           <a href="#"  class="caASubMenu csBredCrumbSpan"></a> >
                                         <a href="#"  class="caASubSubMenu csBredCrumbSpan"></a></span></h5>
                                </div>
                                <div class="col-sm-3">
                                    <%-- <h5 class="titlebar-center-item"><span class="title-area"></span><b>ClientTradeVoiceLog Report</b></h5>--%>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End of title-->
                    <div class="appframe-wrapper">
                        <div class="appframe container">

                         
                                 
                                 
                                 
                                    <div class="form-group frappe-control col-md-1 filters pull-left" style="max-width: 30px; padding-left: 11px; padding-right: 0px;" title="">
                                        <label class="appframe-control-label"></label>
                                        <div style="display: table; width: 100%;" class="link-field">
                                            <asp:Button ID="btnGo" runat="server" Text="Go" OnClick="btnGo_Click" ValidationGroup="ZoneReport" CssClass="btn btn-primary" />

                                        </div>
                                    </div>
                                </div>
                                <!--End of Col-12 row-->

                            </div>

                            <div class="row csdivCTC" id="divParentCTC" runat="server" visible="false">
                                <div class="col-md-12">
                                    <div style="width: 1138px;">
                                        <div id="divCTC">
                                            <table cellpadding="0" cellspacing="0" border="0" class="display csClientTradeConfiramtion" id="ClientTradeConfiramtion">
                                                <thead>
                                                    <tr>
                                                        <th>Trade Date</th>
                                                        <th>Branch</th>
                                                        <th>Br Name</th>
                                                        <th>Client </th>
                                                        <th>Name</th>
                                                        <th>Called On</th>
                                                        <th>Called From</th>
                                                        <th>Start Time</th>
                                                        <th>End Time</th>
                                                        <th>Log Id</th>
                                                        <th>Exchanges</th>
                                                        <th>Cap Trading Code</th>
                                                        <th>Comm Trading Code</th>
                                                        <th>Pan No</th>
                                                        <th>User Id</th>
                                                        <th>Region</th>
                                                        <th>Zone</th>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <input type="text" name="search_engine" placeholder="Search" class="search_init1 csinput" style="width: 84px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_browser" placeholder="Search" class="search_init1 csinput" style="width: 86px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_platform" placeholder="Search" class="search_init1 csinput" style="width: 85px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_version" placeholder="Search" class="search_init1 csinput" style="width: 89px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_grade" placeholder="Search" class="search_init1 csinput" style="width: 129px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_grade" placeholder="Search" class="search_init1 csinput" style="width: 85px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_engine" placeholder="Search" class="search_init1 csinput" style="width: 85px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_engine" placeholder="Search" class="search_init1 csinput" style="width: 85px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_engine" placeholder="Search" class="search_init1 csinput" style="width: 85px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_engine" placeholder="Search" class="search_init1 csinput" style="width: 85px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_version" placeholder="Search" class="search_init1 csinput" style="width: 89px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_grade" placeholder="Search" class="search_init1 csinput" style="width: 129px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_grade" placeholder="Search" class="search_init1 csinput" style="width: 85px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_engine" placeholder="Search" class="search_init1 csinput" style="width: 85px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_engine" placeholder="Search" class="search_init1 csinput" style="width: 85px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_engine" placeholder="Search" class="search_init1 csinput" style="width: 85px !important;" /></td>
                                                        <td>
                                                            <input type="text" name="search_engine" placeholder="Search" class="search_init1 csinput" style="width: 85px !important;" /></td>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row csMatrixReport" id="divParentMatrix" runat="server">
                                <div class="col-md-12">
                                    <div id="branchwithdates">
                                        <rsweb:ReportViewer ID="rptClientDataReport" runat="server" Font-Names="Verdana" Font-Size="8pt" WaitMessageFont-Names="Verdana" WaitMessageFont-Size="14pt" Width="100%">

                                            <LocalReport ReportPath="ClientLog.rdlc">
                                                <%--<DataSources>
                                                        <rsweb:ReportDataSource DataSourceId="ObjectDataSource1" Name="ClientLogData" />
                                                    </DataSources>--%>
                                            </LocalReport>
                                        </rsweb:ReportViewer>
                                        <%--<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" TypeName="Universal.ClientLogDataTableAdapters.ClientLogData"></asp:ObjectDataSource>--%>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--End of appframe-container-->
                    </div>
                    <!--End of appframe-wrapper-->
                      <div class="loading" align="center" id="divloader" style="position: fixed;display:none; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: white; opacity: 0.7;">
                <div style="padding: 10px; position: fixed; top: 45%; left: 48%;">
                    <img src="Images/LoadingBlue.gif" /><br />
                    <span style="color: darkblue;">Please Wait......</span>
                </div>
            </div>
                 
                </div>

             
            </ContentTemplate>
        </asp:UpdatePanel>
   
    </div>

</asp:Content>

/////////////////////////////////////////////////////////////////////////////
/////// Demo.aspx.cs
//////////////////////////////////////////////////////////////////////////////
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using Universal.BAL;
using Universal.Models;


 protected void btnGo_Click(object sender, EventArgs e)
 {
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "BindMultiselectddl('TC');", true);
             
  }

[WebMethod]
        public static string ShowTradeConfirmationdata(DateTime FromDate, DateTime ToDate, string BranchIDs)
        {
            string strBranchcodess = null;
            string strResult = string.Empty;
            string fromDate = FromDate.ToString("dd-MMM-yyyy");
            string toDate = ToDate.ToString("dd-MMM-yyyy").Trim();
            string[] strBranchcodes = BranchIDs.Split(',');
            foreach (string code in strBranchcodes)
            {
                strBranchcodess = strBranchcodess + "'" + code + "',";
            }
            string strbrncode = strBranchcodess.TrimEnd(',');
            //string strBranchIds = BranchIDs.Replace(',', ' ').Trim();
            DataTable dttable = DashBoardBLL.TradeonfirmationDetails(fromDate, toDate, strbrncode);
            strResult = JsonConvert.SerializeObject(dttable);
            return strResult;
        }