Dear Reader, we are going to see the use of jquery
datatables for Searching, Sorting and Paging for the data. DataTables is a
plug-in for the jQuery Javascript
library. It is a highly flexible tool.
I am going to use my previous example in which we were
getting data from database according to the input dates. For better understanding
of this article, please go through that article. The Link is –
So, First of all we will have to install this
DataTables plugin. You can use NuGet
Package Manager for this or you can use web site : https://datatables.net
After installing the plug-in, you can see the folder of Name
- DataTables inside 'Content' and 'Scripts' folder of your MVC application. If you don’t want install
whole plugin, get these two files and add to your mvc application-
(1) jquery.dataTables.min.css and (2) jquery.dataTables.min.js.
Show your data in table according to the following manner-
<table>
<thead>
- ---- Header column data
</thead>
<tbody>
------- Main column data
</tbody>
</table>
See the following View for better understanding. And made
required changes.
@model MVC18042016.Models.SearchDataByDateModel
@{
Layout
= null;
}
<title>Search Data By Date</title>
@using (Html.BeginForm("SearchDataByDate", "Home", FormMethod.Post))
{
<div>
Please Select Dates :
Start Date @Html.TextBox("datefrom", Model.datefrom,
null,
new
{ @Value = "", @class = "datepicker", @id = "txtDateFrom" })
End Date @Html.TextBox("todate", Model.todate, null,
new
{ @Value = "", @class = "datepicker", @id = "txtToDate" })
<input type="submit" name="submit" id="btnsubmit" value="Get Report" />
<br /><br
/>
</div>
<div style="width:50%">
@if(Model.orderdata != null)
{
<table id="example" class="display" cellspacing="0"
width="100%">
<thead>
<tr>
<th> </th>
<th>Order
ID </th>
<th>Order
Item</th>
<th>Order
Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th> </th>
<th>Order
ID </th>
<th>Order
Item</th>
<th>Order
Date</th>
</tr>
</tfoot>
<tbody>
@foreach (var item in Model.orderdata)
{
<tr>
<td><input type="checkbox" name="deletedata" id="chk" value=@item.id /></td>
<td>@Html.DisplayFor(modelItem => item.id)</td>
<td>@Html.DisplayFor(modelItem => item.itemname)</td>
<td>@Html.DisplayFor(modelItem => item.orderdate)</td>
</tr>
}
</tbody>
</table>
}
</div>
<p>@Html.ActionLink("Export This Data","ExportData")</p>
}
<!-- DataTables CSS -->
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<!-- jQuery -->
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8">
$(document).ready(function () {
$('#example').DataTable();
});
</script>
Note: I have
added script and style at the last of the code so that data can be loaded fast.
Although it is not necessary, you can add it on the top. The display will be
the same.
You have to pass only id of the table in the script and all
data will be managed automatically.
Snap shots:
After filing date and click on ‘Get Report’ button, you will get data in following manner-
Point: You can click on the images to see their large view.
Now you can search, sort
columns. Automatic paging etc.
We can customize this DataTable control also. Such as-
(1) If
we want to hide search box we can use bFilter: false
in DataTable constructor.
(2) If
we want to hide Page information which is showing at left bottom, we can use bInfo: false.
(3) If
we want give our own number of records, we can use "pageLength": 50.
Complete code:
$('#example').DataTable({
bFilter: false, bInfo: false, "pageLength": 50 });
Note: It is not necessary to use all of them
together. You can use as per need to them.
Build and run the project.
Happy Coding.
Rudra Pratap Singh
Software Engineer
singhrudrapratap29[at]gmail[dot]com
No comments:
Post a Comment