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

Posted 2023-04-13

【中文标题】用 Json 数组 MVC 4 填充 jquery 数据表

【英文标题】：fill jquery datatable with Json array MVC 4

【发布时间】：2012-11-26 23:09:05

【问题描述】：

我有一个带有 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一样大吗？

谢谢

【问题讨论】：

你能把你的代码添加到jsfiddle.net吗？

【参考方案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）

【参考方案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);
        
    

【参考方案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 );       
                
            );
    
);