How to refresh Datatable using AngularJS mvc c#?

Question

I am create one small demo for show users list.for that show list used datatabel with angularjs. my listing show very well first time.but i want to create custom filter on that tabel.i want to get pass week data and i have return query also in controller and data getting propare but i don't know how to next time bind datatable in angularjs.

here first time bind datatable code:

app.controller('userscontroller', ['$scope', '$http', 'DTOptionsBuilder', 'DTColumnBuilder',
function ($scope, $http, DTOptionsBuilder, DTColumnBuilder) {
    $scope.dtColumns = [
        //DTColumnBuilder.newColumn("id", "User ID"),
        DTColumnBuilder.newColumn("firstname", "First Name"),
        DTColumnBuilder.newColumn("lastname", "Last Name"),
        DTColumnBuilder.newColumn("email", "Email"),      
    ]

    debugger;
    $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
        url: "/api/User/GetUserList",
        type: "GET",
        data: { 'searchRequest': null, fromDate: null, toDate: null },
        contentType: "application/json; charset=utf-8",
    })
    .withPaginationType('full_numbers')
    .withDisplayLength(50); 
}])

this is my controller method:

[HttpGet]
[Route("GetUserList")]
public IHttpActionResult GetUserList(string searchRequest)
{
    var UserList = db.UserInfo.ToList();

    if (searchRequest != null)
    {                
        if (searchRequest == "Past Week")
            UserList = UserList.Where(t => Convert.ToDateTime(t.registrationdate).ToString("MMM dd yyyy") == DateTime.Now.AddDays(-7).ToString("MMM dd yyyy")).ToList();                               
    }

    var Details = UserList.Select(h => new
    {
        h.id,
        h.firstname,
        h.lastname,
        h.registrationdate,
        h.email,
        h.contactnumber
    });
    return Json(Details);
}

this is my code for select past year data:

$scope.GetValue = function (event) {
    var Type = $scope.ddlSearch;           
        $.ajax({
            type: "GET",
            cache: false,
            url: '/api/User/GetUserList',
            data: { searchRequest: Type },
            success: function (response) {

            }
        });

this is my table html :

<table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover"> </table>

i have try this code but i don't know how to reload datatable in anuglarjs.any one know then please help me for this task.

PinBack · Accepted Answer · 2017-03-06 11:59:41Z

1

I would suggest to reassign $scope.dtOptions:

$scope.GetValue = function (event) {
   var Type = $scope.ddlSearch;
   $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
       url: "/api/User/GetUserList",
       type: "GET",
       cache: false,
       data: { 'searchRequest': Type },
       contentType: "application/json; charset=utf-8",
   })
   .withPaginationType('full_numbers')
   .withDisplayLength(50);
};

Update: I have made a simple example (with a MVC Controller)

Controller:

[HttpGet]
[Route("GetList")]
public ActionResult GetList(string psSelect)
{
    List<dynamic> loList = new List<dynamic>();
    if (string.IsNullOrEmpty(psSelect))
    {
        loList.Add(new { id = "1", firstname = "Tyler", lastname = "Durden"         });
    }
    else
    {
        loList.Add(new { id = "2", firstname = "Big", lastname = "Lebowski" });
    }

    return new MyJsonResult(loList);
}

View:

<div data-ng-controller="mainController">
    <input type="button" value="Refresh" data-ng-click="refreshList()" />
    <table id="entry-grid" datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="table table-hover"> </table>
</div>

Javascript:

$scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
    url: "/Home/GetList",
    type: "GET",
    cache: false,
    data: { 'psSelect': '' },
    contentType: "application/json; charset=utf-8",
})
.withPaginationType('full_numbers')
.withDisplayLength(50);

$scope.refreshList = function () {
    $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
        url: "/Home/GetList",
        type: "GET",
        cache: false,
        data: { 'psSelect': 'refresh' },
        contentType: "application/json; charset=utf-8",
    })
.withPaginationType('full_numbers')
.withDisplayLength(50);
};

edited Mar 6, 2017 at 11:59

answered Mar 6, 2017 at 10:34

PinBack

2,58415 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

coderwill Over a year ago

i am try like this but that time call not getting in my controller so any idea about this wave?

coderwill Over a year ago

hi pinBack any idea about this issue then please let me know.

coderwill Over a year ago

can you please edited your answer what you want to say in details?

coderwill Over a year ago

but still issue is getting i can't able see call from api side any other wave for that bind and refresh data in table.

Collectives™ on Stack Overflow

How to refresh Datatable using AngularJS mvc c#?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related