Question

我可以从服务器以JSON形式获取数据为console Browser can show:

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插入到显示为视图层的表中

Answer 1

您只需要将数据绑定到相关列即可。您可以访问此链接以引用更多信息：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" }
                ]
            });            
        });

将JSON反序列化为JavaScript对象（数据表）

1 个答案: