How do i load data to Datatable?
<p>i have the following <code>ajax</code> call to call action method to get a list of products based on their product Category. </p>

<p><code>'#ddlProductCategoriesList'</code> is a drop down list (Product Category), when the selection changes it should fetch products in that category and assign them to a <code>JQuery</code> <code>Datatable</code>. I was able to destroy the previous data in the jquery table but after destroying it could not initialize it with new data, How do i load jquery <code>datatable</code> with new data?</p>

<p>Note: The Action returned data as json successfully but load data to table failed</p>

<pre><code>    $('#ddlProductCategoriesList').change(function (item) {

        var x = $(this).val();

        $.ajax({
            url: '@Url.Action("GetProductsByCategory","Products")',
            method: 'get',
            cache:false,
            data: { 'cid': x },
            contentType: 'application/json; chatset=utf-8',
            dataType: 'json',
            success: function (data) {                      
                alert('hello');

                table.destroy();

                $('#t1').empty();

                $('#t1').dataTable({
                    data: data,
                    columns: [
                        { 'data': 'item.ID' },
                        { 'data': 'item.CategoryID' },
                        { 'data': 'item.ProductName' },
                        { 'data': 'item.LastName' }

                    ]
                });


            },
            error: function (x, y, z) {
                alert("error")

            }
        });
    }); 
</code></pre>