0

I'm working on Asp.net mvc application and I have implemented pagination using Bootgrid.

Here goes my cshtml code

@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>

And my controller from where I'm passing data

[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);
    }

After creating this Ican see the data with pagination but having issue with drop down button(Shown in below image) like drop down list is not showing.

Please help me to fix this.

enter image description here

Veswanth
  • 1,061
  • 9
  • 22
  • Append you rows to the `` element - `$("#transmitterInfo tbody").append(tr);` (or give the element an `id`) –  Apr 10 '17 at 09:58
  • Thanks for the quick response.. $("#transmitterInfo tbody").append(tr); is not working.. And I didn't get this "(or give the element an id)" – Veswanth Apr 10 '17 at 10:03
  • It does work :). And for the alternative I meant ` –  Apr 10 '17 at 10:08
  • :( Not working! Got the same result as before – Veswanth Apr 10 '17 at 10:16
  • It was a comment to fix up your code to ensure you were adding the rows correctly, not an answer to your question! –  Apr 10 '17 at 10:28

0 Answers0