在 Datatable 中使用 if else 条件？

Question

我是 MVC 应用程序的新手。我无法在 DataTable 中使用 if else 条件。请解决我的问题。

让我解释一下我的担忧。实际上，我在 SQL 中有一个数据库 Table，在 table 中我有一个列名称“STATUS”。现在我在这个 Table 中的记录很少。现在我希望如果 Status=1 那么在 DataTable 中显示删除按钮，或者如果 Status=2 那么删除按钮将不显示。

让我与您分享我的代码。

        $(document).ready(function () {
        dataTable = $("#tableId").DataTable({
            "ajax": {
                "url": "/Home/GetAllPurchaseOrder",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "data": "PurchaseID", "autowidth": true },
                { "data": "SupplierID", "autowidth": true },
                { "data": "SupplierName", "autowidth": true },
                { "data": "Currency", "autowidth": true },
                { "data": "TotalAmount", "autowidth": true },
                { "data": "Date_Of_Purchase", "autowidth": true },
                { "data": "Due_Date", "width": "56px" },
                {
                    "data": "PurchaseID", "width": "50px", "render": function (data) {
                        return '<button class="btn btn-danger DeletePurchase" onclick="Delete(' + data + ')">Delete</button>'
                    }

                },
                {
                    "data": "PurchaseID", "width": "50px", "render": function (data) {
                        return '<button class="btn btn-success ViewPurchase" onclick="Display(' + data + ')">View</button>'
                    }
                }
            ]
        });
    });

让我和你分享我的

最新截图

控制器代码：

        [HttpGet]
    public ActionResult GetAllPurchaseOrder()
    {
        string loginId = Convert.ToString(Session["LoginId"]);
        try
        {
            List<PurchaseOrderViewModel> purchaseDetail = new List<PurchaseOrderViewModel>();
            if (!string.IsNullOrEmpty(loginId))
            {
                string UserRoleName = Convert.ToString(Session["UserTypeName"]);
                if (UserRoleName == RoleTypeConstant.CustomerUserType)
                {
                    purchaseDetail = _websiteRepo.GetAllPurchaseDetailByLoginId(loginId).ToList();
                    var stock = purchaseDetail;
                    return Json(new { data = stock }, JsonRequestBehavior.AllowGet);
                    //return View(stockDetail);
                }
                else
                {
                    return RedirectToAction("Login", "Account");
                }
            }
            else
            {
                return RedirectToAction("Login", "Account");
            }
        }
        catch (Exception)
        {
            throw;
        }
    }

        public IQueryable<PurchaseOrderViewModel> GetAllPurchaseDetailByLoginId(string LoginId)
    {
        var StockList = (from aspuser in context.AspNetUsers
                         join cus in context.Customers on aspuser.Id equals cus.LoginID
                         join purchase in context.PurchaseOrders on aspuser.Id equals purchase.LoginID
                         where purchase.LoginID == LoginId
                         select new PurchaseOrderViewModel
                         {
                             LoginID = purchase.LoginID,
                             PurchaseID = purchase.PurchaseID,
                             SupplierID = purchase.SupplierID,
                             SupplierName = purchase.SupplierName,
                             Currency = purchase.Currency,
                             TotalAmount = purchase.TotalAmount,
                             Date_Of_Purchase = purchase.Date_Of_Purchase,
                             Date_Arrived = purchase.Date_Arrived,
                             Date_Departed = purchase.Date_Departed,
                             Due_Date = purchase.Due_Date,
                             Location = purchase.Location,
                             Notes = purchase.Notes,
                             Status = purchase.Status
                         }).AsQueryable();
        return StockList;
    }

JAVASCRIPT:

    <script>
    var dataTable;
    $(document).ready(function () {
        debugger;
        dataTable = $("#tableId").DataTable({
            "ajax": {
                "url": "/Home/GetAllPurchaseOrder",
                "type": "GET",
                "datatype": "json"
            },
            "columns": [
                { "data": "PurchaseID", "autowidth": true },
                { "data": "SupplierID", "autowidth": true },
                { "data": "SupplierName", "autowidth": true },
                { "data": "Currency", "autowidth": true },
                { "data": "TotalAmount", "autowidth": true },
                { "data": "Date_Of_Purchase", "autowidth": true },
                { "data": "Due_Date", "width": "56px" },
                {
                    "data": "STATUS", "width": "50px", "render": function (data) {
                        return '<button class="btn btn-danger DeletePurchase' + ((data != 1) ? ' invisible' : 'visible') + '" onclick="Delete(' + data + ')">Delete</button>'
                    }

                },
                {
                    "data": "PurchaseID", "width": "50px", "render": function (data) {
                        return '<button class="btn btn-success ViewPurchase" onclick="Display(' + data + ')">View</button>'
                    }
                }
            ]
        });
    });

