用 Json 数组 MVC 4 填充 jquery 数据表

Question

我有一个带有 jquery 数据表的视图，我想在一个按钮上立即使用另一个 Json 列表或他从控制器收到的任何数组重新填充表中的数据。

这是我认为的代码：

$.ajax({
    type: "GET",
    url: "EmpTruck/getJson/",
    data: { search: station },
    dataType: "Json",
    error: function (xhr, status, error) {
        alert(error);
    },
    success: function (json) {

        alert(json.aaData);
        var table = $(".dynamicTableEmployee").dataTable();
        table.fnClearTable();
        table.LoadDataRow(json);
    }
});

这是来自控制器的代码：

        [AcceptVerbs(HttpVerbs.Get)]
    public JsonResult getJson()
{

    List<Employees> list = new List<Employees>();
    list = db.Employees.Where(c => c.Station.Equals("ATL")).ToList();


    return this.Json(list, JsonRequestBehavior.AllowGet);

}

此代码仅清除数据表。 我已经设置了一个断点，看看Json数组中是否有东西。

我不知道如何从 json 数组中填充数据表，我需要序列化它吗？ json需要和datatable一样大吗？

谢谢

Answer 1

如果您只是想重新加载数据，可以使用 fnReloadAjax() API 插件：http://datatables.net/plug-ins#api_fnReloadAjax

如果您想彻底改变表格，例如更改列等...我只需核对旧表格并将其替换为新表格。只需将代码粘贴到您的脚本中（在初始化表格之前！），然后每当您想重新加载数据时，请在表格对象上调用 fnReloadAjax()。

这个例子可能会有所帮助：http://datatables.net/examples/example_plugin_api.html

---

（来自http://www.datatables.net/forums/discussion/52/load-new-data-via-ajax/p1）

Answer 2

  <link href="@Url.Content("~/Content/Table.css")" rel="stylesheet"    type="text/css" />
  @section scripts
  {
    <script src="@Url.Content("~/Scripts/ datatable.js")"   type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/test.js")" type="text/javascript">  </script>
  }
   <div id="tabs-SecDeal" style=" background-color: white">
    <table id="secdeal" class="display">
        <thead>
            <tr>
                <th style="background-color: #990033">col1</th>
                <th style="background-color: #990033"> col2</th>
                <th style="background-color: #990033"> col3 </th>
                <th style="background-color: #990033"> col4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="4" class="dataTables_empty"></td>
            </tr>
        </tbody>
    </table>
  </div>

$(function () {
         Loadtestview();
    function Loadtestview () {
        var divSecTable = $('#secdeal');
            oSecTable = divSecTable.dataTable({
                "processing": true,
                "serverSide": true,
                "aaSorting": [1, 'asc'],
                "info": true,//localtable.bInfo,
                "autoWidth": false,//localtable.AutoWidth,            
                "scrollY": 700,
                "scrollX": "150%",
                "scrollCollapse": true,
                'destroy': true,
                "pagingType": "full_numbers",
                'lengthChange': false,
                "searching": false,
                'sAjaxSource': '../ReportsMvc/GetSecuritizationDeal',
                "iDisplayLength": 100,
                "columns": [
{ "targets": 0,"data":"col1","title":"col1", "className": "center textNoWrap" },
{ "targets": 1,"data":"col2","title":"col2", "className": "center textNoWrap" },
{ "targets": 2,"data":"col3","title":"col3", "className": "center textNoWrap" },
{ "targets": 3,"data":"col4","title":"col4", "className": "center textNoWrap" },
                ],

                'fnServerData': function (sSource, aoData, fnCallback) {       
                      aoData.push({ "name": "rgid", "value": $("#ddlBatchdate").val() });
                    $.get(sSource, aoData, function (rsp) {
                        fnCallback(rsp);
                    });
                },
                "fnInitComplete": function () {
                    new $.fn.dataTable.FixedColumns(oSecTable, { leftColumns: 4 });       
                }
            });
    }
});

    [HttpGet]
    public JsonResult GetSecuritizationDeal(jQueryDataTableParamModel param)
    {
        if (param.rgid <= 0)
        {
            return Json(new
            {
                sEcho = "1",
                iTotalRecords = 0,
                iTotalDisplayRecords = 0,
                aaData = (IEnumerable<SecDealDatacs>)new List<SecDealDatacs>()
            },
                JsonRequestBehavior.AllowGet);
        }
        try
        {
            //No session cache for reports page!!!
            List<SecDealDatacs> listObj =   _bao.GetSecuritizationDeal(param.rgid);
            if (listObj == null)
                throw new HttpException(500, "Data Server Errors...");
            int totalRecords = listObj.Count();
            //Pagenation            
            IEnumerable<SecDealDatacs> listObjDisplay = listObj
                .Skip(param.iDisplayStart)
                .Take(param.iDisplayLength);


            var result = listObjDisplay.Select((o, index) => new
            {
                o.col1,
                o.col2,
               col3= o.col3.ToString("#,#"),
                col4=o. col4.ToString("0.0000"),
            }).ToList();

            var listObj1 = result;

            return Json(new
            {
                sEcho = param.sEcho,
                iTotalRecords = totalRecords,
                iTotalDisplayRecords = totalRecords,
                aaData = result
            },JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            //log error into DB and File
            throw new HttpException(500, ex.Message);
        }
    }

Answer 3

$(function () {
         Loadtestview();
    function Loadtestview () {
        var divSecTable = $('#secdeal');
            oSecTable = divSecTable.dataTable({
                "processing": true,
                "serverSide": true,
                "aaSorting": [1, 'asc'],
                "info": true,//localtable.bInfo,
                "autoWidth": false,//localtable.AutoWidth,            
                "scrollY": 700,
                "scrollX": "150%",
                "scrollCollapse": true,
                'destroy': true,
                "pagingType": "full_numbers",
                'lengthChange': false,
                "searching": false,
                'sAjaxSource': '../ReportsMvc/GetSecuritizationDeal',
                "iDisplayLength": 100,
                "columns": [
{ "targets": 0,"data":"col1","title":"col1", "className": "center textNoWrap" },
{ "targets": 1,"data":"col2","title":"col2", "className": "center textNoWrap" },
{ "targets": 2,"data":"col3","title":"col3", "className": "center textNoWrap" },
{ "targets": 3,"data":"col4","title":"col4", "className": "center textNoWrap" },
                ],

                'fnServerData': function (sSource, aoData, fnCallback) {       
                      aoData.push({ "name": "rgid", "value": $("#ddlBatchdate").val() });
                    $.get(sSource, aoData, function (rsp) {
                        fnCallback(rsp);
                    });
                },
                "fnInitComplete": function () {
                    new $.fn.dataTable.FixedColumns(oSecTable, { leftColumns: 4 });       
                }
            });
    }
});