How to generate a child DataTable by making Ajax call with Hypertext Link (href)

CuroDeveloper

I have successfully generated a jQuery DataTable using the data from the database for my ASP.NET application. Now, I would like to be able to generate a 2nd table with the details information by clicking on a hypertext link of a Product Key. I do not want to use a table within table "Child Row" method. In other words, I would like to select a row from the parent table and a child table is displayed with details information.

How do you make an ajax call?

<script type="text/javascript">
    //jQuery DataTable
    var dataSet = <%=JsonLoanProductsData %>

        $('#dtLoanProductsByLocation').DataTable({
            keys: true,
            scrollY: 550,
            scrollCollapse: true,
            lengthMenu: [[50, 75, 100, -1], [50, 75, 100, "All"]],
            data: dataSet,
            columnDefs: [
                { "width": "15%", "targets": [0] },
                { "width": "20%", "targets": [2,3] }

            ],
            columns: [
                {
                    "className": 'dt-center',
                   "data": "LoanProductKey"  
                },
                { "data": "ProductName" },
                { "data": "ProductTypeEnum" },
                { "data": "LoanTypeEnum" },
                {
                    "className": 'dt-center',
                    "data": "ProductType",
                    "visible": false
                },
                {
                    "className": 'dt-center',
                    "data": "LoanType",
                    "visible": false
                }
            ]
        });

</script>

kthorngren

Sounds like you want the functionality discussed in this blog:
https://datatables.net/blog/2016-03-25

Kevin

CuroDeveloper

Kevin,

Thank you for replying. I believe your example is very close to what I want. In my application, after you select a row in the parent table, I make an Ajax call to a web method with the row Product Key. The web method returns a set of data based on the selected key. The retrieved data then will be used to populate the child table.

My issue is that I don't know how to handle the retrieved data and the syntax to treat it as the child's table data source. In other words, how do I populate the child table with the retrieved data?

CuroDeveloper

I am close to having it working but I cannot get around the "Uncaught TypeError: $(...).dataTable is not a function on line 115 of the script below (var configHTML = $(htmlDataTable).dataTable)

   <script type="text/javascript">

        $('#dtLoanProductsByLocation').DataTable({
            keys: true,
            scrollY: 550,
            scrollCollapse: true,
            lengthMenu: [[50, 75, 100, -1], [50, 75, 100, "All"]],
            data: <%=JsonLoanProductsData %>,
            columnDefs: [
                { "width": "15%", "targets": [0] },
                { "width": "20%", "targets": [2, 3] }

            ],
            columns: [
                {
                    "className": 'details-control',
                    "orderable": false,
                    "visible": true,
                    "data": null,
                    "defaultContent": '',
                    "render": function () {
                        return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                    }
                },
                {
                    "className": 'dt-center',
                    "data": "LoanProductKey"
                },
                { "data": "ProductName" },
                { "data": "ProductTypeEnum" },
                { "data": "LoanTypeEnum" },
                {
                    "className": 'dt-center',
                    "data": "ProductType",
                    "visible": true
                },
                {
                    "className": 'dt-center',
                    "data": "LoanType",
                    "visible": true
                }
            ]
        });

        //declare #dtLoanProductsByLocation DataTable as dtLoanProducts
        var dtLoanProducts = $('#dtLoanProductsByLocation');
        var dtLoanConfig = $('#dtLoanProductConfig');

        //$(document).ready(function () {

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


            var tr = $(this).closest('tr');
            var tdi = tr.find("i.fa");
            var row = dtLoanProducts.DataTable().row(tr);


            //toggle row selection highlight
            if (tr.hasClass('active')) {
                tr.removeClass('active');
            }
            else {
                $('tr.active').removeClass('active');
                tr.addClass('active');
            }



            //Expand and Collapse
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
                tdi.first().removeClass('fa-minus-square');
                tdi.first().addClass('fa-plus-square');

            }
            else {

                //use this if not using the expand and collapse technique to capture row data
                //var selectedRowData = dtLoanProducts.DataTable().row(this).data();

                //capturing the selected row data
                var selectedRowData = row.data();
                var productEnvironment = '<%= SelectedEnvironment %>';
                    var productLocation = <%= SelectedLocation %>;
                    var productKey = selectedRowData.LoanProductKey;

                    //setup parameters for server side web method
                    var params = JSON.stringify({ selectedEnvironment: productEnvironment, selectedLocation: productLocation, loanProductKey: productKey });
                    var pageUrl = '<%= ResolveUrl("LoanProductConfig.aspx/GetLoanProductConfig") %>';
                    var htmlDataTable = '';

                    $.ajax({
                        type: 'POST',
                        url: pageUrl,
                        data: params,
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function (result) {

                            var configData = jQuery.parseJSON(result.d);
                            htmlDataTable = '' +
                                '  <table id="dtLoanProductConfig">' +
                                '       <thead>' +
                                '           <tr>' +
                                '               <th>Config Name</th>' +
                                '               <th>Config Value</th>' +
                                '           </tr> ' +
                                '       </thead> ' +
                                '   </table> ';

 
                         var configHTML = $(htmlDataTable).dataTable({

                               "data": configData,
                                "paging": false,
                                "ordering": true,
                                "info": true,
                                "columns": [
                                    { "data": "0" },
                                    { "data": "1" }
                                ],
                                "order": [[0, "asc"]]
                            });

                            //display loan product configuration
                            row.child(formatHTML($(configHTML).html())).show();
                            tr.addClass('shown');
                            tdi.first().removeClass('fa-plus-square');
                            tdi.first().addClass('fa-minus-square');

                        } //success

                    }); //ajax

                } // end if row.child


        }); //tbody


        //}); //document ready


        /***********************************************************************************
         * Function: formatHTML
         ***********************************************************************************/
        function formatHTML(d) {
            var x = '';
            x += ' <div id="divLoanProductConfig" class="div-center-padding"> ';
            x += d
            x += ' </div>';

            return x;
        };


    </script>