如何使用 WebMethods 实现数据表？答案

【问题标题】：How can I implement Datatables with WebMethods?如何使用 WebMethods 实现数据表？
【发布时间】：2017-07-31 18:14:42
【问题描述】：

几乎所有在 C# 中使用数据表的示例都是通过服务或 MVC。如何将数据表与 WebMethods 一起使用？

【问题讨论】：

标签： c# jquery datatables

【解决方案1】：

一个简单的例子。 ajax 调用中的 dataSrc 通常会让人绊倒。

前端

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <script src="/js/jquery-2.1.3.min.js"></script>
    <script src="/js/jquery-ui.js"></script>
    <script src='https://cdn.datatables.net/1.10.14/js/jquery.dataTables.min.js' ></script>
    <script src='https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js' ></script>
    <script src='https://cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js' ></script>

        <script>
            $(document).ready(function () {
                $('#exampletable').DataTable({
                    bFilter: false,
                    scrollX: true,
                    dom: "Bfrtip",
                    ajax: {
                        url: '/DataTablesLoad.aspx/LoadData',
                        type: 'POST',
                        contentType: 'application/json;charset=utf-8',
                        dataType: "json",
                        dataSrc: function (data) {
                            var obj = JSON.parse(data.d);
                            return obj.data;
                        }
                    },
                    order: [],
                    columns: [
                        { data: "name" },
                        { data: "age"},
                        { data: "lunch" },
                        { data: "id", visible: false, readonly: true },
                    ],
                    select: {
                        style: 'os',
                        selector: 'td:first-child'
                    },
                    buttons: [
                    ],
                });
            });
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <table id="exampletable" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th style='text-align: center;'>Name</th>
                        <th style='text-align: center;'>Age</th>
                        <th style='text-align: center;'>Lunch</th>
                    </tr>
                </thead>
            </table>
    </div>
    </form>
</body>
</html>

后端

using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class DataTablesLoad : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {}

    [WebMethod]
    public static string LoadData()
    {
        JObject returnObject = new JObject(new JProperty("options", new List<JObject>()),
                      new JProperty("files", new List<JObject>()));

        List<JObject> data = new List<JObject>();

        JObject datum = new JObject(new JProperty("DT_RowId", "row_" + 1),
                new JProperty("name", "Hogarth Fortith"),


        new JProperty("age", 34),
            new JProperty("lunch", "Apple"),
            new JProperty("id", 123));

    data.Add(datum);

    datum = new JObject(new JProperty("DT_RowId", "row_" + 2),
            new JProperty("name", "Keely Kline"),
            new JProperty("age", 23),
            new JProperty("lunch", "Orange"),
            new JProperty("id", 124));

    data.Add(datum);

    datum = new JObject(new JProperty("DT_RowId", "row_" + 3),
            new JProperty("name", "John Owen"),
            new JProperty("age", 54),
            new JProperty("lunch", "Sandwich"),
            new JProperty("id", 125));

    data.Add(datum);

    returnObject.Add(new JProperty("data", data));

    return returnObject.ToString();
    }
}

【讨论】：