Question

我为show users list.for创建了一个小型演示，该显示列表使用了带有angularjs的datatabel。我的列表第一次显示得非常好。但我想在该tabel上创建自定义过滤器。我希望获得传递周数据，我也在控制器和数据中获得返回查询，但我不知道下次如何在angularjs中绑定数据表。

这里是第一次绑定数据表代码：

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); 
}])

这是我的控制器方法：

[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);
}

这是我选择去年数据的代码：

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

            }
        });

这是我的表格html：

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

我试过这段代码，但我不知道如何在anuglarjs中重新加载数据表。那么请知道，请帮我完成这项任务。

Answer 1

我建议重新分配$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);
};

更新：我做了一个简单的例子（使用MVC控制器）

控制器：

[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);
}

查看：

<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);
};

如何使用angularjs mvc c＃刷新datatabel？

1 个答案: