Использовать условие if else в Datatable?

Question

Я новичок в приложении MVC. Я не могу использовать условие if else в DataTable. Пожалуйста, разрешите мне проблему.

Позвольте мне объяснить вам мою озабоченность. На самом деле у меня есть таблица базы данных в SQL, в этой таблице у меня есть одно имя столбца «STATUS». Теперь у меня мало записей в этой таблице. Теперь я хочу, чтобы, если Status = 1, то на кнопке Delete DataTable отображается или если Status = 2, то кнопка Delete не отображается.

Позвольте мне поделиться с вами своим кодом.

        $(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>'
                    }
                }
            ]
        });
    });

Позвольте мне поделиться с вами моим

latest screenshot Delete '}}, {"data": "PurchaseID", "width": "50px", "render": function (data) { return ' View '}}]}); });

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>'
}

Функция рендеринга принимает четыре аргумента согласно do c. Следовательно, теперь PurchaseID содержится в строке .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>