Question

我是Mvc Jquery数据表服务器端操作的新手，我有一个问题就是使用jQuery数据表来查看列表，即在我的表中我有6列，第6列有多个@Html按钮，它基于第5列价值

例如：如果第5列的值为＆＃34;注册＆＃34;然后我必须显示编辑，删除，批准按钮等，如果它＆＃34; Deactive＆＃34;然后我必须显示编辑，删除，无效按钮，

如果我禁用服务器端功能它的工作就像一个魅力，但当我创建一个ajax处理程序方法并以json格式发送请求显示空字符串时，我知道我必须在列中编写第6列的函数＆＃34;数据＆＃34;但我不知道如何处理它

index.html

<table id="TblUsersAccounts" class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Group</th>
            <th>FullName</th>
            <th>Email</th>
            <th>Role</th>
            <th>AccountStatus</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr id="@item.Id" onclick="rowFunction(this)">
                <td>@item.Id</td>
                <td>@item.Group</td>
                <td>@item.FullName</td>
                <td>@item.Email</td>
                <td>@item.Role</td>
                <td id="@item.AccountStatus" class="AcntStatus">@item.AccountStatus</td>
                <td>
                    <a href="/ManageUserAccount/EditUserAccount"><span class="btn btn-sm btn-primary">Edit</span></a>
                    @if (item.AccountStatus.Trim() == string.Empty)
                    {
                        <a href="#"><span class="btn btn-sm btn-primary">Resend</span></a>
                        @Ajax.ActionLink("Delete", "DeleteUser", new { id = item.Id }, new AjaxOptions() { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, OnBegin = "DeleteCalls(this)", UpdateTargetId = "modalGenericContent", OnComplete = "OpenModal(this)" }, new { id = "deleteUser", @class = "btn btn-sm btn-primary", @text = "Delete User Accounts", name = item.Id })
                    }
                    else if (item.AccountStatus.Trim() == "Registered")
                    {
                        <a href="#"><span class="btn btn-sm btn-primary">Deactivate</span></a>

                    }
                    else if (item.AccountStatus.Trim() == "None")
                    {
                        <a href="#"><span class="btn btn-sm btn-primary">Resend</span></a>
                        @Ajax.ActionLink("Delete", "DeleteUser", new { id = item.Id }, new AjaxOptions() { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, OnBegin = "DeleteCalls(this)", UpdateTargetId = "modalGenericContent", OnComplete = "OpenModal(this)" }, new { id = "deleteUser", @class = "btn btn-sm btn-primary", @text = "Delete User Accounts", name = item.Id })
                    }
                    else if (item.AccountStatus.Trim() == "Deactivated")
                    {
                        <a href="#"><span class="btn btn-sm btn-primary">Re Activate</span></a>

                    }

                </td>

            </tr>
        }
    </tbody>

Index.js

