2012-12-09 22 views
2

我得到了一個jQuery數據表的視圖,我希望在一個按鈕上從另一個Json列表或從控制器收到的任何數組立即重新填充表中的數據。用json數組MVC填充jquery數據表4

這是在我的視圖的代碼:

$.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需要與數據表的大小相同嗎?

感謝

+0

可以添加你的代碼jsfiddle.net? –

回答

0

如果你只是希望重裝你可以使用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

0

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

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