使用自定义 ajax 搜索的结果更新 ajax-datatables-rails table
Updating ajax-datatables-rails table with results from custom ajax search
我有一个简单的数据表解决方案,使用 ajax-datatables-rails gem。它工作得很好,但我现在正在尝试实施一个解决方案,我可以在其中更新现有的 dataTable,使用从自定义搜索表单调用的单独操作的结果。在我当前的代码中,控制器操作的一部分如下所示:
respond_to do |format|
format.html
format.json { render json: CasefileDatatable.new(view_context, {:user_id => current_user.id}) }
end
(当前未使用 user_id
,只是测试从控制器传入 ...Datatable class)
有了 CasefileDatatable
我有以下内容:
def data
records.map do |record|
[
record.county.county_name,
record.date.strftime("%m/%d/%y"),
record.case_number,
record.primary_property_address,
record.table_json.to_s
]
end
end
def get_raw_records
Casefile.all
end
最后一列 record.table_json.to_s
已隐藏。包含我在后续处理中需要的内容。
Javascript:
var casefileTable = $('#casefiles-table').DataTable({
"processing": true,
"serverSide": true,
"ajax": $('#casefiles-table').data('source'),
"stateSave": false,
"pagingType": 'full_numbers',
columns: [
{data: '0'},
{data: '1'},
{data: '2'},
{data: '3'}
]
});
这一切都很好。然后我开始添加一个自定义搜索表单,因为这个模型更广泛一些,需要能够搜索可选属性,使用连接跨多个模型等。所以,我有另一个操作字段 ajax从表单请求,然后 returns json 在第一次尝试中使用 jbuilder。我的策略是直接使用dataTableAPI操作现有的dataTable,然后我在我的表单中添加了相关的js调用on...ajax:success handler,像这样:
//this seems to trigger a reset/refresh, so I arrive where I started
$('#casefiles-table').dataTable().fnClearTable();
$('#casefiles-table').dataTable().fnAddData(data);
然后这些 dataTable 调用,什么也没做:
...
var dt = $('#casefiles-table').DataTable();
dt.clear().draw();
dt.rows.add(data);
dt.draw();
...
然后我想到也许我可以 return 一个不同的数据 table class,并在我的控制器中执行所有 AR 查询,然后传入 ActiveRecord_Relation 对象,然后在新的 CasefileSearchDatatableClass
中使用它,像这样:
控制器动作return:
render json: CasefileSearchDatatable.new(view_context, {:query => finder})
然后在CasefileSearchDatatable
classget_raw_records
:
def get_raw_records
results = options[:query]
# following line was just to test passing in the query via options
# p "search raw records results: #{results.size}"
results
end
此类作品;正如 sql 日志和我的 p 语句所证明的那样,查询被触发,但是,data-table 没有随结果更新,也没有被清除;完全保持不变。
因此,我正在尝试找到更新此 table 的最佳方法,使用上述方法之一或必要时使用完全不同的方法。此外,不确定如何最好地处理分页,假设第一个目标是可能的。感谢您的指点。
这个 JavaScript 代码应该有效(除了一个额外的 draw()
),不知道为什么没有:
var dt = $('#casefiles-table').DataTable();
dt.clear();
dt.rows.add(data);
dt.draw();
我认为您使用单独的 Ajax 调用的方法行不通,因为您有 Ajax 源数据并启用了服务器端处理 ("serverSide": true
)。因此,在您添加自定义过滤数据后,任何后续用户操作(排序、next/prev 页面)都将调用 $('#casefiles-table').data('source')
指定的 URL 并将重置您的自定义过滤数据。
解决方案
使用自定义过滤控件,建议使用ajax.data 属性 将自定义变量发送到服务器端脚本。例如:
$('#casefiles-table').DataTable({
"ajax": {
"url": $('#casefiles-table').data('source'),
"data": function ( d ) {
d.extra_search = $('#extra').val();
}
}
});
然后在服务器端检索这些自定义变量的值(例如,params.extra_search
)并相应地调整您的查询。
我有一个简单的数据表解决方案,使用 ajax-datatables-rails gem。它工作得很好,但我现在正在尝试实施一个解决方案,我可以在其中更新现有的 dataTable,使用从自定义搜索表单调用的单独操作的结果。在我当前的代码中,控制器操作的一部分如下所示:
respond_to do |format|
format.html
format.json { render json: CasefileDatatable.new(view_context, {:user_id => current_user.id}) }
end
(当前未使用 user_id
,只是测试从控制器传入 ...Datatable class)
有了 CasefileDatatable
我有以下内容:
def data
records.map do |record|
[
record.county.county_name,
record.date.strftime("%m/%d/%y"),
record.case_number,
record.primary_property_address,
record.table_json.to_s
]
end
end
def get_raw_records
Casefile.all
end
最后一列 record.table_json.to_s
已隐藏。包含我在后续处理中需要的内容。
Javascript:
var casefileTable = $('#casefiles-table').DataTable({
"processing": true,
"serverSide": true,
"ajax": $('#casefiles-table').data('source'),
"stateSave": false,
"pagingType": 'full_numbers',
columns: [
{data: '0'},
{data: '1'},
{data: '2'},
{data: '3'}
]
});
这一切都很好。然后我开始添加一个自定义搜索表单,因为这个模型更广泛一些,需要能够搜索可选属性,使用连接跨多个模型等。所以,我有另一个操作字段 ajax从表单请求,然后 returns json 在第一次尝试中使用 jbuilder。我的策略是直接使用dataTableAPI操作现有的dataTable,然后我在我的表单中添加了相关的js调用on...ajax:success handler,像这样:
//this seems to trigger a reset/refresh, so I arrive where I started
$('#casefiles-table').dataTable().fnClearTable();
$('#casefiles-table').dataTable().fnAddData(data);
然后这些 dataTable 调用,什么也没做:
...
var dt = $('#casefiles-table').DataTable();
dt.clear().draw();
dt.rows.add(data);
dt.draw();
...
然后我想到也许我可以 return 一个不同的数据 table class,并在我的控制器中执行所有 AR 查询,然后传入 ActiveRecord_Relation 对象,然后在新的 CasefileSearchDatatableClass
中使用它,像这样:
控制器动作return:
render json: CasefileSearchDatatable.new(view_context, {:query => finder})
然后在CasefileSearchDatatable
classget_raw_records
:
def get_raw_records
results = options[:query]
# following line was just to test passing in the query via options
# p "search raw records results: #{results.size}"
results
end
此类作品;正如 sql 日志和我的 p 语句所证明的那样,查询被触发,但是,data-table 没有随结果更新,也没有被清除;完全保持不变。
因此,我正在尝试找到更新此 table 的最佳方法,使用上述方法之一或必要时使用完全不同的方法。此外,不确定如何最好地处理分页,假设第一个目标是可能的。感谢您的指点。
这个 JavaScript 代码应该有效(除了一个额外的 draw()
),不知道为什么没有:
var dt = $('#casefiles-table').DataTable();
dt.clear();
dt.rows.add(data);
dt.draw();
我认为您使用单独的 Ajax 调用的方法行不通,因为您有 Ajax 源数据并启用了服务器端处理 ("serverSide": true
)。因此,在您添加自定义过滤数据后,任何后续用户操作(排序、next/prev 页面)都将调用 $('#casefiles-table').data('source')
指定的 URL 并将重置您的自定义过滤数据。
解决方案
使用自定义过滤控件,建议使用ajax.data 属性 将自定义变量发送到服务器端脚本。例如:
$('#casefiles-table').DataTable({
"ajax": {
"url": $('#casefiles-table').data('source'),
"data": function ( d ) {
d.extra_search = $('#extra').val();
}
}
});
然后在服务器端检索这些自定义变量的值(例如,params.extra_search
)并相应地调整您的查询。