multiple parameters at render function

user_13288655 0
Viewed 842

I have a table that the last column is an update button.

Button will only be visible if status of the order is "Accepted". Button will send the id param in the url.

So at this line "render": function (data) the data should contain both the id and the orderStatus.

i tried a few things but nothing worked,

Thank you.

Here is the entire script:

<script>
 $(document).ready(function () {
  $('#tblData').DataTable({
             "ajax": {
                      "url": "OrderAdmin/GetList",
                      "type": "POST",
                      "datatype": "json"
                    },
                    "columns": [
                        { "data": "id", "name": "Id" },
                        { "data": "orderStatus", "name": "OrderStatus" },
                        { "data": "productName", "name": "ProductName" },
                        { "data": "stringDate", "name": "StringDate" },
                        { "data": "userName", "name": "UserName" },
                        { "data": "storeName", "name": "StoreName" },
                        { "data": "quantity", "name": "Quantity" },
                        { "data": "cost", "name": "Cost" },
                        { "data": "fullAddress", "name": "FullAddress" },
                        { "data": "trackingNumber", "name": "TrackingNumber" },
                        {
                            "data": "orderStatus", 
                            "render": function (data) {//How to pass orderStatus and id here
                                return `
                        <div class="text-center">
                            <a href="/Admin/OrderAdmin/UpdateOrder/${data}" class="btn btn-success text- 
                                white" style="cursor:pointer">
                                <i class="fas fa-edit"></i>
                            </a>
                        </div>
                         `;
                            }, "width": "5%"
                        }
                    ],
                    "serverSide": "true",
                    "order": [0, "desc"], 
                    "processing":"true"
                });
            });</script>

Solution :

{
                            "data": {
                                "orderStatus": "orderStatus",
                                "id": "id"
                            },
                            "render": function (data) {
                                    if (data.orderStatus == 'Accepted') {
                                        window.alert('in if');return `
                        <div class="text-center">
                            <a href="/Admin/OrderAdmin/UpdateOrder/${data}" class="btn btn-success text-white" style="cursor:pointer">
                                <i class="fas fa-edit"></i>
                            </a>
                        </div>
                         `}
                                    else { window.alert('in if2'); return `<div></div>` }
                            }, "width": "5%"
                        }
asp.net-core asp.net-mvc ajax javascript
1 Answers

How to pass orderStatus and id here

In doc about data renderer in DataTables, we can find that the function could be passed in three parameters.

enter image description here

To achieve the requirement, you can try the following code snippet.

{
    "data": "orderStatus",
    "render": function (data, type, row) {

        //get id of current row
        var id = row.id;
        console.log(id);

        //modify the href attribute with id value based on actual requirement

        return `
        <div class="text-center">
            <a href="/Admin/OrderAdmin/UpdateOrder/${data}" class="btn btn-success text- 
                white" style="cursor:pointer">
                <i class="fas fa-edit"></i>
            </a>
        </div>
            `;
    }, "width": "5%"
}
user_67516340
Related