Htykuut

I have defined a function formatPrice in accountJS file, which I want to call while binding jquery datatable in a partial view. Along with that I want to pass the @item.price value to this function.

Below is the code:

@model List<Products>



<table id="datatableResult" class="searchgrid">

<thead>

<tr>

    <th>Id</th>

</tr>

<tr>

    <th>Product Price</th>

</tr>

</thead>

<tbody>

@if (Model != null)

{

     foreach (var item in Model)

    {

      <tr>

         <td>@item.Id</td>

         <td>accountJS.formatPrice(@item.price)</td>

      </tr>

    }

 }

</tbody>

</table>

As far as I had seen, accountJS.formatPrice(@item.price) is not a valid function call because it was called outside the <script> block, and rendered as plain text. Therefore, the table element must be set as follows:

@if (Model != null)

{

    foreach (var item in Model)

    {

      <tr>

         <td>@item.Id</td>

         <td>@item.price</td>

      </tr>

    }

}

Then, in DataTable function you can use column index from row parameter inside render setting to get the price and pass it to external JS function:

<script>

$(function () {

    $('#datatableResult').DataTable({

        // other settings



        columnDefs": [{ 

           "targets": 1, 

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

               // pass the column index here

               return accountJS.formatPrice(row[1]); 

           } 

        }]



        // other settings

    });

});

<script>

Reference:

DataTable - Column rendering

Related issue:

Jquery Datatables How to get column Id in render function