Question

我在网站上有一个数据表表，我希望用户能够进行交互。该表基本上是一个待办事项列表，我想知道如何添加一个“完成”列表。按钮到每一行。我看到有row.delete（），但我想仍然将任务保存在数据库中，只需将其从用户看到的表中删除即可。

以下是我实现该表的代码：

<script type="text/javascript">
  $(document).ready(function(){
      // declare variable for dataTable
      var table = $('#example').DataTable({
        // order table by most recent first
        "order": [[ 2, "desc" ]],

        // disable pagination
        "bPaginate": false,

        // define url for ajax requests
        "ajax": '/main/newtask/',

        // define columns, tells ajax.reload() how to read data
        "columns": [
          { "data": "priority" },
          { "data": "task" },
          { "data": "time" }

          // I would like to add the 'Done' button here

        ]
      });

      // every ten seconds, update table
      setInterval(function(){
        table.ajax.reload();
      }, 10000)
  });
</script>

Answer 1

这很有效。帖子很长，只需挑选出你需要的东西：

查看：

@model IEnumerable<Testy20161006.Models.EmployeeList>
@using Testy20161006.Models
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index2001</title>
    <style type="text/css">
        /*https://stackoverflow.com/questions/45113480/embedding-actions-in-a-datatables-table*/
        .button {
            font: bold 11px Arial;
            text-decoration: none;
            background-color: #EEEEEE;
            color: #333333;
            padding: 2px 6px 2px 6px;
            border-top: 1px solid #CCCCCC;
            border-right: 1px solid #333333;
            border-bottom: 1px solid #333333;
            border-left: 1px solid #CCCCCC;
        }
    </style>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#EmployeeTable").DataTable({
                "order": [[1, "desc"]],
                "pagingType": "full",
                "deferRender": true,
                "columns": [
                {
                    "data": "EmployeeID", "render": function (data, type, row) {
                        return '<a class="btn btn-primary button" href="/Home/EmployeeWorkDetails/' + data + '">click</a>'
                    }, "autoWidth": true,
                },
                { "data": "EmployeeID", "autoWidth": true, },
                { "data": "EmployeeName", "autoWidth": true, visible: true }
                ]
            });
        })
    </script>
</head>
<body>
    <div>
        <table id="EmployeeTable" class="display table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Select</th>
                    <th>EmployeeID</th>
                    <th>EmployeeName</th>
            </thead>
            <tbody>
                @foreach (EmployeeList emp in Model)
                {
                    <tr>
                        <td>@emp.EmployeeID</td>
                        <td>@emp.EmployeeID</td>
                        <td>@emp.EmployeeName</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</body>
</html>

控制器：

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult EmployeeWorkDetails(int id)
    {
        return View("Index2001");
    }

    public ActionResult Index2001()
    {
        IList<EmployeeList> empList;
        using (BreazEntities24 entity = new BreazEntities24())
        {
            empList = entity.EmployeeLists.ToList();
        }
        return View(empList);
    }

SQL：

USE [Breaz]
GO
/****** Object:  Table [dbo].[EmployeeList]    Script Date: 7/15/2017 11:58:23 AM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[EmployeeList](
    [EmployeeID] [int] IDENTITY(1,1) NOT NULL,
    [EmployeeName] [varchar](10) NULL,
 CONSTRAINT [PK_EmployeeList] PRIMARY KEY CLUSTERED 
(
    [EmployeeID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF
GO
SET IDENTITY_INSERT [dbo].[EmployeeList] ON 

INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (1, N'a')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (2, N'b')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (3, N'c')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (4, N'd')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (5, N'e')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (6, N'f')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (7, N'g')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (8, N'h')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (9, N'i')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (10, N'j')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (11, N'k')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (12, N'l')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (13, N'm')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (14, N'n')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (15, N'o')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (16, N'p')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (17, N'q')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (18, N'r')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (19, N's')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (20, N't')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (21, N'u')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (22, N'v')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (23, N'w')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (24, N'x')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (25, N'y')
INSERT [dbo].[EmployeeList] ([EmployeeID], [EmployeeName]) VALUES (26, N'z')
SET IDENTITY_INSERT [dbo].[EmployeeList] OFF

在DataTables表中嵌入操作

1 个答案: