xml,json data show using ajax ,webmethod in C#


  $.ajax({

                type: "POST",

                url: "Pagename.aspx/GetDetails",

                data: '{id: ' + row12 + ' }',

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: OnSuccess,

                error: function (response) { alert(response.responseText); }

            });

  function OnSuccess(response) {

            var xmlDoc = $.parseXML(response.d);

            var xml = $(xmlDoc);

            var Ledger = xml.find("Ledger");

            var Ledger1 = xml.find("Ledger1");

            $(Ledger).each(function () {

                $('#tableBody').append(

                    '<tr>' +

                    '<td>' +

                    $(this).find('DateEntry').text() + '</td> ' +

                    '<td>' +

                    $(this).find('DateEntrySubmission').text() + '</td> ' +

                    '<td>' +

                    $(this).find('ReceiptNo').text() + '</td> ' + '<td>' +

                    $(this).find('Installment').text() + '</td> ' + '<td>' +

                    $(this).find('Debit').text() + '</td> ' + '<td>' +

                    $(this).find('Credit').text() + '</td> ' + '<td>' +

                    '</td> ' + '<td>' +

                    $(this).find('Particulars').text() + '</td> ' + '<td>' +

                    $(this).find('Remarks').text() + '</td> ' + '<td>' +

                    $(this).find('TransactionType').text() + '</td> ' + '<td>' +

                    '</tr>');

            });


            $(Ledger1).each(function () {

                $("#tablefooter").empty();

                $('#tablefooter').append(

                    '<tr>' +

                    '<td>' + '</td>' +

                    '<td>' + '</td>' +

                    '<td>' + '</td>' +

                    '<td>' + 'Total' + '</td>' +

                    '<td>' +

                    $(this).find('TotalDebit').text() + '</td> ' +

                    '<td>' +

                    $(this).find('TotalCredit').text() + '</td> ' +

                    '<td>' +

                    $(this).find('TotalBalance').text() + '</td> ' + '</tr>'

                );

            });

        }

C#

    [WebMethod]

   public static string GetDetails(long id)

    {

        DataHelper obj = new DataHelper();

        string constr = obj.GetConnectionString("");

        using (SqlConnection con = new SqlConnection(constr))

        {

            using (SqlCommand cmd = new SqlCommand("select cast(cast(DateEntry as date) as varchar) As DateEntry ,ReceiptNo,cast(DateEntrySubmission as varchar) As DateEntrySubmission,Particulars,TransactionType,Semester as Installment,Debit,Credit,Remarks,currency from Ledger where IDNo='" + id +"' order by cast(DateEntry As Date)  ;select sum(Debit) As TotalDebit,sum(Credit) As TotalCredit , (sum(Debit)- sum(Credit) ) as TotalBalance from Ledger where IDNo=" + id)) 

            {

                cmd.Connection = con;

               

                con.Open();

                DataSet ds = new DataSet();

                using (SqlDataAdapter sda = new SqlDataAdapter(cmd))

                {

                    sda.Fill(ds, "Ledger");

                }

                return ds.GetXml(); 

            }

        }

    }


Asp.net Page

<table class="table table-bordered" style="width: 135%">

                                        <thead style="background-color: #f9ced4; position: sticky; top: 0;">

                                            <tr>

                                                <th>Receipt Date

                                                </th>

                                                <th>Bank Date

                                                </th>

                                                <th>ReceiptNo.

                                                </th>

                                                <th>Installment

                                                </th>

                                                <th>Debit

                                                </th>

                                                <th>Credit

                                                </th>

                                                <th>Balance

                                                </th>

                                                <th>Particulars

                                                </th>

                                                <th>Remarks

                                                </th>

                                                <th>TransactionType

                                                </th>

                                            </tr>

                                        </thead>

                                        <tbody id="tableBody">

                                        </tbody>

                                        <tfoot id="tablefooter" style="font-weight: bold;">

                                        </tfoot>

                                    </table>