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>

    结果演示:

  • 相关阅读:
    Calendar
    Eclipse常用快捷键
    switch case知识点
    Java中基本数据类型和包装类
    SpringMVC初始化参数绑定--日期格式
    spring mvc4使用及json 日期转换解决方案
    Java下利用Jackson进行JSON解析和序列化
    jsp页面中某个src,如某个iframe的src,应该填写什么?可以是html、jsp、servlet、action吗?是如何加载的?
    jdbc入门
    存储过程和触发器
  • 原文地址:https://www.cnblogs.com/jizhiqiliao/p/13274992.html
Copyright © 2011-2022 走看看