服务器端使用Datatables进行自定义过滤

Question

我正在使用 DataTables 并且使用服务器端处理（Django）。

我有一个单独的文本字段，用于在表格已经呈现之后自定义过滤数据。

以下内容可以正常工作（我想自定义过滤列）：

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();

我该如何实现这一点？

感谢您的帮助。

- Amir Mog

Answer 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。

- 3xCh1_23

---

我好像已经错过了这个很长一段时间。谢谢！ - But those new buttons though..

Answer 2

你已经接近成功了。你只需要将筛选器变量分配给传递给数据表请求的数据参数即可：

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

为了过滤数据，只需在选择改变事件上调用 draw()

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

- markpsmith

Answer 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: [<val>] 似乎总是等于 value1
• value2：用于 'between' 逻辑的上界，其中 value1 是下界

- Timothy C. Quinn