代码之家 › 专栏 › 技术社区 › Muflix

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

datatables jquery

Muflix · 技术社区 · 11 年前

我通过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 )

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

5 回复 | 直到 6 年前

Gyrocode.com 9 年前

可以将函数用作 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() 了解更多信息。

Mehmet Emre Vural 7 年前

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

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

How to set dynamically the Ajax URL of a dataTable?

Muflix 11 年前

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

$('#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 */
    }).

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

Sanchitos 8 年前

我就是这样做到的:

var onSearchClick=函数(){ search(); };

    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"
          });
      });
    };

Matt 7 年前

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

试试这个,

$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

})