$(document).ready(function () {

       var cells = $('td.AcntStatus');
       var table = $('#TblUsersAccounts').DataTable({

           "serverSide": true,
           "ajax": {
               "type": "POST",
               "url": '/ManageUserAccount/DataHandler',
               "contentType": 'application/json; charset=utf-8',
               'data': function (data) { return data = JSON.stringify(data); }
           },

           paging: true,
           ordering: true,
           info: false,
           searching: true,
           bLengthChange: false,
           "processing": true,
           //"paging": true,
           "deferRender": true,
           "columns": [
          { "data": "Id" },
          { "data": "FullName" },
          { "data": "Group" },
          { "data": "Email" },
          { "data": "Role" },
          { "data": "AccountStatus" },


           {
               //"class": 'details-control',
               "orderable": false,
               "data": "Action",
               "defaultcontent": "<button>Click!</button>", // I have to render the buttons for Action
               "searchable": false
               // added this to disable search on first column
           }

           ],
           "order": [0, "asc"]

       });

截图：

enter image description here

AccountsController.cs

   public ActionResult Index()
    {
        List<UserAccountViewModel> userAccountLst = GetList();
        return View(userAccountLst);// return }
    }

    public List<UserAccountViewModel> GetList()
    {
         UserAccountViewModel useraccountviewmodel = new UserAccountViewModel();
        List<UserAccountViewModel> userAccountLst = new List<UserAccountViewModel>();
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC1", FirstName = "Principal1", LastName = "Admin", Email = "admin@quad1.in", Group = "GroupA", Role = "Administrator", AccountStatus = "None" });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC2", FirstName = "Principal2", LastName = "Admin", Email = "Student@quad2.in", Group = "GroupB", Role = "Student", AccountStatus = "Deactivated" });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC3", FirstName = "Principal3", LastName = "Admin", Email = "admin@quad3.in", Group = "GroupC", Role = "Administrator", AccountStatus = "Registered" });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC4", FirstName = "Principal4", LastName = "Admin", Email = "admin@quad4.in", Group = "GroupD", Role = "Administrator", AccountStatus = string.Empty });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC5", FirstName = "Principal5", LastName = "Admin", Email = "Student@quad5.in", Group = "GroupE", Role = "Student", AccountStatus = string.Empty });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC6", FirstName = "Principal6", LastName = "Admin", Email = "Advisor@quad6.in", Group = "GroupF", Role = "Advisor", AccountStatus = "None" });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC7", FirstName = "Principal7", LastName = "Admin", Email = "Student@quad7.in", Group = "GroupA", Role = "Student", AccountStatus = "Deactivated" });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC8", FirstName = "Principal8", LastName = "Admin", Email = "admin@quad8.in", Group = "GroupA", Role = "Administrator", AccountStatus = "Registered" });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC9", FirstName = "Principal9", LastName = "Admin", Email = "admin@quad9.in", Group = "GroupC", Role = "Administrator", AccountStatus = string.Empty });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC10", FirstName = "Principal10", LastName = "Admin", Email = "Student@quad10.in", Group = "GroupA", Role = "Student", AccountStatus = string.Empty });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC11", FirstName = "Principal11", LastName = "Admin", Email = "admin@quad11.in", Group = "GroupF", Role = "Administrator", AccountStatus = "None" });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC12", FirstName = "Principal12", LastName = "Admin", Email = "Advisor@quad12.in", Group = "GroupA", Role = "Advisor", AccountStatus = "Deactivated" });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC13", FirstName = "Principal13", LastName = "Admin", Email = "admin@quad13.in", Group = "GroupE", Role = "Administrator", AccountStatus = "Registered" });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC14", FirstName = "Principal14", LastName = "Admin", Email = "Advisor@quad14.in", Group = "GroupD", Role = "Advisor", AccountStatus = string.Empty });
        userAccountLst.Add(new UserAccountViewModel { Id = "OSDC15", FirstName = "Principal15", LastName = "Admin", Email = "admin@quad15.in", Group = "GroupB", Role = "Administrator", AccountStatus = string.Empty });
        useraccountviewmodel.UserAccountlst = userAccountLst;
        return userAccountLst;

    } 


  public JsonResult DataHandler(DTParameters param)
    {
        try
        {
            List<UserAccountViewModel> dtsource;

                dtsource =GetList().ToList();


            List<String> columnSearch = new List<string>();

            foreach (var col in param.Columns)
            {
                columnSearch.Add(col.Search.Value);
            }

            List<UserAccountViewModel> data = new ResultSet().GetResult(param.Search.Value, param.SortOrder, param.Start, param.Length, dtsource, columnSearch);
            int count = new ResultSet().Count(param.Search.Value, dtsource, columnSearch);
            DTResult<UserAccountViewModel> result = new DTResult<UserAccountViewModel>
            {
                draw = param.Draw,
                data = data,
                recordsFiltered = count,
                recordsTotal = count
            };
            return Json(result);
        }
        catch (Exception ex)
        {
            return Json(new { error = ex.Message });
        }
    }

请帮助我解决这个问题，我尝试了所有可能性，但我失败了。:)

Answer 1

在fnRowCallback回调上添加按钮。在下面的代码中添加数据表选项。（数据表版本1.10）

JS

 "fnRowCallback": function(nRow, aData, iDisplayIndex) {
   var oSettings = (this.fnSettings) ? this.fnSettings() : this; 
   //  nrow refers the row that is rendered 
   //  aData contains the row data in array
   if(aData[4]=='some value 1')
   $("td:last", nRow).html('button-1 here')
   else if(aData[4]=='some value 2')
   $("td:last", nRow).html('button-2 here')
   return nRow;
 },

MVC中的服务器端列呈现问题

1 个答案: