How do I split out DataTable() initialization from updating the ajax()

RefractedPaladin

I have the below code for setting up a Master - Detail scenario. This code works, in so far as showing the correct data and properly linking between the two tables. However, I know I have done it wrong because of the destroy:true. How do I set this up correctly?

<script>
    $( document ).ready( function ()
    {
        var navID = '<%=CustomerNo %>';

        $( '#PriceListGrid' ).DataTable( {
            "ajax": {
                "url": "api/NAVPriceList" + "/" + navID,
                "dataSrc": ""
            },
            "columns": [
                {
                    "data": "ID"
                },
                {
                    "data": "Description"
                },
                {
                    "data": "CustomerNo"
                },
                {
                    "data": "CustomerName"
                },
                {
                    "data": "Status"
                },
                {
                    "data": "CreatedBy"
                },
                {
                    "data": "ApprovedBy"
                }
            ]
        } );


        $( '#PriceListGrid tbody' ).on( 'click', 'tr', function ()
        {
            var id = $( 'td', this ).eq( 0 ).text();

            $( '#PriceLineGrid' ).DataTable( {
                "destroy": true,
                "ajax": {
                    "url": "api/NAVPriceLine" + '/' + id,
                    "dataSrc": ""
                },
                "columns": [
                    {
                        "data": "ID"
                    },
                    {
                        "data": "PriceListId"
                    },
                    {
                        "data": "Description"
                    },
                    {
                        "data": "LastCost"
                    },
                    {
                        "data": "SubGroup"
                    },
                    {
                        "data": "MfgName"
                    },
                    {
                        "data": "Comment"
                    }
                ]
            } );

        } );
    } )
</script>

allan

You are replacing the old table with a new completely different one, yes? In which case destroying the old table probably is the correct thing to do.

Allan

RefractedPaladin

No, it's the same one. I am simply refreshing the data source based of the new row clicked in the 1st table. What I have sort of works but it creates duplicate "Sort Arrows" in the 2nd grids columns every time a new row is clicked in the 1st grid.

RefractedPaladin

I have reworked it to the below. The issue now is the dataSrc Where would I set it now? If I put it in the initialization I get an incorrect JSon exception on Load. If I put it in the OnClick(), like below, I don't get anything in my child grid at all.

<script>
    $( document ).ready( function ()
    {
        var navID = '<%=CustomerNo %>';

        $( '#PriceListGrid' ).DataTable( {
            "ajax": {
                "url": "api/NAVPriceList" + "/" + navID,
                "dataSrc": ""
            },
            "columns": [
                {
                    "data": "ID"
                },
                {
                    "data": "Description"
                },
                {
                    "data": "CustomerNo"
                },
                {
                    "data": "CustomerName"
                },
                {
                    "data": "Status"
                },
                {
                    "data": "CreatedBy"
                },
                {
                    "data": "ApprovedBy"
                }
            ]
        } );

        $( '#PriceLineGrid' ).DataTable( {
            "columns": [
                {
                    "data": "ID"
                },
                {
                    "data": "PriceListId"
                },
                {
                    "data": "Description"
                },
                {
                    "data": "LastCost"
                },
                {
                    "data": "SubGroup"
                },
                {
                    "data": "MfgName"
                },
                {
                    "data": "Comment"
                }
            ]
        } );

        $( '#PriceListGrid tbody' ).on( 'click', 'tr', function ()
        {
            var id = $( 'td', this ).eq( 0 ).text();
            var table = $( '#PriceLineGrid' ).DataTable();

            table.ajax.dataSrc( "" );
            table.ajax.url( "api/NAVPriceLine" + '/' + id ).load();

        } );
    } )
</script>

allan

I am simply refreshing the data source based of the new row clicked in the 1st table.

My statement was based on the fact that the data source for the columns is changing. However, if you just want to change the data in the table then ajax.url().load() is the correct way to do it.

If that isn't working please link to the page so we can debug and help.

Allan

RefractedPaladin

My solution was to move the dataSrc and url options back into the initialization and add a method to my API that returns an empty Json Object.