DataTables ajax.reload()带参数

Question

我在一个Angular2项目中使用DataTables的serverSide。

我想在进行更改之后重新加载表格，并通过AJAX将更改后的内容作为参数传递。

问题是，DataTables始终从初始化时获取options对象，而不是更新后带有新参数的版本。

因此，我需要使用ajax.reload()传递一组新参数。

这是我当前的函数:

filterData(tableParams) {
    console.log('reloading DT. tableparams received are: ' + JSON.stringify(tableParams));

    let element = $(this.el.nativeElement.children[0]);
    let table = element.find('table.dataTable');
    table.DataTable().ajax.reload();
}

目前，正如您所看到的，我没有使用 tableParams，这是因为我想展示一个干净的函数版本。我尝试了很多方法，但都没有成功。

DataTables总是获取初始的options对象和初始参数。

这是我绝望的尝试之一：

filterData(tableParams) {
    let element = $(this.el.nativeElement.children[0]);
    let table = element.find('table.dataTable');
    table.DataTable({
        ajax: {
            url: this.jsonApiService.buildURL('/test_getUsers.php'),
            type: 'POST',
            data: tableParams,
        },
    }).ajax.reload();
}

非常感谢您的求助。如果您需要更多有关如何创建DataTable的解释或更多的代码片段，请告知我。但是我认为问题只出在ajax.reload()函数中，能够发送更新的参数将解决这个问题。

非常感谢！ 编辑1 这是我的初始options对象：

            let data = {
                email: true,
                test: 'init',
            };

            this.options = {
                dom: 'Bfrtip',
                processing: true,
                serverSide: true,
                pageLength: 20,
                searchDelay: 1200,
                ajax: {
                    url: this.jsonApiService.buildURL('/test_getUsers.php'),
                    type: 'POST',
                    data: data,
                },
                columns: [
                    {data: 'userId'},
                    {data: 'userCode'},
                    {data: 'userName'},
                    {data: 'userRole'},
                    {data: 'userEmail'},
                ],
            };

以下是DataTables发送的参数：

（除了其他DataTables参数）

当我调用ajax.reload()时，不管我尝试了什么，最终都会发送这些相同的参数，因此发送初始化参数。

- SrAxi

Answer 1

我终于找到了解决方案，问题在于我过于专注于通过DataTable().ajax.reload()实现我的目标。我想以某种方式通过那里传递参数，但是那是不正确的。

我必须更改options对象的结构。 如你之前所见，我是这样将我的自定义参数赋值给options对象的：

ajax: {
  url: this.jsonApiService.buildURL('/test_getUsers.php'),
  type: 'POST',
  data: this.params,
}

在我的情况下，data: this.params 会从某个地方获取数据，我有两个监听器，一个用于 init , 另一个用于 updating ，它们改变了 this.params 的值。相比于监听器，这可以是一个 onChange() ，但关键是参数在运行时更改。

因此，我只需将其放入函数中，并将 DataTable 的参数与自己的参数合并即可。

这是我的解决方案：

data: function (d) {
    Object.assign(d, myClass.params);
    return d;
}

使用这个options对象时，如果我需要向服务器发送新参数并刷新DataTable，我只需调用ajax.reload()。 DataTables将获取最新的data和options对象并重新加载。

真心希望这能帮到别人！祝愉快编码！

- SrAxi

Answer 2

在某些情况下，您可能希望在运行时更改ajax URL或应用任何其他查询参数。

因此，您可以像这样操作：

var dataTable = $('#example').DataTable({...});    
dataTable.ajax.url('/new-ajax-url?someParam=1').load();

它与图书馆的v1.10.16版本配合使用。

- Akmal

Answer 3

$('#example').dataTable({
  "ajax": {
    "url": "data.json",
    "data": function (d) {
        d.extra_search = $('#extra').val();
    }
  }
});

那么只需调用以下代码：

table.ajax.reload();

- Ilker Burak

---

这是最佳解决方案！ - user2662680

Answer 4

我想在每个请求中发送新的参数，而不必每次都销毁和重建数据表。我在我的网站上大量使用数据表，并希望有一种更简单的方法来处理我的用例，因此我想出了这个方法。也许对其他人有用。

