Обновление таблицы ajax-datatables-rails с результатами пользовательского поиска ajax

Question

У меня есть простое решение dataTables с использованием ajax-datatables-rails gem. Он отлично работает, но теперь я пытаюсь реализовать решение, в котором я могу обновить существующий dataTable на месте, с результатами отдельного действия, вызванного из пользовательской формы поиска. Существующий код, в котором действие контроллера:

... 
respond_to do |format| 
    format.html 
    ormat.json { render json: CasefileDatatable.new(view_context, {:user_id => current_user.id}) } 
end 

(* в настоящее время не используется user_id, только тестирование проходит в ... DataTable класс от контроллера)

с CasefileDatable:

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 из формы, а затем возвращает json, используя jbuilder, с первой попытки. Моя стратегия была использовать DataTable API, чтобы манипулировать существующий DataTable непосредственно, и я добавил соответствующие Js вызовов в моей форме на ... АЯКС: обработчик успеха, как это:

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

Тогда мне пришло в голову, что, возможно, я мог бы вернуться другой ... DataTable класс, и сделать все вещи запроса AR в мой контроллер, и просто передать в объекте ActiveRecord_Relation, а затем используйте это в новом, CasefileSearchDatatableClass, например:

контроллер действия возврата:

... 
    render json: CasefileSearchDatatable.new(view_context, {:query => finder}) 
end 

, а затем в get_raw_records класса CasefileSearchDatatable:

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-операторы, но таблица данных не обновляется с результатами и не очищается; остается полностью неизменным.

Итак, я пытаюсь найти наилучшее средство для обновления этой таблицы на месте, используя любой из приведенных выше методов или, при необходимости, совершенно другой подход. Кроме того, не уверен, как лучше всего обрабатывать пейджинг, предполагая, что первая цель возможна. Спасибо за любые указатели.

Answer 1

Этот JavaScript-код должен работал (за исключением одного дополнительного draw()), не знаю, почему он не сделал:

var dt = $('#casefiles-table').DataTable(); 
dt.clear(); 
dt.rows.add(data); 
dt.draw(); 

Я не думаю, что ваш подход с отдельным вызовом Ajax будет работать, потому что вы получаете данные Ajax с обработкой на стороне сервера ("serverSide": true). Поэтому после того, как вы добавите персонализированные данные, любое последующее действие пользователя (сортировка, следующая/предыдущая страница) вызовет URL-адрес, указанный $('#casefiles-table').data('source'), и сбросит ваши данные, отфильтрованные пользователем.

РЕШЕНИЕ

С контроля пользовательских фильтрации, рекомендуется использовать ajax.data свойство для отправки пользовательских переменных на стороне сервера сценария. Например:

$('#casefiles-table').DataTable({ 
    "ajax": { 
    "url": $('#casefiles-table').data('source'), 
    "data": function (d) { 
     d.extra_search = $('#extra').val(); 
    } 
    } 
}); 

Затем на серверной стороне извлекать значения этих пользовательских переменных (например, params.extra_search) и настроить свой запрос соответствующим образом.