Hi malar,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class CustomerModel
{
public string Country { get; set; }
public string City { get; set; }
public List<Customer> Customers { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
NorthwindEntities entity = new NorthwindEntities();
ViewBag.Country = entity.Customers.Select(x => new SelectListItem() { Text = x.Country.ToString(), Value = x.Country.ToString() }).Distinct();
ViewBag.City = entity.Customers.Select(x => new SelectListItem() { Text = x.City.ToString(), Value = x.City.ToString() }).Distinct();
CustomerModel model = new CustomerModel();
model.Customers = entity.Customers.Take(100).ToList();
return View(model);
}
}
View
@model _795634_Filter_Paging_DropDownList_MVC.Models.CustomerModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
function Filter() {
var ledger = $("#drpSearchLedgerCode option:selected").text();
var source = $("#drpSearchSource option:selected").text();
if (ledger == 'Select Country' && source == 'Select City') {
$('#tblBranPlantMatrixDetails tbody tr').show();
} else {
$('#tblBranPlantMatrixDetails tbody tr:has(td)').each(function () {
var rowledger = $.trim($(this).find('td:eq(2)').text());
var rowsource = $.trim($(this).find('td:eq(3)').text());
if (ledger != 'Select Country' && source != 'Select City') {
if (rowledger == ledger && rowsource == source) {
$(this).show();
} else {
$(this).hide();
}
}
else if (ledger != 'Select Country' && source != 'Select City') {
if (rowledger == ledger && rowsource == source) {
$(this).show();
} else {
$(this).hide();
}
}
else if (ledger != 'Select Country') {
if (rowledger == ledger) {
$(this).show();
} else {
$(this).hide();
}
}
else if (source != 'Select City') {
if (rowsource == source) {
$(this).show();
}
else {
$(this).hide();
}
}
});
}
}
function execute() {
Filter();
pagination();
}
$(document).ready(function () {
var rowsShown = 8;
var rowsTotal = $('#tblBranPlantMatrixDetails tbody tr').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
}
$('#tblBranPlantMatrixDetails tbody tr').hide();
$('#tblBranPlantMatrixDetails tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function () {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#tblBranPlantMatrixDetails tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({ opacity: 1 }, 300);
});
});
function pagination() {
var rowsShown = 8;
var rowsTotal = $('#tblBranPlantMatrixDetails tr:visible').length - 1;
var numPages = rowsTotal / rowsShown;
if (numPages == 0) {
$('#nav').remove();
}
else {
if ($('#nav').length > 0) {
$("#nav a").remove();
}
else {
$('#tblBranPlantMatrixDetails').after('<div id="nav"></div>');
}
}
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
}
$("#tblBranPlantMatrixDetails > tbody > tr:visible").hide().slice(0, rowsShown).animate({ opacity: 1 }, 300).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function () {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
Filter();
$('#tblBranPlantMatrixDetails tbody tr:visible').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({ opacity: 1 }, 300);
});
}
</script>
</head>
<body class="container">
<table class="table table-striped table-bordered table-hover">
<tr>
<td><label>Country:</label></td>
<td><label>City:</label></td>
</tr>
<tr>
<td>@Html.DropDownListFor(a => a.Country, new SelectList(ViewBag.Country, "Value", "Text"), "Select Country", new { @style = "font-size: 12px;", @class = "form-control", @id = "drpSearchLedgerCode" })</td>
<td>@Html.DropDownListFor(a => a.City, new SelectList(ViewBag.City, "Value", "Text"), "Select City", new { @style = "font-size: 12px;", @class = "form-control", @id = "drpSearchSource" })</td>
</tr>
<tr><td></td></tr>
<tr>
<td></td>
<td>
<button type="button" class="btn btn-primary" id="btnSearch" onclick="execute()">Filter</button>
<button type="button" class="btn btn-default" id="btnClear">Clear</button>
</td>
</tr>
</table>
<table class="table table-striped table-bordered table-hover" id="tblBranPlantMatrixDetails">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Country</th>
<th>City</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Customers)
{
<tr style="height:5px;">
<td><span>@item.CustomerID</span></td>
<td><span>@item.ContactName</span></td>
<td><span>@item.Country</span></td>
<td><span>@item.City</span></td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal">EDIT</button>
</td>
</tr>
}
</tbody>
</table>
<div id="nav"></div>
</body>
</html>
Screenshot
