实现 jQuery DataTable 时的延迟加载问题

Question

当我尝试为关系 SQL 数据库。

这是我的 HomeController 代码：

using CyberAssets.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CyberAssets.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult loaddata()
        {
            using (CyberAssetsEntities dc = new CyberAssetsEntities())
            {
                var data = dc.CyberAssets.OrderBy(a => a.Id).ToList();
                return Json(new { data = data }, JsonRequestBehavior.AllowGet);
            }
        }
    }
}

这是我的数据表视图的代码：

@section Scripts {
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function () {
        $('#DataTbl').DataTable({
            "ajax": {
                "url": "/Home/loaddata",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "data": "FacilityName", "autowidth": true },
                { "data": "FacilityType", "autowidth": true },
                { "data": "MachineType", "autowidth": true },
                { "data": "MachineFunctionDesc", "autowidth": true },
                { "data": "PhysicalLocation", "autowidth": true }
            ]
        });
    });
</script>
}

如何预加载我需要在 HomeController 中的 loaddata() using 块中引用的对象并基本上“避免”延迟加载？

Answer 1

您需要在 DataTable 初始化代码中添加以下几行：

        "processing": true,
        "serverSide": true,

所以你的 DataTable 代码应该是这样的：

$('#DataTbl').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/Home/loaddata",
            "type": "GET",
            "datatype": "json"
        },
        "columns": [
            { "data": "FacilityName", "autowidth": true },
            { "data": "FacilityType", "autowidth": true },
            { "data": "MachineType", "autowidth": true },
            { "data": "MachineFunctionDesc", "autowidth": true },
            { "data": "PhysicalLocation", "autowidth": true }
        ]
    });