首页 > 解决方案 > 每次刷新页面时重新加载数据表

问题描述

我要做的就是在重新加载/刷新页面时刷新我的 DataTable。现在在刷新页面时,它会保留其数据。我的应用程序使用 ASP.Net MVC 技术。这是我的数据表和相关功能:

$(document).ready(function () {


    //debugger;
    var table = $('#user_session_center_grid').DataTable({
        "searching": false,
        "colReorder": true,
        "lengthChange": false,
        "processing": true,
        "serverSide": true,
        "autoWidth": false,
        "ajax": {
            cache: false,
            url: "@Url.Action("GetUserSessionHistory", "LoggedIn")",
            type: 'POST',
            data: function (data) {
                data.SortBy = 'Month';
                data.FromDate = "";
                data.ToDate = "";
                data.userSearch = $('#userSearch').val();
                if (event) {
                    var objDtFilter = event.target;
                    if ($(objDtFilter).hasClass('dtFilter')) {
                        data.FromDate = event.target.getAttribute('fromdt');
                        data.ToDate = event.target.getAttribute('todt');
                    }
                    if ($(objDtFilter).hasClass('dtSort'))
                        data.SortBy = event.target.getAttribute('sort');
                    if ($(objDtFilter).hasClass('UserTypeFilter'))
                        data.value1 = event.target.getAttribute('value');
                    console.log(data.value1);
                }
            },
        },
        "language": {
            oPaginate: {
                sNext: '<i class="fa fa-chevron-right"></i>',
                sPrevious: '<i class="fa fa-chevron-left"></i>',
                sFirst: '<i class="fa fa-chevron-right"></i>',
                sLast: '<i class="fa fa fa-chevron-left"></i>'
            }
        },
        "columns": [
            {
                data: null,
                class: "userName",
                render: function (data, type, row) {
                    return "<div>" + data.FirstName + " " + data.LastName + "</div></td>";
                }
            },

            {
                data: null,
                class: "startDate",
                render: function (data, type, row) {
                    var parsedDate = JSON.parse(JSON.stringify(data.StartTime), ToJavaScriptDate);
                    return "<div>" + parsedDate + "</div></td>";
                }
            },

                //{ 'data': 'User_ID' },
                //{ 'data': 'FirstName' },
                //{ 'data': 'LastName' },
                //{ 'data': 'StartTime' },
        ],
    });

   table.on('draw', function () {
       var widthofPagination = $('.dataTables_paginate.paging_simple_numbers').width() + 25;
       $('#user_session_center_grid_info').css({ width: 'calc(100% - ' + widthofPagination + 'px)' });

   });
    $("#date_filter_ul.dropdown-menu li a").click(function () {
        //debugger;
        $('#date_filter_ul').removeClass('show');
        $(this).closest('#CategoryFilter').find('.csp-select > span').text("Duration:" + $(this).text());
        $('#user_session_center_grid').DataTable().ajax.reload();
    });

    $("#user_session_center_status_ul.dropdown-menu li a").click(function () {
        $('#user_session_center_status_ul').removeClass('open');
        $(this).closest('#StatusFilter').find('.csp-select > span').text($(this).text());
        $('#user_session_center_grid').DataTable().ajax.reload();
    });
});

这是我的控制器功能:

public ActionResult UserSessionCenter()
    {
            if (Session["selectedCustomer"] == null)
            {
                Session["selectedCustomer"] = 9;
            }

            int customerId = (int)Session["selectedCustomer"];
            var model = new UserSessionHistory();
            var daccess = new ApplicationCommon.Ado.SqlDataAccess();
            var customerNamesDt = daccess.GetUserNames(customerId);
            var customerList = new List<UserSessionData>();
            for (var i = 0; i < customerNamesDt.Rows.Count; i++)
            {
                var userinfo = new UserSessionData();
                userinfo.CustomerId = customerNamesDt?.Rows[i]["Customer_Id"].ToString() ?? "";
                userinfo.CustomerName = customerNamesDt?.Rows[i]["Customer_Name"].ToString() ?? "";
                userinfo.UserId = customerNamesDt?.Rows[i]["User_ID"].ToString() ?? "";
                userinfo.UserName = customerNamesDt?.Rows[i]["UserName"].ToString() ?? "";
                customerList.Add(userinfo);
            }
            model.UserInfoList = customerList;
        return View(model);
    }

    [HttpPost]
    [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
    public JsonResult GetUserSessionHistory()
    {
        var draw = Request.Form.GetValues("draw").FirstOrDefault();
        var start = Request.Form.GetValues("start").FirstOrDefault();
        var length = Request.Form.GetValues("length").FirstOrDefault();
        if (Request["value1"] != null)
            Session["userId"] = Request["value1"]; 
        int pageSize = length != null ? Convert.ToInt32(length) : 0;
        try
        {
            var UserID = Convert.ToInt32(Session["userId"]);
            var filterModel = new FilterSessionHistoryModel();
            filterModel.UserID = UserID;
            filterModel.Skip = int.Parse(start);
            filterModel.Take = int.Parse(length);
            var fromDate = Request["FromDate"];
            var toDate = Request["ToDate"];
            filterModel.userSearch = Request["userSearch"];
            if (!string.IsNullOrEmpty(fromDate) && !string.IsNullOrEmpty(toDate))
            {
                filterModel.DateFrom = fromDate;
                filterModel.DateTo = toDate;
            }
            UserService userService = new UserService();
            List<ADM_User_Session_History_Result> SessionList = userService.ADM_User_Session_History(filterModel);
            int? numberOfRecords = 0;
            if(SessionList.Count>0) {
                numberOfRecords=SessionList[0].NumberOfRecords;
            }
            return Json(new { draw = draw, recordsFiltered = (int)numberOfRecords, recordsTotal = (int)numberOfRecords, data = SessionList }, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            CustomLogging.LogMessage(ex.Message + "/r/n" + ex.Source + "/r/n" + ex.StackTrace, LogType.Error);
            return this.GetJSONObject(false, ex.Message.ToString());
        }
    }

层次结构是这样的。1. Admin 用户可以使用任何客户 2. 一个客户可以有多个用户 3. 表格显示了所选用户的登录时间。

问题是管理员可以通过其更改客户的列表位于 _Layout.cshtml 中的顶部导航中,而该数据表位于另一个视图中。更改用户时数据会正常更改,但我需要在更改客户时重新加载或清空数据。

标签: javascriptc#jqueryasp.net-mvcdatatables

解决方案


像'explorer'这样的旧浏览器不断缓存第一次ajax调用的信息,你可以尝试将cash标志设置为false,每次都会更新表格

function ReLoadTable() {
        $.ajax({
            cache: false,
            url: 'Your URL',
            type: 'POST',

在控制器中放置此属性

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public class HomeController : Controller
{

最后在你的 Global.asax 文件中添加这个函数

protected void Application_PreSendRequestHeaders(Object sender, EventArgs e)
    {
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.Cache.SetAllowResponseInBrowserHistory(false);
    }

推荐阅读