zoukankan html css js c++ java

使用Jquery.DataTable将Json绑定到table

首先，新建一个edmx绑定数据库中的表。

JsonController.cs

    public class JsonController : Controller
    {
        // GET: Json
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public JsonResult AjaxMethod()
        {
            TestEntities entities = new TestEntities();
            List<Animal> customers = (from animal in entities.Animals
                                        select animal).ToList();
            return Json(customers);
        }
    }

Index.cshtml

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <div style=" 500px">
        <table id="tblCustomers" cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse">
            <thead>
                <tr>
                    <th>Species</th>
                    <th>Weight</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "/Json/AjaxMethod",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        });
        function OnSuccess(response) {
            $("#tblCustomers").DataTable(
                {
                    bLengthChange: true,
                    lengthMenu: [[5, 10, -1], [5, 10, "All"]],
                    bFilter: true,
                    bSort: true,
                    bPaginate: true,
                    data: response,
                    columns: [
                        { 'data': 'species' },
                        { 'data': 'weight' }
                    ]
                });
        };
    </script>
</body>
</html>

结果演示：

查看全文

相关阅读:
C# MQTT M2MQTT
C# MethodInvoker委托的使用
 linux打包/解压-tar
linux挂载查看、添加与取消
 IE6、火狐不支持a:visited
js和jquery中的触发事件
 MySQL5.7.9免安装版配置方法
 mysql数据库在Navicat Premium连接的时候出现1862错误
 mysql max_allowed_packet查询和修改
 服务器是windows时tomcat无法打印所有日志配置修改

原文地址：https://www.cnblogs.com/jizhiqiliao/p/13274992.html