buildDT.js :

        ;(function (){ 
        
    'use strict';
    
    /**
     * dtReload is used for setting new param 
     * to send to the server with out having 
     * to reload the table
     */
    var dtReload = {};
    /**
     * This is the object containing
     * the param to be sent to the server 
     */
    dtReload.param = {};
    /**
     * Adds the param to the object used by datatables
     * for the request
     * @param param object datatables object
     * @param extra object extra params to send to the server
     * @return object
     */
    dtReload.proccParam = (param, extra) => {
      $.each(extra, function(i,e){
        param[i] = e;
      })
      return param;
    }
    
    class buildDataTable {
        
        #url = '';
        #method = 'POST';
        
        #dtOptions = {};
        #responsive = true;
        #pageLength = 10;
        #lengthMenu = [5, 10, 20];
        #processing = true;
        #serverSide = true;
        #language = {}; 
        #initComplete;
        #columns = [];
        #columnDefs = [];

        ajaxParam;
        
        constructor(){}
        
        setURL(url){
            this.#url = url
        }
        
        setPageLength(pageLengthInt){
            if(pageLengthInt == 'undeinfed'){
              this.#pageLength = 10;
            }else if(typeof pageLengthInt == "number"){
              this.#pageLength = pageLengthInt;
            }else{
              console.log('Colums should be of type Array');
            }
        }
        
        setColumns(columnsArray){
            if(columnsArray == 'undefined'){
              this.#columns = [];
            }else if(typeof columnsArray == "object" && true == Array.isArray(columnsArray)){
              this.#columns = columnsArray;
            }else{
              console.log('Colums should be of type Array');
            }
        }
        
        setColumnDefs(columnDefsArray){
            if(language == 'undefined'){    
                this.#columnDefs = [
                  { targets: 'no-sort', orderable: false }
                ]   
            }else if(typeof columnDefsArray == "object" && true == Array.isArray(columnDefsArray)){
                this.#columnDefs = columnDefsArray;
            }else{
                console.log('Coulmn Definitions should be of type Array');
            }
        }
        
        setLanguage(language){
            if(language == 'undefined'){
              this.#language = {
                infoEmpty: "No Data To Display",
                emptyTable: "No Data To Display",
                zeroRecords: "No Data To Display"
              }
            }else if(typeof language == "object" && false == Array.isArray(language)){
                this.#language = language;
            }else{
                console.log('Language should be of type object');
            }
        }
        
        setInitComplete(func){              
            this.#initComplete = function(settings, json){
                if(typeof func == "function"){
                  func(settings,json);
                }
            }
        }
        
        setParam(param){ 
          this.ajaxParam = param;
        }
        
        getParam(){     
            return this.ajaxParam;
        }
        
        makeAjax(param){
          dtReload.param = param;
          return {
            url:this.#url,
            dataSrc:'data.result',
            data:function(d){   
              dtReload.proccParam(d, dtReload.param)
            },
            method:this.#method
          }
        }   
        
        #setOptions(){      
            this.#dtOptions = {         
                responsive:this.#responsive,
                pageLength:this.#pageLength,
                lengthMenu:this.#lengthMenu,
                processing:this.#processing,
                serverSide:this.#serverSide,
                language:this.#language,
                ajax:this.makeAjax(this.getParam()),
                initComplete:this.#initComplete,
                columns:this.#columns,
                columnDef:this.#columnDefs          
            }   
        }
        
        getOptions(){
          this.#setOptions();
          return this.#dtOptions;
        }   
    }
    
    window.dtReload = dtReload;
    window.buildDataTable = buildDataTable;
    
    
    })();

用法

    var builder = new buildDataTable();
    var myDTableObject;
    
    function doSomething(id){
    
      // Pass the param 
      builder.setParam({
         someParam : 'doSomething',
         id:id,
         token : token_value
      });
    
      // Set the server url
      builder.setURL('http://your/url')
      // Setup your columns
      builder.setColumns([
        { "data": function(data){return columnProcess(data).id} },
        { "data": "name" },
        { "data": function(data){return columnProcess(data).status} },
        { "data": "date" },
        { "data": "options" }   
      ])
      
      // Check if datatables is loaded and setup
      if($.fn.dataTable.isDataTable('#yourTable')){
          // Set the new param
          dtReload.param = builder.getParam();
          // Reload the table
          myDTableObject.ajax.reload();
      }else{
        // Init table setup
        myDTableObject = $('#yourTable').DataTable(
          builder.getOptions()
        );
      } 
    }

感谢@sraxi提出的使用ajax请求中的函数来处理参数的想法。

我在GitHub上创建了一个存储库，链接为DataTableReload。

- Kyle Coots