使用新参数重新加载 Ajax 请求

Posted 2023-05-07

【中文标题】使用新参数重新加载 Ajax 请求

【英文标题】：Reload Ajax request with new parameters

【发布时间】：2015-12-10 05:00:46

【问题描述】：

我通过 AJAX 请求从数据库中获取表数据。我需要更改 AJAX 请求中的数据参数并刷新表格。

我正在用命令刷新表格

$('#table1').DataTable().ajax.reload();

我有以下代码

$('#table1').DataTable(

    /* SERVER SIDE PROCESSING */
                "serverSide": true,
                "ajax":
                    
                        "url": "Home/Search",
                        "type": "POST",
    
                        "data": 
                            'searchType': GetSearchType(),
                            'searchText': GetSearchText()
                            //'searchType': $.mynamespace.searchType
                            //'searchText': $.mynamespace.searchText
                            //'searchType': localStorage.getItem("searchType"),
                            //'searchText': localStorage.getItem("searchText"),
                        
                    
            );

但是在 AJAX 重新加载之后，向服务器发送原始请求并且忽略新的参数值。我尝试通过函数、全局变量和浏览器存储将数据传递给请求，但这些方法都不起作用。在互联网上，我找到了解决方案

aoData.push() 

功能，但我不知道如何使用它。

我的 jQuery DataTables 版本是 1.10.7。

我还尝试使用以下代码销毁和重新创建表：

$('#table1').DataTable(
        "ajax":
            
                "url": "Home/Search",
                "type": "POST",

                "data": 
                    'searchType': GetSearchType(),
                    'searchText': GetSearchText()
                
            ,
        "destroy" : true
    ).ajax.reload();

但我收到错误消息：

DataTables 警告：表 id=table1 - Ajax 错误 (http://www.datatables.net/manual/tech-notes/7)

参数字典包含不可为空类型“System.Int32”的参数“draw”的空条目

【参考方案1】：

您可以使用函数作为ajax.data 选项的值，如下所示。

这样，您的代码将在每次客户端向服务器发出请求时运行，而不是像您的初始代码那样运行一次。

$('#table1').DataTable(
   "serverSide": true,
   "ajax": 
      "url": "Home/Search",
      "type": "POST",
      "data": function(d)
         d.searchType = GetSearchType();
         d.searchText = GetSearchText();
      
   
);

然后在需要重新加载表格时使用$('#table1').DataTable().ajax.reload()，如果不想重置当前页面，请使用$('#table1').DataTable().ajax.reload(null, false)。请参阅ajax.reload() 了解更多信息。

【讨论】：

谢谢。请注意，上述方法也适用于更新 table.ajax.reload() 调用的参数，而不仅仅是表初始化。即使您使用 jquery（或 javascript）通过 razor 从表单元素当前内容和/或模型值更新参数也是如此。在 DataTables v1.10+ 中测试，结果良好。 :)

这对我不起作用，我得到：未捕获的类型错误：无法读取未定义的属性“重新加载”

@MichaelFever，请确保您使用的是 DataTable() 而不是 dataTable()。

拯救我的一天！好兄弟。

【参考方案2】：

$('#table1').DataTable().ajax.url("?some_param=1&another=2").load();

这是另一种解决方案。在默认数据表参数中添加您的参数。

How to set dynamically the Ajax URL of a dataTable?

【讨论】：

这正是我所需要的！在创建自己的分页逻辑来控制一次显示的数字记录时，通过使用此解决方案能够避免必须执行服务器端处理逻辑（服务器端：true，谢谢！

【参考方案3】：

好的，我找到了解决方案，在重新初始化表时，需要再次指定所有设置，否则它们将采用默认设置。所以最终的代码是

$('#table1').DataTable(
            "iDisplayStart": 0,
            "iDisplayLength": 50,
            "bPaginate": true,
            "bSort": false,
            "serverSide": true,
             /* and all others settings others than default */
        "ajax":
            
                "url": "Home/Search",
                "type": "POST",

                "data": 
                    'searchType': GetSearchType(),
                    'searchText': GetSearchText()
                
            ,
        "destroy" : true  /* <---- this setting reinitialize the table */
    ).

但如果有人能找到更好的解决方案，请分享。

【讨论】：

也许 'destroy' 参数在早期版本中有效，但至少在 DataTables 的 1.10 或更新版本中，它不再有效（因此投反对票 - 抱歉！）。但是，使用第一个答案中描述的函数确实有效。

【参考方案4】：

这就是我完成它的方式：

var onSearchClick = function () 搜索（）; ;

    var search = function () 


        var startDate =  $('#datetimepicker1').find("input").val();
        var endDate = $('#datetimepicker2').find("input").val();

        $.ajax(
            type: "GET",
            url: "/api/getByDate?startDate=" + startDate + "&endDate="+endDate,
            datatype: "json",
            traditional: true
        )
        .done(function (data) 

          var table = $('#data-table-1').DataTable(
              data: data.data,
              destroy: true,
              "columns": [
              "data": "id" ,
              "data": "id2" ,
              "data": "id3" 
              ],
              "columnDefs": [
           
               "targets": [1],
               "visible": false,
               "searchable": false
           ,
            
                "targets": [2],
                "visible": false,
                "searchable": false
            ],
              "sPaginationType": "full_numbers"
          );
      );
    ;

【参考方案5】：

AJAX 在第一次加载页面时将标题作为变量加载。当您更改标题并进行一些排序/搜索时。除非您使用“beforeSend”设置新标头，否则不会设置新标头。我提供了示例代码。

试试这个，

$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('ajax', 
    url: 'url',
    'beforeSend': function (request) 
        request.setRequestHeader("Authorization","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9");
        request.setRequestHeader("Subscription-Key","1d64412357444dc4abc5fe0c95ead172");
     ,

    //,
    type: "POST",
    cache: false, // It will not use cache url

)