带有服务器端的数据表自定义过滤
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: [<val>]
似乎总是等于 value1
value2
:对于“之间”逻辑的上限,value1
将是下限
【讨论】:
以上是关于带有服务器端的数据表自定义过滤的主要内容,如果未能解决你的问题,请参考以下文章