带有服务器端的数据表自定义过滤

Posted

技术标签:

【中文标题】带有服务器端的数据表自定义过滤【英文标题】:Datatables custom filtering with server side 【发布时间】:2016-02-26 07:40:25 【问题描述】:

我正在使用 DataTables 并且还使用服务器端处理 (Django)。

我有一个单独的文本字段,在表格已经呈现后,我用它来自定义过滤 DataTable 中的数据。

以下工作正常(我想自定义过滤列):

var table = $('#problem_history').DataTable( 
    "bJQueryUI": true,
    "aaSorting": [[ 1, "desc" ]],
    "aoColumns": [
      // various columns here
    ],
    "processing": true,
    "serverSide": true,
    "ajax": 
      "url": "/getdata",
      "data": 
        "friend_name": 'Robert'
      
      
 );

因此,在页面加载(DataTable 的初始加载)时,它可以很好地过滤“Robert”。但现在我想以编程方式更改数据以过滤"friend_name" == "Sara"

我已经尝试了以下方法,filteredData 有一个正确的过滤对象,但表格本身没有使用新过滤器重绘。

var filteredData = table.column( 4 ).data().filter(
    function ( value, index ) 
        return value == 'Sara' ? true : false;
    
);
table.draw();

我也试过了,但没有运气:

filteredData.draw();

我怎样才能做到这一点?

感谢您的帮助。

【问题讨论】:

【参考方案1】:

这里有一个很好的解释: https://datatables.net/reference/option/ajax.data

我目前正在使用此代码:

"ajax": "url":"/someURL/Backend",
        "data": function ( d ) 
                  return $.extend( , d, 
                    "parameterName": $('#fieldIDName').val(),
                    "parameterName2": $('#fieldIDName2').val()
                   );
        

您可以通过以下方式调用它:

$('#myselectid').change(function (e) 
        table.draw();
);

如果您想通过单击按钮提交,请将 .change 更改为 .click 并确保该 ID 指向 html 中的按钮 ID

【讨论】:

不知何故我已经错过了很长一段时间。谢谢!【参考方案2】:

你几乎得到它。您只需要将过滤器变量分配给 在数据表请求中传递的数据参数:

"ajax": 
     "url": "/getdata",
     "data": 
     "friend_name": $('#myselectid').val();
    
 

要过滤数据,只需在选择更改事件上调用draw()

$('#myselectid').change(function (e) 
        table.fnDraw();
);

【讨论】:

【参考方案3】:

对于基本搜索,您应该使用search() API:

// Invoke basic search for 'a'
dt.search('a', false)

对于更复杂的查询,您可以通过开放 API 拦截 ajax 调用来利用 searchBuilder 后端。以下是一些 searchBuilder 示例:

// Basic example: 
// . (searchable_fields contains 'a' 
//      AND (office = Tokyo AND Salary > 100000) 
//   )
$('#problem_history').on('preXhr.dt', function(e, settings, data)
    data['searchBuilder'] = 
        'criteria': [
            'data': 'Office', 'origData': 'office', 'type': 'string'
                ,'condition': '='
                ,'value': ["Tokyo"], 'value1': "Tokyo" 
            
            ,'data': 'Salary', 'origData': 'salary', 'type': 'num'
                ,'condition': '>'
                ,'value': [100000], 'value1': 100000 
            
        ]
        ,'logic': 'AND'
    
)
// Complex example:
// . (searchable_fields contains 'a'
//      AND (
//            (office = Tokyo AND Salary > 100000) 
//         OR (office = London AND Salary > 200000)
//      )
//   )
$('#problem_history').on('preXhr.dt', function(e, settings, data)
    data['searchBuilder'] = 
        'criteria': [
            'criteria': [
                    'data': 'Office', 'origData': 'office', 'type': 'string'
                        ,'condition': '='
                        ,'value': ["Tokyo"], 'value1': "Tokyo"
                    
                    ,'data': 'Salary', 'origData': 'salary', 'type': 'num'
                        ,'condition': '>'
                        ,'value': [100000], 'value1': 100000 
                    
                ]
                ,'logic': 'AND'
            
            ,'criteria': [
                    'data': 'Office', 'origData': 'office', 'type': 'string'
                        ,'condition': '='
                        ,'value': ["London"], 'value1': "London" 
                    
                    ,'data': 'Salary', 'origData': 'salary', 'type': 'num'
                        ,'condition': '>'
                        ,'value': [200000], 'value1': 200000 
                    
                ]
                ,'logic': 'AND'
            
        ]
        ,'logic': 'OR'
    
)

SearchBuilder 逻辑类型:

=
!=
contains
starts
ends
<
<=
>
>=
between
null
!null

SearchBuilder 数据值块:

value: [&lt;val&gt;] 似乎总是等于 value1 value2:对于“之间”逻辑的上限,value1 将是下限

【讨论】:

以上是关于带有服务器端的数据表自定义过滤的主要内容,如果未能解决你的问题,请参考以下文章

Angular-DataTables 自定义过滤器

微服务前端和后端的交互

oracle的在没有安装服务端连接远处服务端的方法

【SpringBoot】2022-03-26【自定义请求转发、分发】

主动模式和被动模式添加监控主机添加自定义模板自动发现

自定义报头解决粘包问题