在MVC中从sDom格式重新加载数据表

本文关键字：加载 数据表 新加载 MVC 中从 sDom 格式 | 更新日期: 2023-09-27 18:13:11

我们有一个项目(具体来说是SmartAdmin模板)，我们试图在用户的某些操作表的部分视图中重新加载数据。我只是不知道如何处理我们开始的设置。

数据表初始化代码- 

function setupInProgressTable(tabletSize, phoneSize) {
    /* Data Tables */
    var responsiveHelper_in_progress = undefined;
    var breakpointDefinition = {
        tablet: Number(tabletSize),
        phone: Number(phoneSize)
    };
    /* In Progress */
    $('#in_progress').dataTable({
        "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-6 hidden-xs'C>r>" +
            "t" +
            "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
        "autoWidth": true,
        "preDrawCallback": function () {
            // Initialize the responsive datatables helper once.
            if (!responsiveHelper_in_progress) {
                responsiveHelper_in_progress = new ResponsiveDatatablesHelper($('#in_progress'), breakpointDefinition);
            }
        },
        "rowCallback": function (nRow) {
            responsiveHelper_in_progress.createExpandIcon(nRow);
        },
        "drawCallback": function (oSettings) {
            responsiveHelper_in_progress.respond();
        },
        "order": [[2, "asc"]]
    });
}

MVC控制器动作，它建立数据并将其发送到局部

// GET: Tier2/InProgressTable
/// <summary>
/// Gets data to supply to the In Progress Table on draw
/// </summary>
/// <returns>ActionResult - _InProgressTable Partial View</returns>
[Authorize(Roles = "Tier2.Issues.Edit.All")]
public ActionResult InProgressTable()
{
    var results = _api.Tier2.Issues.GetTier2Issue(resolved: false);
    List<Tier2IssuesViewModel> viewModel = new List<Tier2IssuesViewModel>();
    if (results.message == null)
    {
        // Get the corresponding issues for this table
        var statuses = new int[] { 2, 4 };
        var issues = results.data.Where(i => statuses.Contains(int.Parse(i.IssueStatus.id.ToString())));
        // Set items for the view model
        foreach (var item in issues)
        {
            var theIssueStatusList = GetIssueStatusList(); // Build up data for IssueStatusList
            Tier2IssuesViewModel theModel = new Tier2IssuesViewModel();
            theModel.Issue = item;
            theModel.IssueStatusList = theIssueStatusList;
            if (theModel.Issue.IssueStatus != null)
                theModel.IssueStatusList.Where(m => m.Value == theModel.Issue.IssueStatus.id.ToString()).First().Selected = true;
            viewModel.Add(theModel);
        }
        return PartialView("_InProgressTable", viewModel);
    }
    else
    {
        ModelState.AddModelError("", results.message);
    }
    return PartialView("");
}

你知道我该怎么做吗?

在MVC中从sDom格式重新加载数据表

简单地说，就是改变填充数据表的方式。您可以使用数据表API来使用Ajax填充数据，而不是在ViewModel中传递数据。

一个简单的例子:

Controller方法可以简化为不处理任何数据:

public ActionResult InProgressTable()
{
    return View();
}

你的视图只需要一个空表:

<table id="in_progress">
      <thead>
          <tr>
              <th>Id</th>
              <th>Name</th>
          </tr>
      </thead>
    <tbody></tbody>
</table>

你需要一个新的Controller方法来返回json格式的数据:

public ActionResult PopulateInProgressTable()
{
   var results = _api.Tier2.Issues.GetTier2Issue;
   // read into object array 
   var result = from r in results
                select new object[]
                {
                     r.Id,
                     r.Title
                }; 
    // Get the sEcho param  
    var _sEcho = request.QueryString["sEcho"];
    // return data to datatable
    return Json(new
    {
        _sEcho,
        iTotalRecords = result.Count(),
        iTotalDisplayRecords = result.Count(),
        aaData = result
    }, JsonRequestBehavior.AllowGet);
}

这里有几件事需要注意- datatable需要以特定格式的json数据，因此创建一个json对象，并使用上述示例中命名的属性。sEcho是请求中发送的一个参数，您只是原样返回它。iTotalRecords和iTotalDisplayRecords用于分页，aaData为实际数据。

最后在javascript中初始化数据表:

var oTable = $('#in_progress').DataTable({
        'serverSide': true,
        "ajax": {
            "url": [your url] + '/PopulateInProgressTable'
        },
        'processing': true,
        'columns': [
            {
              'data': 0
            },
            {
               'data': 1
            }
       });

这需要在分部视图创建后运行，否则当数据表初始化代码运行时，表将不存在。

如前所述，这是一个非常简单的示例，但它应该足以让您开始。

您需要在您的局部视图代码中设置初始配置。数据需要在单独的端点调用中应用。

定义初始UI

return PartialView();

返回数据到你的网格

return Json(Something.GetData(),JsonBehavior.AllowGet);

要设置PartialView的初始状态并初始绑定数据，您应该绑定页面加载事件，这通常在PartialView中定义的jquery.load()函数中完成。当部分加载时，请确保调用控制器方法将数据返回到网格。您可能还想在网格数据函数中添加一个参数来指示用户的意图。但是，您可以通过将网格绑定到返回json有效负载的客户端ajax函数的结果来加载和重新加载网格。

success(data) { bindGrid(data); }
相关文章：