asp.net-mvc - 下拉切换在分页中不起作用

Question

我正在开发 Asp.net mvc 应用程序，并且我已经使用Bootgrid实现了分页。

这是我的cshtml代码

@model RssiWebTool.Models.ChargerModel

 @section Scripts{
    <script src="@Url.Content("~/Scripts/clientConfiguration.js")"></script>
}

<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="~/Scripts/jquery.bootgrid.js"></script>

<script>
        $(document).ready(function () {

            $.getJSON("Home/ChargeDetails",
            function (json) {
                var tr;
                //Append each row to html table
                for (var i = 0; i < json.length; i++) {
                        tr = $("<tr/>");
                        tr.append("<td>" + json[i].ConfigurationName + "</td>");
                        tr.append("<td>" + json[i].ConfigurationType + "</td>");
                        tr.append("<td>" + json[i].Description + "</td>");
                        $("#transmitterInfo").append(tr);
                }
                $("#transmitterInfo").bootgrid({});
                $('.pagination').parent().addClass('paginationDiv');
            });
        });
</script>
<table id="transmitterInfo" class="bootgrid-table table-bordered table-hover table">
    <thead>
        <tr>
            <th>Configuration Name</th>
            <th>Type</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

以及我从中传递数据的控制器

[HttpGet]
   public JsonResult ChargeDetails()
    {
        //Creating List      
        List<ChargerModel> ObjEmp = new List<ChargerModel>();
        for ( int i= 0; i < 100; ++i )
        {
            ChargerModel model = new ChargerModel();
            model.ConfigurationName = i.ToString();
            model.ConfigurationType = (2*i).ToString();
            model.Description = "sample"+ i ;
            ObjEmp.Add(model);
        }                      

        //return Json      
        return Json(ObjEmp, JsonRequestBehavior.AllowGet);
    }

创建这个后，我可以看到带有分页的数据，但是下拉按钮（如下图所示）有问题，比如下拉列表没有显示。

请帮我解决这个问题。