簡體   English   中英

在Asp.Net API服務端處理中實現datatable js

[英]implement datatable js in Asp.Net API server side processing

我正在使用 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>

如果有很多行,則應使用服務器端處理

嘗試這個 :

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM