how to create html table row click a child table

Question

how to create html table row click a child table

jewel 1,206

Untitled

public class tbl_order

{

[Key]

public int orderId { get; set; }

public String orderNumber { get; set; }

public int productID { get; set; }

public int? oredrQty { get; set; }

public Decimal? salerate { get; set; }

public Decimal? value { get; set; }

}

public class ordervm

{

public int orderId { get; set; }

public String orderNumber { get; set; }

public int productID { get; set; }

public int? oredrQty { get; set; }

public Decimal? salerate { get; set; }

public Decimal? value { get; set; }

public Decimal? Totalvalue { get; set; }

}

public JsonResult Getrecord()

{

var List = from a in _context.tbl_Orders

            group a by new { a.orderNumber } into g

            select new ordervm

            {

                orderNumber = g.Key.orderNumber,

                Totalvalue = g.Sum(x => x.value)

            };
```return Json(List);

 }

public JsonResult OrderDetails(String OrderNumber)

 {

var List = _context.tbl_Orders.Where(x=>x.orderNumber== OrderNumber).ToList();   

return Json(List);

 }

<style>

td.details-control {

background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;

cursor: pointer;

}

tr.shown td.details-control {

background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;

}

</style>

<table id="example" class="display jo" style="width:100%">

<thead>

<tr>

<th></th>

<th>Order NO</th>

<th>Total Value</th>

</tr>

</thead>

</table>

@section Scripts {

@{

await Html.RenderPartialAsync("_ValidationScriptsPartial");

}

<script type="text/javascript">

function format(d) {

// `d` is the original data object for the row

return '<table  style="padding-left:50px;">' +

'<tr>' +

'<td>Full name:</td>' +

'<td>' + d.orderNumber + '</td>' +

'</tr>' +

'</table>';

}

$(document).ready(function () {

//call the action method and get the data.

 $.ajax({

 url: "/Home/Getrecord",

type: "Get",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

console.log("succsss" + data);

//after getting the data, bind the DataTable.

var table = $("#example").DataTable({

"data": data,

"columns": [

{

"className": 'details-control',

"orderable": false,

"data": null,

"defaultContent": ''

},

{ "data": "orderNumber" },

{ "data": "totalvalue" },

],

"order": [[0, 'desc']]

});

//Expand/Collapse the nested objects.

$('#example tbody').on('click', 'td.details-control', function () {

var tr = $(this).closest('tr');

var row = table.row(tr);

if (row.child.isShown()) {

// This row is already open - close it

row.child.hide();

tr.removeClass('shown');

}

else {

// Open this row

row.child(format(row.data())).show();

tr.addClass('shown');

}

});

},

error: function (ex) {

console.log(ex);

}

});

});

</script>

}

jewel 1,206 Reputation points

2024-03-23T05:37:54.0766667+00:00

I want something like this - when click on ordernumber of table row a new table will be shown. Where the details of alenter code herel products related to this order number will be shown in the table below. This is not possible using child rows of Jquery datatable? I would appreciate it if someone could help

Accepted answer

1 additional answer

Your answer

jewel 1,206 Reputation points

2024-03-23T05:37:54.0766667+00:00

I want something like this - when click on ordernumber of table row a new table will be shown. Where the details of alenter code herel products related to this order number will be shown in the table below. This is not possible using child rows of Jquery datatable? I would appreciate it if someone could help

Answer 1

Hi @jewel,
Modify your code like below:

Model

public class ordervm
{
    public int orderId { get; set; }
    public String orderNumber { get; set; }
    public Decimal? Totalvalue { get; set; }
    public List<tbl_order> tbl_order { get; set; }  //add this property to store the extra data you want to display
    //other properties
}

View

function format(d) {
    var str = '';
    $.each(d.tbl_order, function (index, data) {
            str+= '<tr>' +
            '<td>' + data.productID + '</td><td>' + data.oredrQty + '</td><td>' + data.salerate + '</td><td>' + data.value + '</td>'+
        '</tr>'
    });
    console.log(str);
    return '<table  style="padding-left:50px;">' +
    '<tr>' +
        '<td>ProductID</td><td>oredrQty</td><td>salerate</td><td>value</td>' +
    '</tr>' +
        str+
    '</table>';
}

Controller

public JsonResult Getrecord()
{
    var List = from a in _context.tbl_Orders
                group a by new { a.orderNumber } into g
    select new ordervm
    {
        orderNumber = g.Key.orderNumber,
        Totalvalue = g.Sum(x => x.value),
        tbl_order = g.Select(t=>new tbl_order { 
            productID=t.productID,
            oredrQty=t.oredrQty,
            salerate=t.salerate,
            value=t.value
        }).ToList()
    };
    return Json(List);
}

Result
User's image

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Rena

Answer 2

hossein jalilian 11,055 Volunteer Moderator

Thanks for posting your question in the Microsoft Q&A forum.

I hope these two articles and the online demo help you.

Row Details

Demo

Please don't forget to close up the thread here by upvoting and accept it as an answer if it is helpful

Share via

how to create html table row click a child table

1 additional answer

Your answer