使用 ajax (asp.net,mvc) 加载 jQuery DataTable

Question

我正在尝试使用 web.api 加载 DataTable

我的 HTML 代码如下

    <button id="refresh">Refresh</button>
    <button id="AddRow">Add New Row</button>
    <table id="stdTable" class="table table-bordered table-striped" width="100%">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Age</th>
                <th>Date of birth</th>
                <th>Edit/View</th>
            </tr>
        </thead>
    </table>

我的模态如下

public class StudentModel {
    [Key]
    public int Id { get; set; }
    public String Name { get; set; }
    public int Age { get; set; }
    public DateTime DateofBirth { get; set; }
}

Answer 1

请按以下步骤操作

1. 安装我正在使用 v 1.10.12 的 NeGet 包“jquery.datatables”

2. 如下添加 Web API 控制器和添加方法

 [HttpGet]
    public IHttpActionResult LoadStudents() {
        using (AppDbContext db = new AppDbContext()) {
            var s = db.Studets.ToList(); 
            var json = JsonConvert.SerializeObject(s);         
            string yourJson = json;
            var response = this.Request.CreateResponse(HttpStatusCode.OK);
            response.Content = new StringContent( yourJson, Encoding.UTF8, "application/json");
            return ResponseMessage(response);
        }
    }

jQuery 脚本如下

 $(document).ready(function () {
    $('#stdTable').DataTable({
        处理：真，
        服务器端：假，
        订购：真实，
        分页：真，
        搜索：真实，
        列： [
           {标题：“身份证”}，
           {标题：“名称”}，
           {标题：“年龄”}，
           {标题：“出生日期”}，
           {标题：“查看数据”}
        ],
        列： [
          {数据：“ID”}，
          {数据：“名称”}，
          {数据：“年龄”}，
          {数据：“出生日期”}，
          {
              数据：空，
              defaultContent: "View Id删除"
          }
        ],
        阿贾克斯：{
            "url": "api/你的/ApiUrl",
            “类型”：“获取”，
            “数据源”：''
        },
        “列定义”：[
            {
                “目标”：0，
                “可见”：假
            }
            ]
    });
});