通过AJAX

Question

jQuery的数据表载列和数据AM以下链接进行Ajax调用加载jQuery的数据表动态

http://datatables.net/forums/discussion/3442/x&page=1#Item_10。

在我开始尝试之前，我在这里卡住了我的想法。

那么DataTable如何发送诸如iDisplayLength，iDisplayStart，sEcho等属性来进行分页和显示记录。

我该如何处理？从链接

示例代码为快速参考

$.ajax({ 
     "dataType": 'text', 
     "type": "GET", 
     "url": "dtJSON.txt", 
     "success": function (dataStr) { 
      var data = eval('('+dataStr+')'); 
      $('#example').dataTable({ 
       "aaSorting": [[0, "desc"]], 
       "aaData": data.aaData, 
       "aoColumns": data.aoColumns, 
       "bScrollCollapse": true, 
       "bFilter": false, 
       "sPaginationType": "full_numbers", 
       "bJQueryUI": true, 
       "aoColumnDefs": data.aoColumnDefs 
      }); 
     } 
    }); 

我可以用ajax获取数据和列的细节，但我怎么处理发送的MVC到控制器的参数？

一些帮助，将不胜感激:)

感谢

Answer 1

我recomendation是呈现DE TABLE在车把上的客户端和应用数据表后：

您将需要一个空表：

<table id="mytable"> 
    <thead> 
     <tr> 
      <th>Col 1</th> 
      <th>Col 2</th> 
      <th>Col 3</th> 
     </tr> 
    </thead> 
    <tbody id="table_data_container"> 
     <!-- Populated by JS --> 
    </tbody> 
</table> 

一个Ajax请求，在服务器端不做分页，数据表将会为您处理它在客户端这一手段您不必将当前页面发送到服务器，只要返回所有可用的行，如果行数非常多，就可以尝试强制用户按名称，ID或其他内容过滤搜索在ajax请求中发送该过滤器。

$.ajax({ 
    type: method, 
    url: url, 
    async: async, 
    data: parameters, 
    dataType: dataType, 
    success: function(json){ 
     var container = $('#table_data_container'); 
     //your response should be an object like { items : [item,item,item,...] } 
     var template = '{{#each item}}<tr><td>{{this.col1}}</td><td>{{this.col1}}</td><td>{{this.col1}}</td></tr>{{/each}}' //visit http://handlebarsjs.com/ for info 
     RenderJson(json,template,container); //this will generate thehtml for the rows and append it to the table 
     $('#mytable').dataTable(); 
    }, 
    error: function(response){ 
     alert('Error!'); 
    } 
}); 

和渲染功能：

function RenderJson(json,template,container) { 
    var compiledTemplate = Handlebars.compile(template); 
    var html = compiledTemplate(json); 
    $(container).html(''); //remove previous content 
    $(container).html(html); //set new content 
} 

希望它帮助;）

Answer 2

这将帮助你改变dropdownlist和按钮提交填充在数据表中的数据。

注意：当您处理datatable时，此行将有助于传递其他控件值。

@using (@Html.BeginForm("action", "controllername", FormMethod.Post)) 
    { 
     @Html.AntiForgeryToken() 
     <div class="table-responsive"> 
     <div class="col-sm-12"> 
      <div class="row"> 
       <div class="col-md-3"> 
        <label>Report type</label> 
       </div> 
       <div class="col-md-3"> 

        @Html.DropDownList("ReportTypeEnum", new SelectList(Enum.GetValues(typeof(appname.Model.ReportTypeEnum))), new {@class = "form-control"}) 
       </div> 
       <div class="col-md-3"> 
        <button class="btn btn-primary col-sm-12">Submit</button> 
       </div> 
in datatable binding model in ajax call as below: 


[ "ajax": { "url": '@Url.Action("action", "controller")', 
            'type': 'GET', 
            "data": function (d) { d.reportType = $('#ReportTypeEnum :selected').text(); } //JSON.stringify({ reportType: varReportTypeEnum }) 
           }] 

    this code will for controller 
dropdown enum: code in model: 
public enum ReportTypeEnum 
    { 

     Yes, 
     No, 
     NoResponse   
    } 
and below datatable ajax calling method 
    public JsonResult ajaxcallmethod([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel, string reportType)// string reportType 
      { 

       // below is we are taking dropdownchange value based on that we load the data into datatable. 
       yourmodel model = new yourmodel(); 
       if (reportType.ToLower() == ReportTypeEnum.Yes.ToString().ToLower()) 
       { 
        model.ReportTypeEnum = ReportTypeEnum.Yes; 
       } 
       else if (reportType.ToLower() == ReportTypeEnum.No.ToString().ToLower()) 
       { 
        model.ReportTypeEnum = ReportTypeEnum.No; 
       } 
       else if (reportType.ToLower() == ReportTypeEnum.NoResponse.ToString().ToLower()) 
       { 
        model.ReportTypeEnum = ReportTypeEnum.NoResponse; 
       } 

    data =// here model call 


       return Json(new DataTablesResponse((int)requestModel.Draw, data, transactionsListingResponse.PagerResource.ResultCount, transactionsListingResponse.PagerResource.ResultCount), JsonRequestBehavior.AllowGet); 
      }