how to bind datatable dynamically in jquery in .net mvc
<p>I am using jquery <code>DataTable()</code> method, and it's working fine on page load; but I want to change the data of table on dropdown index change. For this, I am using <code>$.getJason()</code> to get data from controller on dropdown index changing.</p>

<p><strong>Here is my Dropdown :</strong></p>

<pre><code>    @{
    List&lt;SelectListItem&gt; Countries = new List&lt;SelectListItem&gt;();
    foreach (System.Data.DataRow obj in (ViewData["countries"] as System.Data.DataTable).Rows)
    {
Countries.Add(new SelectListItem { Text = obj[1].ToString(), Value = obj[0].ToString() });
    }
}
     @Html.DropDownList("country", Countries, new { @class = "form-control" })
</code></pre>

<p><strong>My table is :</strong></p>

<pre><code>&lt;table id="cityList" class="table table-hover nowrap"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;td&gt;City&lt;/td&gt;
&lt;td&gt;Action&lt;/td&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody id="tblCityBody"&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p><strong>My Jason Method is :</strong></p>

<pre><code>$(document).ready(function () {
        $("#country").change(function () {
            url = '@Url.Action("FetchCities", "Setup")';
            var id = $(this).val();
            $.getJSON(url, { countryId: id }, function (response) {
                $.each(response, function (index, item) {
                    var html = "&lt;tr&gt;&lt;td&gt;" + item.city + "&lt;/td&gt;";
                    html += "&lt;td&gt;&lt;a href=\"#\" onclick=\"Delete(" + item.Id + ")\"&gt;&lt;i class=\"ui-tooltip fa fa-trash\" style=\"font-size: 22px;\"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
                    $("#cityList tr:last").after(html);
                });

            });

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

<p><strong>in this code I am using a delete button; that's why I have added   <code>&lt;a&gt;&lt;/a&gt;</code> tag in the table</strong></p>

<p><strong>My Method to get Cities List To Table is :</strong></p>

<pre><code>public JsonResult FetchCities(int countryId)
        {
            FastTrekContext context = new FastTrekContext();
            List&lt;FastTrek.Models.CityModel&gt; cities = new List&lt;Models.CityModel&gt;();
            DatabaseDealer dbd = new DatabaseDealer();
            dbd.command = new SqlCommand("SELECT top 1000 [Id],[city],[country_id] FROM [dbo].[cities] where [country_id]=" + countryId, con);
            DataTable dt = dbd.selectDataCommand();
            foreach (DataRow dr in dt.Rows)
            {
                FastTrek.Models.CityModel c = new FastTrek.Models.CityModel();
                c.Id = Convert.ToInt64(dr["id"]);
                c.city = dr["city"].ToString();
                cities.Add(c);
            }
            return Json(cities, JsonRequestBehavior.AllowGet);
        }
</code></pre>

<p>Its all working fine.... But jquery DataTable functions are not working in the generated table (change page index of table, search textbox and page item size dropdown)</p>

<p><strong>I have also changed the code to bind data to table to this :</strong></p>

<pre><code>$("#country").change(function () {
            url = '@Url.Action("FetchCities", "Setup")';
            var id = $(this).val();
            $.getJSON(url, { countryId: id }, function (response) {
                $.each(response, function (index, item) {
                    var html = "&lt;tr&gt;&lt;td&gt;" + item.city + "&lt;/td&gt;";
                    html += "&lt;td&gt;&lt;a href=\"#\" onclick=\"Delete(" + item.Id + ")\"&gt;&lt;i class=\"ui-tooltip fa fa-trash\" style=\"font-size: 22px;\"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
                    $("#cityList tr:last").after(html);
                });
                $('#cityList').DataTable({
                    responsive: true
                });
            });

        });
</code></pre>

<p>but it always returns error on every time I change the index of country dropdown.</p>

<p><strong>My question is, Is there any method to bind <code>&lt;table&gt;&lt;table&gt;</code> dynamically in jquery if we have json datatype?</strong></p>