I am learning jquery tables for a report.I am getting api response all fine.But i am unable to bind it to the jquery datatable.Looked many questions/examples similar to this.I am getting json data from ajax call.In my case i am passing three params to my web service.

Web Service

 [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public void GetDepositAccountStatement(long accountNumberId,
        string fromDate, string toDate)
    {
        var frmDate = DatabaseLayer.Core.DateConversion.GetEnglishDate(fromDate).ToDateTime();
        var tDate = DatabaseLayer.Core.DateConversion.GetEnglishDate(toDate).ToDateTime();
        var res = BusinessLayer.Deposit.DepositAccountStatement.GetDepositAccountStatementViews(accountNumberId,
            frmDate, 
       JavaScriptSerializer js = new JavaScriptSerializer();
       Context.Response.Write(js.Serialize(res));            
    }

This WebService returns this Json

[{"TranId":null,"TranDate":"\/Date(1492107300000)\/","ValueDate":"\/Date(1492107300000)\/","StatementReference":"Balance B/d.","Collector":null,"Debit":null,"Credit":17252.08,"Balance":17252.08,"CheckNumber":null},{"TranId":null,"TranDate":null,"ValueDate":null,"StatementReference":"Total","Collector":null,"Debit":0,"Credit":17252.08,"Balance":null,"CheckNumber":null}]

In my case i want to bind the data to the datatable on button click.Js code

 $('#ShowInGridButton').on('click', function () {
            var accountNumberId = $('#DepositAccountNumberIdHiddenField').val();
            var fromDate = $("input[name*='FromDateControl']").val();     
            var toDate = $("input[name*='ToDateControl']").val();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: "/WebMethods/Deposit.asmx/GetDepositAccountStatement",
                data: JSON.stringify({ accountNumberId: accountNumberId, fromDate: fromDate, toDate: toDate }),
                success: function (data) {
                    $('#reportTable').DataTable({
                        data: data,
                        sort: true,
                        searching: true,
                        columns: [
                            { 'data': 'tran_id' },
                            { 'data': 'tran_date' },
                            { 'data': 'value_date' },
                            { 'data':'statement_reference'},
                            { 'data': 'collector' },
                            { 'data': 'debit' },
                            { 'data': 'credit' },
                            { 'data': 'balance' },
                            { 'data': 'check_number' }
                        ]
                    });
                }
            });
        });

And the html

<table id="reportTable" class="display table table-responsive table-hover">  
                <thead>  
                    <tr>  
                        <th>TranId</th>  
                        <th>TranDate</th>  
                        <th>ValueDate</th>  
                        <th>StatementReference</th>  
                        <th>Collector</th>  
                        <th>Debit</th>  
                        <th>Credit</th>  
                        <th>Balance</th>
                        <th>CheckNumber</th>                        
                    </tr>  
                </thead>  
            </table>

On button click i am unable to get the data and bind to the datatable. Help Please.