jQuery Datatables load data ajax

Question

Want to load data from asp.net 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 
    } 
  ] 
}

Can you please provide it in the JSON format and don't post an image? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jul 30, 2017 at 15:01

MyTwoCents · Accepted Answer · 2017-07-30 15:08:05Z

3

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

answered Jul 30, 2017 at 15:08

MyTwoCents

7,6723 gold badges28 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Datatables load data ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related