Answer 1

假设您的 json 是这样的：

{
  "data": [
    {
       "PurchaseID": "11",
       "SupplierID": "11",
       "SupplierName": "SupplierName",
       "Currency": "euro",
       "TotalAmount": "10",
       "Date_Of_Purchase": "01/01/2020",
       "Due_Date": "01/01/2020",
       "STATUS": "1"
    },
    {
       "PurchaseID": "22",
       "SupplierID": "22",
       "SupplierName": "SupplierName22",
       "Currency": "euro",
       "TotalAmount": "20",
       "Date_Of_Purchase": "01/01/2020",
       "Due_Date": "01/01/2020",
       "STATUS": "2"
    }
   ]
}

在这种情况下，更改此行就足够了：

"data": "PurchaseID", "width": "50px", "render": function (data) {
     return '<button class="btn btn-danger DeletePurchase" onclick="Delete(' + data + ')">Delete</button>'
}

至：

"data": "STATUS", "width": "50px", "render": function (data, type, row, meta) {
   return '<button class="btn btn-danger DeletePurchase' + ((data != 1) ? ' invisible' : '') +  '" onclick="Delete(' + row.PurchaseID+ ')">Delete</button>'
}

根据 doc，渲染函数采用四个参数。因此，现在 PurchaseID 包含在 row.PurchaseID

中

片段：

var dataSet = {
    "data": [
        {
            "PurchaseID": "11",
            "SupplierID": "11",
            "SupplierName": "SupplierName",
            "Currency": "euro",
            "TotalAmount": "10",
            "Date_Of_Purchase": "01/01/2020",
            "Due_Date": "01/01/2020",
            "STATUS": "1"
        },
        {
            "PurchaseID": "22",
            "SupplierID": "22",
            "SupplierName": "SupplierName22",
            "Currency": "euro",
            "TotalAmount": "20",
            "Date_Of_Purchase": "01/01/2020",
            "Due_Date": "01/01/2020",
            "STATUS": "2"
        }
    ]
};

dataTable = $("#tableId").DataTable({
     "data": dataSet.data,
    "columns": [
        { "data": "PurchaseID", "autowidth": true },
        { "data": "SupplierID", "autowidth": true },
        { "data": "SupplierName", "autowidth": true },
        { "data": "Currency", "autowidth": true },
        { "data": "TotalAmount", "autowidth": true },
        { "data": "Date_Of_Purchase", "autowidth": true },
        { "data": "Due_Date", "width": "56px" },
        {
            "data": "STATUS", "width": "50px", "render": function (data, type, row, meta) {
            return '<button class="btn btn-danger DeletePurchase' + ((data != 1) ? ' invisible' : '') +  '" onclick="Delete(' + row.PurchaseID + ')">Delete</button>'
        }

        },
        {
            "data": "PurchaseID", "width": "50px", "render": function (data) {
            return '<button class="btn btn-success ViewPurchase" onclick="Display(' + data + ')">View</button>'
        }
        }
    ]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>


<table id="tableId" class="display" style="width:100%">
    <thead>
    <tr>
        <th>PurchaseID</th>
        <th>SupplierID</th>
        <th>SupplierName</th>
        <th>Currency</th>
        <th>TotalAmount</th>
        <th>Date_Of_Purchase</th>
        <th>Due_Date</th>
        <th>Delete</th>
        <th>View</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>PurchaseID</th>
        <th>SupplierID</th>
        <th>SupplierName</th>
        <th>Currency</th>
        <th>TotalAmount</th>
        <th>Date_Of_Purchase</th>
        <th>Due_Date</th>
        <th>Delete</th>
        <th>View</th>
    </tr>
    </tfoot>
</table>

在 Datatable 中使用 if else 条件？

Use if else condition in Datatable?

jquery

asp.net-mvc

datatables

datatables-1.10