在 Asp.Net API 服务器端处理中实现 datatable js答案

【问题标题】：implement datatable js in Asp.Net API server side processing在 Asp.Net API 服务器端处理中实现 datatable js
【发布时间】：2019-11-26 18:04:06
【问题描述】：

我正在使用 datatable.js，我在视图中有表格，API 返回 JSON 结果。我有很多行，我想按每一页绑定它们。数据表有什么方法可以为我做吗？我阅读了很多文档，但没有发现任何对 API 有用的东西

API 控制器

 public IHttpActionResult Get(int id)
    {
     return Ok(_context.Students.OrderBy(c => c.id).Skip((id - 1) * 10).Take(10).ToList());

    }

这是我的表配置

    <script>$(document).ready(function () {
var pageindex = 1;

var table = $("#staff").DataTable({
                "processing": true,
                "serverSide": true,
    ajax: {
        url: "/Api/staffs",
        dataSrc: "",
        data: {
            id: pageindex,
           },
            },
            columns: [
                {
                    data: "stf_FirstName",
                },
                {
                    data: "stf_LastName",
                },
                {
                    data: "stf_Code",

                }
            ]
});

table.on('page', function () {
    Currentpagenum();
});
function Currentpagenum() {
    var info = table.page.info();
    pageindex = (info.page + 1);
}
    });</script>

【问题讨论】：

标签： c# jquery asp.net-mvc api datatable

【解决方案1】：

如果行数多于服务器端处理，则应使用

试试这个：

HTML：

<table id="tblGrid" class="table display nowrap" style="width:100%">            
</table>

JS :

function SetGrid() {
    $('#tblGrid').DataTable({
        "proccessing": true,
        "serverSide": true,
        // server side
        "ajax": {
            url: "/api/YourController/Method",
            type: 'POST',
            "data": {
                Param1: Value1
            }
        },
        // if client side
        //data: YourList,   // Js Array     
        columns: [
            { data: 'Id' },                
            { data: 'Name', title: "Name" },
            ...
            ...
            { title: "Actions"},
        ],
        "columnDefs": [
            { targets: 0, visible: false,},                
        ],        
        "ordering": false,
        "lengthChange": false,
        "pageLength": 10,
        "bDestroy": true,
        "oLanguage": {
            "sEmptyTable": "No Record Found"
        },        
    });

}

示例 C#：

public object YourMethod(Param1 Value1)
{
    var start = int.Parse(HttpContext.Current.Request.Form["start"]);

    var result = new {
        draw = HttpContext.Current.Request.Form["draw"],
        recordsTotal = YourList.Count,
        recordsFiltered = YourList.Count,
        data = YourList.Skip(start).Take(10).ToList()
    };

    return result;   
}

【讨论】：