Server Side Paging sorting , search using class

Question

User-797751191 posted

Hi

  I have below code . How Server Side Paging sorting , search using class can be implemented

$(document).ready(function () {

    loadData();

});



function loadData() {
    $.ajax({
        url: "/Home/List",
        type: "GET",
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (result) {
            var html = '';
            $.each(result, function (key, item) {
                html += '<tr>';
                html += '<td>' + item.UserName +  '</td>';
                html += '<td>' + item.Password +  '</td>';
                html += '<td>' + item.FirstName + '</td>';
                html += '<td>' + item.LastName + '</td>';
                //html += '<td><a href="#" onclick="return getbyName(\'' + item.UserName + '\')">Edit</a> | <a href="#" onclick="Delete(\'' + item.UserName + '\')">Delete</a></td>';
                html += '<td> <a href="#" class="btn btn-success btn-sm" id="btnEdit" onclick="return getbyName(\'' + item.UserName + '\');"><i class="glyphicon glyphicon-pencil"></i></a>  <a href="#" class="btn btn-danger btn-sm" id="btnDelete" onclick="Delete(\'' + item.UserName + '\');"><i class="glyphicon glyphicon-trash"></i></a></td>';
                //html += '<td> <a href="#" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-edit"></span>  onclick="return getbyName(\'' + item.UserName + '\')" </a> | <a href="#" onclick="return getbyName(\'' + item.UserName + '\')" </a></td>';
                html += '</tr>';
            });
            $('.tbody').html(html);
        },
        error: function (errormessage) {
            alert(errormessage.responseText);
        }
    });
}


 public class HomeController : Controller
    {
        UserDb usrDB = new UserDb();
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult List()
        {
            return Json(usrDB.GetAllUser(), JsonRequestBehavior.AllowGet);
        }
        public JsonResult AddUser(User Usr)
        {
            return Json(usrDB.AddUser(Usr), JsonRequestBehavior.AllowGet);
        }
        public JsonResult GetbyName(string UsrName)
        {   
            var UserName = usrDB.GetAllUser().Find(x => x.UserName.Equals(UsrName));
            return Json(UserName, JsonRequestBehavior.AllowGet);
        }
        public JsonResult UpdateUser(User Usr)
        {
            return Json(usrDB.UpdateUser(Usr), JsonRequestBehavior.AllowGet);
        }
        public JsonResult DeleteUser(string UsrName)
        {
            return Json(usrDB.DeleteUser(UsrName), JsonRequestBehavior.AllowGet);
        }
    } 

Thanks

Answer 1

User-17257777 posted

Hi jsshivalik,

Paging, sorting and searching are integrated in Datatable. I think you can just use datatable to implement them. I have made a test.

<table id="mytable">
    <thead>
        <tr>
            <th>UserName</th>
            <th>Password</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Operation</th>
        </tr>
    </thead>
    <tbody class="tbody"></tbody>
</table>



@section scripts{
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            loadData();
        });

        function loadData() {
            $.ajax({
                url: "/Home/List",
                type: "GET",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var html = '';
                    $.each(result, function (key, item) {
                        html += '<tr>';
                        html += '<td>' + item.UserName + '</td >';
                        html += '<td>' + item.Password + '</td>';
                        html += '<td>' + item.FirstName + '</td>';
                        html += '<td>' + item.LastName + '</td>';
                        html += '<td><a href="#" class="btn btn-success btn-sm" id="btnEdit" onclick="return getbyName(\'' + item.UserName + '\');"><i class="glyphicon glyphicon-pencil"></i></a> <a href="#" class="btn btn-danger btn-sm" id="btnDelete" onclick="Delete(\'' + item.UserName + '\');"><i class="glyphicon glyphicon-trash"></i></a></td > ';
                        html += '</tr>';
                    });
                    $('.tbody').html(html);
                    $("#mytable").dataTable({
                        lengthMenu: [3, 5, 10],
                        
                    });
                },
                error: function (errormessage) {
                    alert(errormessage.responseText);
                }
            });
        }
    </script>
}

Result:

Best Regards,

Jiadong Meng

Answer 2

User-797751191 posted

Hi Jiadongm

  It is giving error - Datatables warning table id=tbluser Cannot reinitialize DataTable. Secondly there are 4 records it is showing all records on 1 screen though in Show DropDown 3 is selected.

Thanks

Answer 3

User-17257777 posted

Hi jsshivalik,

From the error message, It seems you have initialised the datatable somewhere else, refer to this link: https://datatables.net/manual/tech-notes/3

And if it is possible, could you show us the html table?

Best Regards,

Jiadong Meng