【问题标题】:How to change the ajax sort params in Tabulator?如何更改 Tabulator 中的 ajax 排序参数?
【发布时间】:2021-12-21 14:02:15
【问题描述】:

如何更改 Tabulator 中的 ajax 排序参数?目前的 ajax 排序参数是 params.sorters[0]['field']params.sorters[0]['dir']

我找不到任何关于如何自定义它的解决方案,就像我想更改 params.sorters[0]['field'] 转换为 "orderBy"params.sorters[0]['dir']"dir"

编辑: 我使用 react-tabulator 和 Laravel 作为后端

【问题讨论】:

    标签: javascript reactjs tabulator


    【解决方案1】:

    tabulator-tables 5.07 也有同样的问题。在这种情况下,它现在在键 sort 而不是 sorters 下发送排序参数。

    以下示例说明将排序参数 ('sort') 更改回前一个键 ('sorters')。以下是如何修改远程排序参数的要点:

        let myTable = new Tabulator(myTableRef, {                                                                                   
          placeholder: null,                                                                                                                    
          ajaxURL: myAjaxUrl,                                                                                                                                                                                                                                  
          ajaxConfig: {                                                                                                                         
            method: "POST",                                                                                                                     
            headers: {                                                                                                                          
              "Content-type": "application/json; charset=utf-8",                                                                                
            },                                                                                                                                  
          },                                                                                                                                    
          ajaxContentType: {                                                                                                                    
            headers: { 'Content-Type': 'application/json' },                                                                                     
            body: function(url, config, params){                                                                                                 
              // Rewrite 'sort' to 'sorters' to accomodate legacy api expectations.                                                             
              if(params.hasOwnProperty('sort')){                                                                                                
                Object.defineProperty(params, 'sorters',                                                                                        
                  Object.getOwnPropertyDescriptor(params, 'sort'))                                                                              
                delete params['sort']                                                                                                           
              }                                                                                                                                 
              return JSON.stringify(params)                                                                                                     
            }                                                                                                                                   
          },
          // remainder of table definition.
    

    使用 Tabulator 的 ajaxContentType body 指定一个函数来编写 ajax 请求的正文。如果存在排序参数,则需要修改参数。最后,将 params 对象转换为 JSON 并将其作为正文内容返回。

    【讨论】:

      【解决方案2】:

      这方面的文档隐藏在 Pagination 文档中。我对page 使用paginationDataSent 选项,但我不确定它是否会按照您为sorters 描述的方式工作。你必须做一些实验。

      或者,您可以编写一个自定义ajaxURLGenerator,以任何您想要的方式重写参数。

      【讨论】:

      • 实际上,我已经尝试过 paginationDataSent 用于排序器参数(但仍然无法正常工作),如文档中所述然后将在排序器的排序器参数中传递一个排序器对象数组请求,此参数的名称可以在分页模块中的 paginationDataSent 选项中设置。顺便感谢您的回答
      猜你喜欢
      • 1970-01-01
      • 2021-08-19
      • 2023-03-14
      • 1970-01-01
      • 1970-01-01
      • 2020-01-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多