You must Sign In to post a response.
  • Category: ASP.Net MVC

    Sorting and Paging in MVC

    Hello.
    I have below code to bind table in front end.

    public ActionResult Notification()
    {
    DAL.ClsSelfServiceDAO objSelfService = new DAL.ClsSelfServiceDAO();
    List<MyNotification> objList = new List<Models.MyNotification>();


    objList = objSelfService.GetSelfNotifications(180);
    return View(objList);

    }

    In view,

    <table class="table">
    <tr>
    <th>
    @Html.DisplayNameFor(model => model.NotificationType)
    </th>
    <th>
    @Html.DisplayNameFor(model => model.NextActionTaker)
    </th>
    <th>
    @Html.DisplayNameFor(model => model.Status)
    </th>
    <th>
    @Html.DisplayNameFor(model => model.CreatedDate)
    </th>
    @*<th>
    @Html.DisplayNameFor(model => model.HardCodeModuleId)
    </th>
    <th>
    @Html.DisplayNameFor(model => model.OtherInfo)
    </th>*@
    <th></th>
    </tr>

    @foreach (var item in Model)
    {
    <tr>
    <td>
    @Html.DisplayFor(modelItem => item.NotificationType)
    </td>
    <td>
    @Html.DisplayFor(modelItem => item.NextActionTaker)
    </td>
    <td>
    @Html.DisplayFor(modelItem => item.Status)
    </td>
    <td>
    @Html.DisplayFor(modelItem => item.CreatedDate)
    </td>
    @*<td>
    @Html.DisplayFor(modelItem => item.HardCodeModuleId)
    </td>
    <td>
    @Html.DisplayFor(modelItem => item.OtherInfo)
    </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>
    }

    </table>

    Here, I want to implement paging and sorting. Can anyone help me on this.
  • #768193
    Hi,

    I suggest you a simple and effective solution.
    Use Bootstrap jquery plugin.
    Download the Bootstrap plugin in github or some where and include in the project.



    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <link rel="stylesheet"
    href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
    <script type="text/javascript"
    src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"
    src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



    Then in Jquery you can easily call the below function.



    <script>
    $(document).ready(function(){
    $('#myTable').dataTable();
    });
    </script>

    Thanks,
    Mani

  • #768201
    Hai Pranjal,
    It will be difficult if you write the code for paging and sorting using the JQuery and JavaScript. Rather you can get the plugin and it will do all for you.
    There are many JQuery plug-ins are available as below:

    http://smashinghub.com/best-jquery-pagination-plugins.htm

    Hope it will be helpful to you.

    Regards,
    Pawan Awasthi(DNS MVM)
    +91 8123489140 (whatsApp), +60 14365 1476(Malaysia)
    pawansoftit@gmail.com


Sign In to post your comments