使用AJAX(ASP.NET、MVC)加载jQuery数据表 [英] jQuery DataTable loading using ajax (asp.net,mvc)

问题描述

我正在尝试使用web.api加载数据表

我的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; }
}

推荐答案

请按照以下步骤操作

1. 安装NeGet包"jquery.datatables"我使用的是1.10.12版

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({
        processing: true,
        serverSide: false,
        ordering: true,
        paging: true,
        searching: true,
        columns: [
           { title: "Id" },
           { title: "Name" },
           { title: "Age" },
           { title: "DateofBirth" },
           { title: "View Data" }
        ],
        columns: [
          { data: "Id" },
          { data: "Name" },
          { data: "Age" },
          { data: "DateofBirth" },
          {
              data: null,
              defaultContent: "<button class='tblview'>View Id</button><button class='tblDelete'>Delete</button>"
          }
        ],
        ajax: {
            "url": "api/Your/ApiUrl",
            "type": "GET",
            "dataSrc": ''
        },
        "columnDefs": [
            {
                "targets": 0,
                "visible": false
            }
            ] 
    });
});

这篇关于使用AJAX(ASP.NET、MVC)加载jQuery数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！