1

我正在关注此链接以进行 ajax 调用以动态加载 Jquery 数据表

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

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

那么DataTables如何发送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 中发送到控制器的参数？

一些帮助将不胜感激:)

谢谢

4

2 回答 2

1

我的建议是在客户端中使用把手渲染表格，然后应用数据表格：

您将需要一个空表：

<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
}

希望能帮助到你 ;）

于 2013-04-25T09:28:16.940 回答
0

这将帮助您更改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);
            }
于 2017-07-20T08:05:38.380 回答