通過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); 
      }