Десериализация JSON в объект JavaScript (с возможностью обработки данных) - PullRequest
Новая
       5

Десериализация JSON в объект JavaScript (с возможностью обработки данных)

0 голосов
/ 30 июня 2019

Я могу получить данные с сервера в форме JSON как консольный браузер может отображать: 

function search() {
            // Get the user's input from the page keep to localStorage
            localStorage.setItem("searchBookingDateFrom", $('#bookFrom').val());
}
        //If user press change limit data goto this loop
        $('#dataTableSearchBook').on('length.dt', function () {
            var info = table.page.info();
            var limit = info.length;
            var offset = info.page;
            search();
            AJ(limit, offset);
        });
//if user change page (next/previous)
        $('#dataTableSearchBook').on('page.dt', function () {
            var info = table.page.info();
            var offset = info.page;
            var limit = info.length;
            search();
            AJ(limit, offset);
        });
//Go to controller and get data from api to JSON Format
    function AJ(limit,offset) {
        var a = localStorage.getItem("searchBookingDateFrom");
        $.ajax({
            url: '@Url.Action("SearchBooking","BookingInfo")',
            data: JSON.stringify({
                limit: limit,
                offset: offset,
                BookingDateFrom:a,
            }),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $('#dataTableSearchBook').DataTable({
                    'data': [
                        {

                            "0": data[0],
                            "1": data[0],
                            "2": data[0],
                            "3": data[0],
                            "4": data[0],
                            "5": data[0],
                            "6": data[0],
                            "7": data[0],
                            "8": data[0],
                            "9": data[0],
                            "10": data[0],
                            "11": data[0],
                            "12": data[0],
                            "13": data[0]
                        }
                    ]
                })
                console.log(data)
            },
            error: function () { console.log('error!!') }
        });

Когда пользователь нажимает предел или смещение, затем вызывать контроллер (контроллер будет получать данные из API) Но я не знаю, как добавить список json в мое табличное представление в качестве слоя представления

1 Ответ

0 голосов
/ 01 июля 2019

Вам просто нужно привязать данные к соответствующему столбцу. Вы можете перейти по этой ссылке, чтобы узнать больше: https://datatables.net/examples/server_side/post.html

Вот образец. Надеюсь на помощь, друг мой :)) 

public class BookingModel
    {
        public int BookingId { get; set; }
        public string BookingRefNo { get; set; }
        public string FullName { get; set; }
        public string MobileNo { get; set; }
        public string Email { get; set; }
    }


[HttpPost]
        public IActionResult GetData()
        {
            List<BookingModel> data = new List<BookingModel>();
            for(int i = 1; i < 10; i++)
            {
                BookingModel obj = new BookingModel
                {
                    BookingId = i,
                    BookingRefNo = $"00{i}",
                    FullName = $"A{i}",
                    MobileNo = $"(00)-{i}",
                    Email = $"abc{i}@gmail.com"
                };
                data.Add(obj);
            }
            return Json(new { success = true, data });
        }

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Booking Id</th>
            <th>Booking RefNo</th>
            <th>FullName</th>
            <th>MobileNo</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

$.post('home/getdata', function (response) {
            $('#example').DataTable({
                processing: true,
                data: response.data,
                columns: [
                    { data: "bookingId" },
                    { data: "bookingRefNo" },
                    { data: "fullName" },
                    { data: "mobileNo" },
                    { data: "email" }
                ]
            });            
        });
...