Пользовательская фильтрация данных со стороны сервера

Question

Я использую datatables (datatables.net), а также использую обработку на стороне сервера (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'
          }
        }  
  } );

Таким образом, при загрузке страницы (первоначальная загрузка данных) он фильтрует по "Роберту" просто отлично. Но теперь я хочу программно изменить данные, чтобы отфильтровать для "friend_name" == "Сара"

Я уже попробовал следующее: отфильтрованные данные имеют правильный отфильтрованный объект, но сама таблица не перерисовывается с новым фильтром.

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

Я тоже попробовал это, но не повезло.

filteredData.draw();

Как я могу достичь этого?

Спасибо за помощь.

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 и убедитесь, что идентификатор указывает на идентификатор кнопки в HTML

Answer 2

Вы почти получили это. Вам просто нужно присвоить фильтр var параметру данных, который передается в запросе datatables:

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

И чтобы отфильтровать данные, просто позвоните draw() на выбранном событии изменения

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

Answer 3

Для базового поиска вы должны использовать API search():

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

Для более сложных запросов вы можете использовать бэкэнд searchBuilder, перехватывая вызов ajax через открытый API. Вот несколько примеров 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>]кажется всегда равным
• value2: Для верхних границ логики «между», где value1были бы нижние границы