jQuery Datatables load data from server

Question

im using asp.net mvc, want to load json data from server side. I have that piece of server side code:

Function GetData() As ActionResult

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

            Dim TransactionSearchRowJson = JsonConvert.SerializeObject(TransactionSearchRow1)

            Return Json(TransactionSearchRowJson)

        End Function

Its just send me back json string from a TransactionSearchRow object.

I have that client-side code:

$("#searchBTN").on("click", function () {
                $.ajax({
                    url: '/Transaction/GetData',
                    method: 'POST',
                    dataType: 'json',
                    success: function (data) {
                        $('#TransactionTable').dataTable({
                            data: data,
                            columns: [
                                { 'data': 'status' },
                                { 'data': 'transactinid' },
                                { 'data': 'creditcardnumber' },
                                { 'data': 'supplier' },
                                { 'data': 'createdAt' },
                                { 'data': 'amount' }
                            ]

                        });

                    }
                });
            });

And simple HTML table:

<table id="TransactionTable" class="table table-striped table-bordered table-list">
                    <thead>
                        <tr>
                            <th class="col-md-1">Status</th>
                            <th>TransID</th>
                            <th>CCN</th>
                            <th>Supplier</th>
                            <th>Created Date</th>
                            <th>Amount</th>
                        </tr>
                    </thead>

                    <tbody>

                    </tbody>
                </table>

JSON response:

But i get an error when im click "Search" button.

have you confirmed that data in the success function returns correct? — Rudie Visser
– Rudie Visser, Commented Jul 28, 2017 at 8:22
It seems like no error in your code just ordering error. You need to set columns order according to response. — Alex Mac
– Alex Mac, Commented Jul 28, 2017 at 8:25

fengqingtian · Accepted Answer · 2017-07-28 08:52:07Z

2

I think your response data format is not right. please refrence this example.The ajax response should be a object which has an array property named "data". I'm not familiar with VB,so I give you C# code snippet. change your server side action code like following:

 return Json(new {
        data: new List<TransactionSearchRow>(){TransactionSearchRow1}
    })

answered Jul 28, 2017 at 8:52

fengqingtian

213 bronze badges

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

1 Comment

Ballon Ura Over a year ago

Will try it and back

Collectives™ on Stack Overflow

jQuery Datatables load data from server

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related