2 回答

• 0

  我的推荐是使用把手在应用数据表之后在客户端中呈现de table：

  你需要一张空 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请求，不要在服务器端进行分页，datatables会在客户端为你处理它，这意味着你不必将当前页面发送到服务器，只需返回所有可用的行，如果行数非常高，请尝试强制用户按名称，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
  }
  

  希望能帮助到你 ;）

  回复于 2024-04-28T06:09:00+08:00
• 1

  这将帮助您更改 dropdownlist 并按钮提交填充数据表中的数据 .

  Note ：当您处理 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);
              }
  

  回复于 2024-04-28T06:09:00+08:00