Want to load data from asp mvp server side. Have that jQuery Ajax function:

$("#SearchBtn").on("click", function () {

                $.ajax({
                    url: '/Transaction/GetData',
                    success: function (dataReturend) {
                        $("#TransactionTable").DataTable({
                            ajax: '/Transaction/GetData',
                            data: dataReturend,
                            columns: [
                            { data: 'status' },
                            { data: 'transactionId' },
                            { data: 'creditCardNumber' },
                            { data: 'supplier' },
                            { data: 'createdAt' },
                            { data: 'amount' }
                            ]
                        });
                    }
                });
            });

And server side that returned me 1 row of data:

Function GetData() As ActionResult

            Dim TransactionSearchRow1 = New TransactionSearchRow With {
            .status = Status.Cancelled,
            .transactionId = "12345",
            .creditCardNumber = "1234324324",
            .supplier = "Office Depot",
            .createdAt = New DateTime(2008, 12, 28),
            .amount = 500
            }


            Dim anon = New With {.data = New List(Of TransactionSearchRow) From {TransactionSearchRow1}}
            Dim jsonData As String = JsonConvert.SerializeObject(anon, Formatting.Indented)

            Return Json(jsonData)

        End Function

But nothing is happen when im click the btn.

The server side returned data is look like this:

JSON format:

{ 
"data": [
 { 
 "status": 2,
 "transactionId": 12345, 
 "creditCardNumber": "1234324324",
 "supplier": "Office Depot", 
 "createdAt": "2008-12-28T00:00:00",
 "amount": 500.0 
    } 
  ] 
}

Want to load data from asp mvp server side. Have that jQuery Ajax function:

$("#SearchBtn").on("click", function () {

                $.ajax({
                    url: '/Transaction/GetData',
                    success: function (dataReturend) {
                        $("#TransactionTable").DataTable({
                            ajax: '/Transaction/GetData',
                            data: dataReturend,
                            columns: [
                            { data: 'status' },
                            { data: 'transactionId' },
                            { data: 'creditCardNumber' },
                            { data: 'supplier' },
                            { data: 'createdAt' },
                            { data: 'amount' }
                            ]
                        });
                    }
                });
            });

And server side that returned me 1 row of data:

Function GetData() As ActionResult

            Dim TransactionSearchRow1 = New TransactionSearchRow With {
            .status = Status.Cancelled,
            .transactionId = "12345",
            .creditCardNumber = "1234324324",
            .supplier = "Office Depot",
            .createdAt = New DateTime(2008, 12, 28),
            .amount = 500
            }


            Dim anon = New With {.data = New List(Of TransactionSearchRow) From {TransactionSearchRow1}}
            Dim jsonData As String = JsonConvert.SerializeObject(anon, Formatting.Indented)

            Return Json(jsonData)

        End Function

But nothing is happen when im click the btn.

The server side returned data is look like this:

JSON format:

{ 
"data": [
 { 
 "status": 2,
 "transactionId": 12345, 
 "creditCardNumber": "1234324324",
 "supplier": "Office Depot", 
 "createdAt": "2008-12-28T00:00:00",
 "amount": 500.0 
    } 
  ] 
}

• javascript
• jquery
• asp
• ajax

• Can you show what your response JSON looks like – MyTwoCents Commented Jul 30, 2017 at 15:01
• yes sry added it now – Ballon Ura Commented Jul 30, 2017 at 15:01
• 1 Can you please provide it in the JSON format and don't post an image? – Praveen Kumar Purushothaman Commented Jul 30, 2017 at 15:01
• yes sry added it now – Ballon Ura Commented Jul 30, 2017 at 15:03

1 Answer 1

Code written in your click event fires 2 times that not needed. Code should be something like this

$("#SearchBtn").on("click", function () {

    $("#TransactionTable").DataTable({
        ajax: '/Transaction/GetData',
        columns: [
        { data: 'status' },
        { data: 'transactionId' },
        { data: 'creditCardNumber' },
        { data: 'supplier' },
        { data: 'createdAt' },
        { data: 'amount' }
        ]
    });
});

For more ref Datatable