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.