I am trying to create a table and apply sorting & searching for that fields. Finally, I found that using jquery datatable it is easy to create a table and apply sorting, search functionality to that. I have tried like this.
<script>
$(document).ready(function() {
$('#example').dataTable( {
"dom": '<"top"i>rt<"bottom"flp><"clear">'
} );
} );
</script>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Address)
</th>
<th>
@Html.DisplayNameFor(model => model.MobileNo)
</th>
<th>Options</th>
</tr>
</thead>
@foreach (var item in Model)
{
<tbody>
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Address)
</td>
<td>
@Html.DisplayFor(modelItem => item.MobileNo)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
@Html.ActionLink("Details", "Details", new { id = item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
</tbody>
}
</table>
But searching , pagination & sorting is not working. When I use normal html code it is working fine. But when I get data from database it is not working.
Aucun commentaire:
Enregistrer un commentaire