2016-11-21 7 views
0

У меня есть таблица данных, которую я пытаюсь фильтровать на основе даты в одном столбце. Я хотел бы отфильтровать данные на основе последнегомодифицированного столбца с датой один год или более поздней, но даже получение фильтра по какой-то жестко закодированной дате было бы хорошим началом. Данные в формате строки, поэтому я пытаюсь использовать новую функцию Date() для преобразования в дату.Как фильтровать столбец данных jQuery по дате?

var table = $('#database').DataTable({ 
     fixedHeader: true, 

     data: dataSet, 
     columns: [ 
     { data: "processName" }, 
     { data: "processLob" }, 
     { data: "processOwner"}, 
     { data: "RiskReviewer"}, 
     { data: "lastModified"}] 
     }); 

     var filteredData = table 
     .column({ data: "lastModified"}) 
     .data() 
     .filter(function (value, index) { 
     return new Date(value) < 2015-10-10 ? true : false; 
     }); 

ответ

0

Первая вещь, которую вы собираетесь хотите сделать, это добавить «columnDefs» объект для даты столбца и определить его тип как «дата». DateTables имеет встроенный синтаксический анализ даты, пока вы следуете хорошо известному формату. ColumnType API Def

Если это не приведет вас туда полностью, вам нужно будет определить функцию рендеринга для столбца данных для нового созданного объекта columnDef. Там вы можете проверить тип рендеринга и вернуть «хорошее» значение для отображения и необработанного значения данных (в идеале значения типа Date) для всего остального. Render API Defintion

Также некоторые общие рекомендации не пытаются бороться с библиотекой. Он на самом деле чрезвычайно гибкий и может обрабатывать много. Поэтому используйте встроенные функции API, где это возможно. Обычно вещи идут наперекосяк, когда люди пытаются вручную манипулировать таблицей, используя JQuery. Под оболочкой плагин DataTables поддерживает тонну состояния, которое никогда не попадает в DOM. В принципе, если в нем есть функция API, используйте его.

EDIT: Добавление ответа на исходный вопрос с плакатами, хотя он нашел другое решение.

Следует иметь в виду, что «фильтр» предназначен только для возврата отфильтрованного набора данных. Он не изменит отображение в сетке. Вместо этого вы захотите использовать «поиск» в элементе «column()» для фильтрации отображаемых строк в DataTable.

Существует небольшая проблема с этим. Метод поиска принимает только обычные значения, а не функции. Так что если вы хотите реализовать это у вас есть поставить пользовательскую функцию поиска следующим образом:

// The $.fn.dataTable.ext.search array is shared amongst all DataTables and 
// all columns and search filters are evaluated in the order in which they 
// appear in 
// the array until a boolean value is returned. 
$.fn.dataTable.ext.search.unshift(function(settings, data, dataIndex) { 
    // Using a negative value to get the column wraps around to the end of 
    // the columns so "-1" will always be your last column. 
    var dateColumn = $(this).column(-1); 

    // We get the data index of the dateColumn and compare it to the index 
    // for the column currently being searched. 
    if(dateColumn.index() !== dataIndex) {' 
     // Pretty sure this indicates to skip this search filter 
     return null; 
    } 

    var columnSearchingBy = $(this).column(dataIndex); 

    // Allows the data to be a string, milliseconds, UTC string format ..etc 
    var columnCellData = new Date(data.lastModified); 
    var valueToSearchBy = new Date(columnSearchingBy.search.value); 

    // Ok this is one of the worst named methods in all of javascript. 
    // Doesn't actually return a meaningful time. Instead it returns the a 
    // numeric value for the number of milliseconds since ~ 1970 I think. 
    // 
    // Kind of like "ticks()" does in other languages except ticks are 
    // measured differently. The search filter I am applying here is to 
    // only show dates in the DataTable that have a lastModified after or 
    // equal the column search. 
    return (valueToSearchBy.getTime() >= columnCellData.getTime()); 
}); 


// So this should use our fancy new search function applied to our datetime 
// column. This will filter the displayed values in the DataTable and from 
// that just a small filter on the table to get all the data for the rows 
// that satisfy the search filter. 
var filteredData = table 
     .column({ data: "lastModified"}) 
     .search('2015-10-10') 
     .draw(); 

Даже если вы нашли другой путь на этом, может быть выше, поможет вам в дальнейшем.

+0

Thanks Aliester! Я не знал об этой функциональности, и это упростило ситуацию! Вы знаете, как фильтровать данные на основе этой даты? – Bilal

+0

nvm Я смог использовать фильтр выбора диапазона даты для фильтрации. Благодаря! – Bilal

+0

@Bilal Я обновил свой ответ на примере того, как это сделать, используя «поиск», потому что люди обычно хотят фильтровать отображение. Также после фильтрации фильтра тривиально, чтобы получить отфильтрованный набор данных из экземпляра DataTable. – Adrian

Смежные вопросы